@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}


ul.esg_menu_bt {list-style: none; margin:4rem auto 0; display: flex; max-width:1200px; }
ul.esg_menu_bt > li {width: 50%; border: 1px solid #ddd; padding: 12px 5px; font-size: 1.2rem; text-align: center; font-family: 'Paperozi'; font-weight: 600;} 
ul.esg_menu_bt > li a {color:#9a9a9a; text-decoration: none;}
ul.esg_menu_bt > li a:hover {color: #0b31ae;}
ul.esg_menu_bt > li.active {background-color: #f2f2f2;}

.esg-report {width:100%; max-width:250px; margin:2rem auto;}
.esg-report > a {color:#343434; text-decoration: none; padding-top:1rem;}
.esg-report > img {box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
@keyframes rotateLine {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* 2. 전체 아이템 컨테이너 스타일 */
.esg-item {
    text-align: center;
    margin: 1rem; /* 원하는 간격 조절 */
    display: inline-block; /* 여러 개를 옆으로 나열할 경우 */
    vertical-align: top;
}

/* 3. 아이콘과 회전 라인을 감싸는 컨테이너 */
.icon-container {
    position: relative; /* 가상 요소의 위치 기준 */
    width: 275px;
    height:275px;       /* 메인 아이콘(ic_esg_g.png)보다 약간 크게 설정 */
    margin: 0 auto 1rem; /* 중앙 정렬 및 아래 간격 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 4. 메인 아이콘 스타일 */
.main-icon {
    display: block;
    width: 230px; 
    height: 230px; /* 원본 이미지 크기에 맞춰 조절 */
    z-index: 2; /* 회전하는 라인 위에 보이도록 */
    position: relative; /* z-index 적용을 위해 필요 */
}

/* 5. 회전하는 배경 라인 이미지 (::before 가상 요소 사용) */
.icon-container::before {
    content: ''; /* 가상 요소는 content 속성이 필수 */
    position: absolute; /* .icon-container를 기준으로 위치 설정 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://goodmit.co.kr/img/esg/a_line.png) no-repeat center / contain; /* 배경 이미지 적용 */
    z-index: 1; /* 메인 아이콘 뒤에 보이도록 */
    animation: rotateLine 15s infinite linear; /* 15초 동안 무한히 선형 회전 */
}
.esg-item:nth-of-type(2) .icon-container::before,
.esg-item:nth-of-type(4) .icon-container::before {
    background-image: url(https://goodmit.co.kr/img/esg/b_line.png);
}


/* ethic */
.sub_tit_box {position: relative; padding: 10px; max-width: 1200px; margin:0 auto;}
.sub_tit_box:before {content: "";height: 100%;width: 100%; background: url(/img/esg/border_bg.png); display: block; position: absolute; z-index: -1; top: 0; left: 0}
.sub_tit_box>div {padding: 48px 40px; background: #fff;}
.sub_tit_box .tit {font-size: 2rem; position: relative; max-width: 730px; text-align: center; margin: 0 auto; font-weight: 700; padding-top: 3.1rem; color:#8b8b8b;}
.sub_tit_box .tit:before {left: 0; background: url(/img/esg/charter_tit_left.png) no-repeat 50%; background-size: 55%;}
.sub_tit_box .tit:after,.sub_tit_box .tit:before {content: ""; display: block;position: absolute;top: 0; width: 63px; height: 133px;}
.sub_tit_box .tit:after {right: 0; background: url(/img/esg/charter_tit_right.png) no-repeat 50%; background-size: 55%; margin:0;}
.sub_tit_box .tit span {font-size: 1.75rem; font-weight: 500; display: inline-block; line-height: 1}
.sub_tit_box .charter_list>li {position: relative;display: table;table-layout: fixed; width: 100%;padding: 20px 0}
.sub_tit_box .charter_list>li:after {content: "";display: block;position: absolute; bottom: 0;left: 0;width: 100%;height: 1px; background: url(/_static/kofac/img/sub/brd_dotted.png) repeat-x 50%;}
.sub_tit_box .charter_list>li p {word-break: keep-all; font-size: 1.1rem;}
.sub_tit_box .charter_list>li p,.sub_tit_box .charter_list>li>div {display: table-cell;vertical-align: middle;width: 100%}
.sub_tit_box .charter_p {font-size: 1.2rem; width:100%; max-width: 1000px; margin:8rem auto; text-align: center; position: relative; word-break: keep-all; color:#343434; line-height: 1.6;}
.sub_tit_box .charter_p > b {font-weight: 600;}
.sub_tit_box .charter_p:after,.sub_tit_box .charter_p:before {content: ""; display: block; position: absolute; left: 0; width: 100%; height: 23px; background: url(/img/esg/border_line.png) no-repeat 50%; background-size: 100%; margin-top: -4rem; margin-bottom: -4rem;}
.sub_tit_box .charter_p:after {bottom: 0;}
.sub_tit_box .type02 .charter_list>li {padding: 1.3rem 0; width: 100%; max-width: 1020px; margin:0 auto; border-bottom: 1px dashed #ddd;}
.sub_tit_box .type02 .charter_list>li .txt {display: table-cell;vertical-align: middle;width: 120px;}
.sub_tit_box .type02 .charter_list>li .txt span {color: #fff;background: #173590; width: 80px; height: 80px; line-height: 78px; display: inline-block; border-radius: 50%; text-align: center; font-size: 1.25rem; font-weight:600;}
.sub_tit_box .charter_img {padding: 2rem 10px 3rem; text-align: center;}
.img_area > span {padding-left: 1rem; font-weight: 600; color: #00285a; font-size: 1.5rem;}
.esg-box {display: flex; justify-content: center; padding-top: 5rem;}
.minibox {border:1px solid #d0d0d0; margin:1rem; padding:1rem 2rem; width:25%; box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;}
.minibox > h4 {text-align: center; color:#173590; font-weight: 700;}
.minibox > p {margin-bottom: 0;}



.esg_text {font-size: 1.6rem; line-height: 1.7; text-align: center; padding: 4rem 0; word-break: keep-all;}
.esg-tit {line-height:1.4; color:#424242; font-family: 'Paperozi'; word-break: keep-all;}
.title_line {display: block;
    width: 1px;
    height: 150px;
    position: relative;
    left: 50%;
    margin-left: -0.5px;}
h4.dep_tit.eng {font-weight: 600;}
.esg-color {color:#0b31ae; font-size: 1.2rem; font-weight: 500;}


/* safety 안전보건경영 */
.safety-flex {display: flex; flex-wrap: wrap;}
.safety-flex > img {padding: 1rem; width: 50%;}





@media screen and (min-width: 768px) and (max-width: 1200px){
.esg-tit {font-size:2rem;}
.title_line {height: 100px;}
.esg_text {font-size: 1.2rem; padding:2rem;}

	.sub_tit_box .tit {font-size: 1.5rem;}
    .sub_tit_box .charter_p {font-size:1rem; width: 90%;}
	.sub_tit_box .charter_list>li p {font-size:.95rem;}
	.sub_tit_box .type02 .charter_list>li {padding: 1rem 0;}
	.sub_tit_box .type02 .charter_list>li .txt {width: 110px;}
    .minibox {margin: 10px; padding: 1rem 15px; width: 33%;}

}


@media only screen and (max-width: 767px){
.esg-tit {font-size:1.3rem;}
.title_line {height: 100px;}
.esg_text {font-size: 1rem; line-height: 1.6; padding:2rem 0;}
h4.dep_tit.eng {font-size:1.2rem;}
.esg-item > .txt {font-size:1rem; line-height: 1.6;}
ul.esg_menu_bt > li {font-size:1rem; letter-spacing: -1px;}


	.sub_tit_box>div {padding: 2rem 1rem;}
	.sub_tit_box .tit {font-size: 1.2rem; padding: 42px 2rem 0;; word-break: keep-all; line-height: 1.2;}
	.sub_tit_box .tit:after,.sub_tit_box .tit:before {width: 50px;}
	.sub_tit_box .charter_p {font-size:15px; line-height: 1.5; margin: 6rem auto;}
	.sub_tit_box .charter_p:after, .sub_tit_box .charter_p:before {margin-top: -3rem; margin-bottom: -3rem;}
	.sub_tit_box .type02 .charter_list>li {padding:1.5rem 0;  display: flex;flex-direction: column; row-gap: 10px;}
    .sub_tit_box .type02 .charter_list>li .txt {width: 50px;}
    .sub_tit_box .type02 .charter_list>li .txt span {height: 32px;width: 70px; font-size: .9rem; line-height: 32px; border-radius: 1rem;}
	.sub_tit_box .charter_list>li p {font-size: 14px;}		
    .esg-box {flex-wrap: wrap;}
    .minibox {width: 80%;}

/* safety 안전보건경영 */
.safety-flex > img {padding: .5rem;}


}