@charset "utf-8";

/* *******************************************************
 * filename : style.css
 * description : 스타일 CSS
 * date : 2023-10
******************************************************** */
/* CEO 메시지 */
.ceo-message .txt-box {margin-bottom: 50px;}
.ceo-message .txt-box p {text-align: right; font-size: 27px; line-height: 1.5}
.ceo-message .txt-box .txt-1 {margin-bottom: 10px;}
.ceo-message .col {position: relative;}
.ceo-message .img-wrap {padding-right: 80px;}
.ceo-message .display-flex {display: flex; align-items: flex-end; justify-content: flex-end;}
.ceo-message .sign span {font-size: 23px; margin-left: 10px;}
.ceo-message .sign-img {display: inline-block; width: 100px;;}
@media all and (max-width:768px) {
    .ceo-message .txt-box {padding-right: 15px; margin-bottom: 20px;}
    .ceo-message .txt-box p,
    .ceo-message .txt-box p strong {font-size: 21px;}
    .ceo-message .txt-box .txt-1 br {display: none;}
    .ceo-message .img-wrap {padding-right: 0;}
}

/* 인재상 */
.employees .ideal-talent {margin-top: 30px; padding: 40px; background: #f8f8f8;}
.employees .ideal-talent .ctn01 .img {display: block; margin: 0 auto; max-width: 100%; width: 280px;}
.employees .ideal-talent .ctn01 .img-2 {max-width: 50%;}
.employees .ideal-talent .ctn01 .txt-wrap {text-align: center; margin: 25px 0;}
.employees .ideal-talent .ctn01 .txt-wrap p {text-align: center; font-weight: 600; line-height: 1.2; font-size: 14px;}
.employees .ideal-talent .ctn01 .txt-wrap p + p {margin-top: 20px;}
.employees .ideal-talent .ctn01 .list-wrap {margin-top: 40px; width: 100%;}
.employees .ideal-talent .ctn01 .list-wrap dl {display: flex; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin-top: -1px; align-items: center;}
.employees .ideal-talent .ctn01 .list-wrap dl dt {width: 50%; text-align: center; padding: 5px 10px; line-height: 1.2; font-size: 14px;}
.employees .ideal-talent .ctn01 .list-wrap dl dt span {font-weight: 600; position: relative; margin-right: 15px; padding-right: 15px;}
.employees .ideal-talent .ctn01 .list-wrap dl dt span::after {content: ''; display: block; width: 1px; height: 15px; background: #333; position: absolute; right: 0; top: 3px;}
.employees .ideal-talent .ctn01 .list-wrap dl dd {width: 50%; padding: 5px 10px; border-left: 1px solid #ccc; line-height: 1.2; font-size: 14px}
@media all and (max-width:768px) {
    .employees .ideal-talent {padding: 30px;}
    .employees .ideal-talent .ctn01 .txt-wrap {margin: 50px 0;}
    .employees .ideal-talent .ctn01 .img-2 {max-width: 100%;}
    .employees .ideal-talent .ctn01 .list-wrap dl {display: block;}
    .employees .ideal-talent .ctn01 .list-wrap dl dt {padding: 15px 10px 10px;}
    .employees .ideal-talent .ctn01 .list-wrap dl dt,
    .employees .ideal-talent .ctn01 .list-wrap dl dd {width: 100%;}
    .employees .ideal-talent .ctn01 .list-wrap dl dd {padding: 0px 10px 10px; border-left: 0; text-align: center;}
    .employees .ideal-talent .ctn01 .list-wrap dl dt span::after {top: 1px;}
}

/* 준법과 윤리경영 */
@media all and (max-width:768px) {
    .compliance-and-ethical-management .report-channel .row {display: flex; flex-wrap: wrap; margin: 0; justify-content: center;}
    .compliance-and-ethical-management .report-channel .row .col {max-width: 50%; flex: none; margin-top: 0 !important; padding: 5px; width: 200px;}
}



/* ESG Reporting */
.policy-guideline .list-wrap {width: 900px; margin: 0 auto; max-width: 100%;}
.policy-guideline .list-wrap .list {display: flex; justify-content: space-between; padding-left: 40px; position: relative; align-items: center; padding-top: 10px; padding-bottom: 10px;}
.policy-guideline .list-wrap .list + .list {border-top: 1px solid #ddd;}
.policy-guideline .list-wrap .list::before {content: ''; display: block; width: 23px; height: 31px; position: absolute; left: 0; top: 13px; background: url('../images/ico-doc02.png') no-repeat center; background-size: 100%;}
.policy-guideline .list-wrap .list .label {color: #333; font-size: 16px; font-weight: 600;}
.policy-guideline .list-wrap .link-area {margin-top: 0;}
.policy-guideline .list-wrap .link-area a {margin: 0;}
@media(max-width: 768px) {
    .policy-guideline .list-wrap .list {padding-left: 28px;}
    .policy-guideline .list-wrap .list::before {width: 19px; height: 26px; top: 11px;}
    html:lang(en) .policy-guideline .list-wrap .list {display: block;}
    html:lang(en) .policy-guideline .list-wrap .list a.download {margin-top: 10px;}
}

/* 이니셔티브참여현황 */
.box-type-list {display: flex; flex-wrap: wrap; width: 100%;}
.box-type-list .box {border: 1px solid #ccc; border-radius: 10px; padding: 20px;}
.box-type-list.esg-evaluation-and-awards {margin: -20px;}
.box-type-list.esg-evaluation-and-awards .box {width: calc(50% - 40px); margin: 20px; display: flex; flex-direction: column; justify-content: space-between;}
.box-type-list.esg-evaluation-and-awards .box .title {font-weight: 600; margin-bottom: 10px; font-size: 17px;}
.box-type-list.esg-evaluation-and-awards .box .txt {color: #666; line-height: 1.5;}
.box-type-list.esg-evaluation-and-awards .box img {max-width: 100%;}
@media(max-width: 768px) {
    .box-type-list.esg-evaluation-and-awards {margin: 0;}
    .box-type-list.esg-evaluation-and-awards .box {width: 100%; margin: 0;}
    .box-type-list.esg-evaluation-and-awards .box + .box {margin-top: 5px;}
}

/* 지속가능경영보고서 */
.esg-reporting .report-list { margin: 0 -30px;}
.esg-reporting .report-list .list {width: 100%; padding: 30px; display: flex; border-bottom: 1px solid #ddd; align-items: center;}
.esg-reporting .report-list .list .thum {border: 1px solid #ccc; padding: 20px; max-width: 100%; width: 40%;}
.esg-reporting .report-list .list .thum img {max-width: 100%; display: block; margin: 0 auto; width: 30%;}
.esg-reporting .report-list .list .txt-box {padding-left: 60px; width: calc(100% - 40%); display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
.esg-reporting .report-list .list .title {font-weight: 300; font-size: 32px; line-height: 1.2; margin-bottom: 50px;}
.esg-reporting .report-list .list .title br {display: none;}
.esg-reporting .report-list .list .btn-area .btn {display: block; background: #fff; padding: 10px 15px; border-radius: 5px; margin-top: 3px; font-weight: 600; text-align: center;}
.esg-reporting .report-list .list .btn-area .btn.kr {color: #002574; border: 2px solid #002574;}
.esg-reporting .report-list .list .btn-area .btn.en {color: #ee700e; border: 2px solid #ee700e;}
@media all and (max-width:1024px) {
    .esg-reporting .report-list {display: block;}
    .esg-reporting .report-list .list {width:100%;}
}
@media all and (max-width:768px) {
    .esg-reporting .report-list .list {display: block;}
    .esg-reporting .report-list .list .thum {border: 0; width: 100%; margin-bottom: 30px; padding: 0;}
    .esg-reporting .report-list .list .thum img {padding: 20px; border: 1px solid #ccc;}
    .esg-reporting .report-list .list .txt-box {padding-left: 0px; width: 100%;}
    .esg-reporting .report-list .list .title {font-size: 22px; margin-bottom: 20px; text-align: center;}
    .esg-reporting .report-list .list .title br {display: none;}
    .esg-reporting .report-list .list .btn-area .btn {font-size: 13px;}
}

/* DATA & FRAMEWORKS */
.esg-data .list-wrap {width: 100%;}
.esg-data .list-wrap .list {width: 100%;}
.esg-data .list-wrap .list + .list {padding-top: 15px; margin-top: 15px; border-top: 1px solid #ddd;}
.esg-data .list-wrap .list .title-area {display: flex; align-items: flex-start;}
.esg-data .list-wrap .list .title-area .num {display: flex; align-items: center; margin-top: 1px; flex-shrink: 0;}
.esg-data .list-wrap .list .title-area .num p {display: inline-block; padding: 0px 10px; border-radius: 5px; text-align: center; background: #f0f0f0; margin-right: 5px; font-size: 14px; flex-shrink: 0;}
.esg-data .list-wrap .list .title-area .num + .title {margin-left: 5px;}
.esg-data .list-wrap .list .title-area .num + .ctn {margin-left: 5px;}
.esg-data .list-wrap .list .title-area .title {font-size: 18px; color: #333;}
.esg-data .list-wrap .list .link-area {display: block;}
.esg-data .list-area .ctn-list + .ctn-list {margin-top: 40px;}
.esg-data .list-area .list-title {font-size: 20px; font-weight: 500; margin-bottom: 15px; color: #333; padding: 20px; background: #f0f0f0;}
.esg-data .list-area .group {margin-top: 30px;}
.esg-data .list-area .group + .group {padding-top: 30px; border-top: 1px solid #878787;}
.esg-data .list-area .group .group-title {font-size: 20px; color: #333; font-weight: 500; margin-bottom: 20px;}
.esg-data.gri .accordion-1 .list-wrap .list .link-area {padding-left: 91px}
.esg-data.gri .accordion-2 .list-wrap .list .link-area {padding-left: 115px}
.esg-data.gri .accordion-3 .list-wrap .list .link-area {padding-left: 115px}
.esg-data.sasb .list-wrap .list .title-area .title {font-size: 16px;}
.esg-data.sasb .list-wrap .list .link-area {padding-left: 126px;}
.esg-data.sdgs .title-wrap {position: relative;}
.esg-data.sdgs .title-wrap svg {width: 70px; position: absolute; right: 0;}
.esg-data.sdgs .group {padding: 0 20px;}
.esg-data.sdgs .group .ctn {display: flex; margin-top: 10px;}
.esg-data.sdgs .group .ctn .label {margin-right: 10px; flex-shrink: 0;}
.esg-data.sdgs .group .list + .list {padding-top: 10px; margin-top: 10px; border-top: 1px solid #ddd;}
.awards-and-initiatives .list {display: flex;}
.awards-and-initiatives .list + .list {border-top: 0 !important;}
.awards-and-initiatives .list .box {border: 1px solid #ccc; border-radius: 5px; overflow: hidden; padding: 40px 20px; display: flex; align-items: center; width: 100%; justify-content: center;}
.awards-and-initiatives .list .box + .box {margin-left: 5px; flex-shrink: 0; width: 165px; max-width: 100%; border: 1px solid #ea002c;}
.awards-and-initiatives .list .box img {margin: 0 auto; display: block; max-width: 100%;}
.awards-and-initiatives .list .box .txt-wrap {width: 70%; margin-left: 20px; padding-left: 20px; flex-shrink: 0; position: relative;}
.awards-and-initiatives .list .box .txt-wrap::before {content: ''; display: block; position: absolute; top: 0px; left: 0; bottom: 0; width: 1px; background: #ccc;}
.awards-and-initiatives .list .list-title {font-size: 20px; color: #333; padding-left: 15px; position: relative;}
.awards-and-initiatives .list .list-title::before {content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background: #c2c2c2; position: absolute;left: 0; top: 10px;}
.awards-and-initiatives .list .txt {padding-left: 15px; text-align: justify;}
.awards-and-initiatives .list .txt + .txt {margin-top: 10px;}
.awards-and-initiatives .list .box-2 p {text-align: center;}
.awards-and-initiatives .list .box-2 .txt {padding-left: 0; font-size: 14px;}
.awards-and-initiatives .list .level {display: inline-block; padding: 3px 10px; border-radius: 50px; background: #ea002c; color: #fff; margin: 5px 0; font-size: 16px;}
.awards-and-initiatives .level-list {padding-left: 15px; display: flex; align-items: center;}
.awards-and-initiatives .level-list li {margin-right: 15px; display: flex; align-items: center;}
.awards-and-initiatives .list img {display: block; margin-bottom: 25px;}
.awards-and-initiatives .ctn-2 .list-1 img {width: 250px;}
.awards-and-initiatives .ctn-2 .list-2 img {width: 220px;}
.awards-and-initiatives .ctn-2 .list-3 img {width: 190px;}
.awards-and-initiatives .ctn-2 .list-1 img {width: 275px;}
.awards-and-initiatives .ctn-2 .list-2 img {width: 130px;}
.global-partnerships img {width: 200px;}
.global-partnerships .img-wrap {display: flex; flex-wrap: wrap; justify-content: center;}
.global-partnerships .img-wrap img {display: block; margin: 10px !important;}
.global-partnerships .list .box .txt-wrap {width: 30%;}
@media(max-width: 768px) {
    .esg-data .list-area .list-title {font-size: 16px; padding: 15px;}
    .esg-data .list-wrap .list .title-area {display: block;}
    .esg-data .list-wrap .list .title-area .num p {font-size: 13px;}
    .esg-data .list-wrap .list .title-area .title {margin-left: 0; margin-top: 5px; font-size: 16px;}
    .esg-data .list-wrap .list .title-area .num + .title,
    .esg-data .list-wrap .list .title-area .num + .ctn {margin-left: 0;}
    .esg-data .list-wrap .list .link-area {padding-left: 0 !important;}
    .esg-data.sdgs .title-wrap svg {width: 54px;}
    .esg-data.sdgs .group .ctn {display: block;}
    .policy-guideline .list-wrap .list {padding-left: 28px;}
    .policy-guideline .list-wrap .list::before {width: 19px; height: 26px; top: 11px;}
    .awards-and-initiatives .list {display: block;}
    .awards-and-initiatives .list .box {display: block;}
    .awards-and-initiatives .list .box .txt-wrap {margin: 0; padding: 0; margin-top: 20px; padding-top: 20px; width: 100%;}
    .awards-and-initiatives .list .box .txt-wrap::before {content: ''; width: auto; height: 1px; right: 0; bottom: auto;}
    .awards-and-initiatives .list .box + .box {margin-left: 0; margin-top: 5px; width: 100%;}
    .awards-and-initiatives .list .txt {text-align: left;}
    .awards-and-initiatives .list .list-title {font-size: 18px;}
    .awards-and-initiatives .ctn-2 .list-1 img {width: 250px;}
    .awards-and-initiatives .ctn-2 .list-2 img {width: 190px;}
    .awards-and-initiatives .ctn-2 .list-3 img {width: 180px;}
    .awards-and-initiatives .ctn-2 .list-1 img {width: 180px;}
    .awards-and-initiatives .ctn-2 .list-2 img {width: 120px;}
    html:lang(en) .policy-guideline .list-wrap .list {display: block;}
    html:lang(en) .policy-guideline .list-wrap .list a.download {margin-top: 10px;}
}



/* 검색 */
.sub-search .list-wrap .link-area {margin: 0; display: block;}
.sub-search .list-wrap .list + .list {margin-top: 20px; padding-top: 20px; border-top: 1px dashed #cbcbcb;}
.sub-search .list-wrap .list .txt {color: #666; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical;}
.sub-search .list-wrap .list .link-area a {display: block; border-radius: 0; padding: 0;  text-align: left; min-width: auto; margin: 0; border: 0; padding-left: 25px; background-position: left 0 top 8px;}
.sub-search .list-wrap .list .link-area a:hover {background-color: #fff; background-image: url('../images/ico-link.png'); color: #012674;}
.sub-search .list-wrap .list .link-area a:hover .title {color: #012674;}
@media(max-width: 768px) {
    .sub-search  .sub-ctn .h3 span {font-size: 22px;}
}

/* 우선주석처리 */
.sasb .link-area,
.sdgs .link-area,
.gri-standards-index .link-area {display: none !important;}


/* 게시판_202312 */
.board-area .search-area {display: flex; padding: 20px; background: #f7f5f5; position: relative; width: 100%;}
.board-area .search-area .select-wrap {width: 300px; padding-right: 30px; position: relative;}
.board-area .search-area .select-wrap::after {content: ''; display: block; width: 7px; height: 7px; border-right: 1px solid #333; border-bottom: 1px solid #333; position: absolute; right: 10px; transform: rotate(45deg); right: 41px; top: 16px; transition: all 0.2s;}
.board-area .search-area select {width: 100%; border: 1px solid #ddd; padding:10px; font-size: 16px;}
.board-area .search-area input {width: calc(100% - 300px); border: 0; border-bottom: 1px solid #ddd; padding: 10px 40px 10px 0; background-color: #f7f5f5; font-size: 16px;}
.board-area .search-area .btn {position: absolute; width: 40px; height: 40px; right: 20px; bottom: 20px; font-size: 0; text-indent: -99999%; background: none; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.board-area .search-area .btn svg {width: 20px;}
.board-area .list-area {width: 100%; margin-top: 20px; border-top: 2px solid #ea002c;}
.board-area .list-area .list a {width: 100%; height: 240px; display: flex;border-bottom: 1px solid #ddd;}
.board-area .list-area .list .thum {width: 300px; height: 240px; position: relative; overflow: hidden; flex-shrink: 0;}
.board-area .list-area .list .thum img {display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.board-area .list-area .list .ctn {width: calc(100% - 300px); padding: 25px 0 25px 30px; display: flex; flex-direction: column; justify-content: space-between;}
.board-area .list-area .list .ctn .label {color: #ea002c; font-size: 16px;}
.board-area .list-area .list .ctn .title {color: #333; font-size: 19px; font-weight: 600;}
.board-area .list-area .list .ctn .txt {font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.board-area .list-area .list .ctn .date {font-size: 13px; color: #898989;}
.board-area .paging {margin-top: 30px; display: flex; align-items: center; justify-content: center;}
.board-area .paging a {display: flex; align-items: center; justify-content: center; text-align: center; margin: 0 10px; border: 1px solid #fff; font-size: 15px; width: 40px; height: 40px; position: relative; transition: all 0.2s;}
.board-area .paging a.active {color: #ea002c; font-weight: 600;}
.board-area .paging a.prev,
.board-area .paging a.next {font-size: 0; text-indent: -99999%;}
.board-area .paging a.prev:hover,
.board-area .paging a.next:hover {border: 1px solid #ea002c;}
.board-area .paging a.prev::before,
.board-area .paging a.next::before {content: ''; display: block; width: 8px; height: 8px; position: absolute; top: 50%; left: 50%; border-right: 1px solid #333; border-bottom: 1px solid #333; margin-top: -4px;}
.board-area .paging a.prev::before {transform: rotate(135deg);}
.board-area .paging a.next::before {transform: rotate(-45deg); margin-left: -6px;}
.board-area-ctn {width: 100%;}
.board-area-ctn .title-area {text-align: center; padding-bottom: 20px; border-bottom: 2px solid #ea002c;}
.board-area-ctn .title-area .label {color: #ea002c;}
.board-area-ctn .title-area .date {color: #898989; font-size: 13px;}
.board-area-ctn .title-area .title {color: #333; font-size: 26px; font-weight: 600; margin-top: 30px;}
.board-area-ctn .ctn-area {padding: 30px 20px 50px; border-bottom: 1px solid #ddd;}
.board-area-ctn .ctn-footer {display: flex; align-items: center; justify-content: space-between; margin-top: 20px;}
.board-area-ctn .ctn-footer a {display: block; font-size: 16px; font-weight: 600; text-transform: uppercase; color: #333; position: relative;}
.board-area-ctn .ctn-footer a::after {content: ''; display: block; width: 25px; height: 25px; position: absolute; top: 9px; border-left: 1px solid #898989; border-bottom: 1px solid #898989;}
.board-area-ctn .ctn-footer .prev {padding: 10px 5px 10px 50px;}
.board-area-ctn .ctn-footer .next {padding: 10px 50px 10px 5px;}
.board-area-ctn .ctn-footer .prev::after {transform: rotate(45deg); left: 0;}
.board-area-ctn .ctn-footer .next::after {transform: rotate(-135deg); right: 0;}
.board-area-ctn .list-btn {display: flex; width: 180px; height: 50px; max-width: 100%; margin: 50px auto 0; text-align: center; align-items: center; justify-content: center; color: #ea002c; border: 1px solid #ea002c; font-size: 18px;}
@media(max-width: 768px) {
    .board-area .search-area {display: block;}
    .board-area .search-area .select-wrap {width: 100%; padding-right: 0; margin-bottom: 5px;}
    .board-area .search-area .select-wrap::after {right: 14px;}
    .board-area .search-area select {font-size: 14px;}
    .board-area .search-area input {width: 100%; font-size: 14px;}
    .board-area .list-area .list a {display: block; height: auto;}
    .board-area .list-area .list .thum {width: 100%; height: 180px;}
    .board-area .list-area .list .thum img {max-width: 150%;}
    .board-area .list-area .list .ctn {width: 100%; display: block; padding: 15px 0;}
    .board-area .list-area .list .ctn p + p {margin-top: 10px;}
    .board-area .list-area .list .ctn .label {font-size: 13px;}
    .board-area .list-area .list .ctn .title {font-size: 16px;}
    .board-area .list-area .list .ctn .txt {font-size: 14px;}
    .board-area .list-area .list .ctn .date {font-size: 13px;}
    .board-area .paging a {font-size: 13px; width: 30px; height: 30px; margin: 0 5px;}
    .board-area-ctn .title-area .title {font-size: 18px; margin-top: 15px;}
    .board-area-ctn .ctn-footer a {font-size: 13px;}
    .board-area-ctn .ctn-footer a::after {width: 18px; height: 18px;}
    .board-area-ctn .list-btn {font-size: 14px; height: 40px; width: 150px;}
}


/* 영문 */
.esg-strategy .display-flex svg {flex-shrink: 0;}
.esg-strategy  .climate-change-mitigation table li.display-flex {align-items: flex-start;}

/*  */