@font-face {
    font-family: "Metropolis-ExtraBold";
    src: local(※), url("/assets/front/kr/pc/fonts/Metropolis-ExtraBold.eot?#iefix") format("embedded-opentype"), url("/assets/front/kr/pc/fonts/Metropolis-ExtraBold.woff") format("woff"), url("/assets/front/kr/pc/fonts/Metropolis-ExtraBold.woff2") format("woff2"), url("/assets/front/kr/pc/fonts/Metropolis-ExtraBold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "NotoSansKR";
    src: local(※), url("/assets/front/kr/pc/fonts/NotoSansKR-Light.eot?#iefix") format("embedded-opentype"), url("/assets/front/kr/pc/fonts/NotoSansKR-Light.woff") format("woff"), url("/assets/front/kr/pc/fonts/NotoSansKR-Light.woff2") format("woff2"), url("/assets/front/kr/pc/fonts/NotoSansKR-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: "NotoSansKR";
    src: local(※), url("/assets/front/kr/pc/fonts/NotoSans-Bold.eot?#iefix") format("embedded-opentype"), url("/assets/front/kr/pc/fonts/NotoSans-Bold.woff") format("woff"), url("/assets/front/kr/pc/fonts/NotoSans-Bold.woff2") format("woff2"), url("/assets/front/kr/pc/fonts/NotoSans-Bold.otf") format("opentype");
    font-weight: 900;
    font-style: normal
}

@font-face {
    font-family: "NotoSansKR-bold";
    src: local(※), url("/assets/front/kr/pc/fonts/NotoSans-Bold.eot?#iefix") format("embedded-opentype"), url("/assets/front/kr/pc/fonts/NotoSans-Bold.woff") format("woff"), url("/assets/front/kr/pc/fonts/NotoSans-Bold.woff2") format("woff2"), url("/assets/front/kr/pc/fonts/NotoSans-Bold.otf") format("opentype");
    font-weight: 400;
    font-style: normal
}


@font-face {
    font-family: "Metropolis-ExtraBold";
    src: local(※), url("/assets/front/kr/pc/fonts/Metropolis-ExtraBold.eot?#iefix") format("embedded-opentype"), url("/assets/front/kr/pc/fonts/Metropolis-ExtraBold.woff") format("woff"), url("/assets/front/kr/pc/fonts/Metropolis-ExtraBold.woff2") format("woff2"), url("/assets/front/kr/pc/fonts/Metropolis-ExtraBold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "NotoSansKR";
    src: local(※), url("/assets/front/kr/pc/fonts/NotoSansKR-Light.eot?#iefix") format("embedded-opentype"), url("/assets/front/kr/pc/fonts/NotoSansKR-Light.woff") format("woff"), url("/assets/front/kr/pc/fonts/NotoSansKR-Light.woff2") format("woff2"), url("/assets/front/kr/pc/fonts/NotoSansKR-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: "NotoSansKR";
    src: local(※), url("/assets/front/kr/pc/fonts/NotoSans-Bold.eot?#iefix") format("embedded-opentype"), url("/assets/front/kr/pc/fonts/NotoSans-Bold.woff") format("woff"), url("/assets/front/kr/pc/fonts/NotoSans-Bold.woff2") format("woff2"), url("/assets/front/kr/pc/fonts/NotoSans-Bold.otf") format("opentype");
    font-weight: 900;
    font-style: normal
}

@font-face {
    font-family: "NotoSansKR-bold";
    src: local(※), url("/assets/front/kr/pc/fonts/NotoSans-Bold.eot?#iefix") format("embedded-opentype"), url("/assets/front/kr/pc/fonts/NotoSans-Bold.woff") format("woff"), url("/assets/front/kr/pc/fonts/NotoSans-Bold.woff2") format("woff2"), url("/assets/front/kr/pc/fonts/NotoSans-Bold.otf") format("opentype");
    font-weight: 400;
    font-style: normal
}
@font-face {
    font-family: "NotoSansKR-Medium";
    src: local(※), url("/assets/front/kr/pc/fonts/NotoSans-Medium.eot?#iefix") format("embedded-opentype"), url("/assets/front/kr/pc/fonts/NotoSans-Medium.woff") format("woff"), url("/assets/front/kr/pc/fonts/NotoSans-Medium.woff2") format("woff2"), url("/assets/front/kr/pc/fonts/NotoSans-Medium.otf") format("opentype");
    font-style: normal
}


.esg .common_visual h2{
    font-family: "Metropolis-ExtraBold";
    font-weight: bold
}

.esg .inner h3,
.esg .inner p{
    font-family: "NotoSansKR";
    font-weight: 300
}

.esg .inner h2,
.esg .inner em{
    font-family: "NotoSansKR-bold";
    font-weight: 700
}

.esg .inner em {
    display: block;
    padding-top: 17px;
    font-size: 22px;
    color: #010101
}

.esg .common_visual h2{
    font-family: "Metropolis-ExtraBold";
    font-weight: bold
}

.esg h2,
.esg em {
    font-family: "NotoSansKR-bold";
    font-weight: 700
}

.esg .inner{
    width: 1140px;
    margin: 0 auto
}

section .inner ul:after{
    content: '';
    display: block;
    clear: both
}

section::after{
    content: '';
    display: block;
    clear: both
}

.esg .common_visual {
    background-image: url("/assets/front/kr/pc/image/esg/esg_visual.jpg")
}

.esg .common_visual h2 {
    padding-top: 145px;
    text-align: center;
    color: #ffffff;
    font-size: 44px
}

.esg #section0 .inner h2 {
    font-size: 44px;
    color: #000
}

.esg .inner h3{
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
    font-size: 32px;
    color: #010101;
    letter-spacing: -1px
}

.esg section .inner h3:after{
    position: absolute;
    bottom: 0;
    left: 1px;
    content: '';
    width: 100%;
    height: 2px;
    background: #e02f29
}

.esg #section0 {
    background: #fff
}

.esg #section0 .inner h2 {
    padding-top: 100px
}

.esg #section0 .inner h3 {
    padding-top: 61px;
    letter-spacing: -1px
}

.esg #section0 .inner em{
    padding-top: 60px;
}

.esg .inner p {
    padding: 30px 0 40px;
    font-size: 18px;
    color: #010101;
    line-height: 1.75;
    letter-spacing: -1px
}

.esg #section1 {
    background: #f5f5f5;
    padding-bottom:100px;
}

.esg #section1 .inner {
    margin-top: -80px
}

.esg #section1 .inner h3 {
    padding-top: 180px;
    padding-bottom: 16px;
    letter-spacing: -1px
}

.esg #section1 ul.env_box{
    margin-top:20px;
}

.esg #section1 ul.env_box li{
    float:left;
    width:360px;
    height:100px;
    margin-right:30px;
}

.esg #section1 ul.env_box li:last-child{
    margin-right:0;
}

.esg #section1 ul.env_box li p{
    padding-left:50px;
    font-family: "NotoSansKR-Medium";
    line-height: 40px;
}

.esg #section1 ul.env_box li.box01{
    background: url(/assets/front/kr/pc/image/esg/env_box_ico_01.png) #fff 85% no-repeat;
}
.esg #section1 ul.env_box li.box02{
    background: url(/assets/front/kr/pc/image/esg/env_box_ico_02.png) #fff 85% no-repeat;
}
.esg #section1 ul.env_box li.box03{
    background: url(/assets/front/kr/pc/image/esg/env_box_ico_03.png) #fff 85% no-repeat;
}

.esg #section2 {
    padding:100px 0;
}

.esg #section2 ul.soc_box{
    margin-top:20px;
}

.esg #section2 ul.soc_box li{
    float:left;
    width:360px;
    height:100px;
    margin-right:30px;
}

.esg #section2 ul.soc_box li:last-child{
    margin-right:0;
}

.esg #section2 ul.soc_box li p{
    padding-left:50px;
    font-family: "NotoSansKR-Medium";
    line-height: 40px;
}

.esg #section2 ul.soc_box li.box01{
    background: url(/assets/front/kr/pc/image/esg/soc_box_ico_01.png) #f5f5f5 85% no-repeat;
}
.esg #section2 ul.soc_box li.box02{
    background: url(/assets/front/kr/pc/image/esg/soc_box_ico_02.png) #f5f5f5 85% no-repeat;
}
.esg #section2 ul.soc_box li.box03{
    background: url(/assets/front/kr/pc/image/esg/soc_box_ico_03.png) #f5f5f5 85% no-repeat;
}

.esg #section3 {
    background: #f5f5f5;
    padding:100px 0;
    margin-bottom:140px;
}

.esg #section3 ul.gov_box{
    margin-top:20px;
}

.esg #section3 ul.gov_box li{
    float:left;
    width:360px;
    height:100px;
    margin-right:30px;
}

.esg #section3 ul.gov_box li:last-child{
    margin-right:0;
}

.esg #section3 ul.gov_box li.box02 p{
    line-height: 30px;
    padding-top: 22px;
}

.esg #section3 ul.gov_box li p{
    padding-left:50px;
    font-family: "NotoSansKR-Medium";
    line-height: 40px;
}

.esg #section3 ul.gov_box li.box01{
    background: url(/assets/front/kr/pc/image/esg/gov_box_ico_01.png) #fff 85% no-repeat;
}
.esg #section3 ul.gov_box li.box02{
    background: url(/assets/front/kr/pc/image/esg/gov_box_ico_02.png) #fff 85% no-repeat;
}
.esg #section3 ul.gov_box li.box03{
    background: url(/assets/front/kr/pc/image/esg/gov_box_ico_03.png) #fff 85% no-repeat;
}