.hd-page {
    color: #333;
    --ratio-size: calc(100vw / 1920);
    --content-title: max(26px, calc(var(--ratio-size) * 48));
    --inside-title: max(24px, calc(var(--ratio-size) * 38));
    --text-title: max(20px, calc(var(--ratio-size) * 28));
    --text-big: max(18px, calc(var(--ratio-size) * 24));
    --type-area-padding: max(20px, calc(var(--ratio-size) * 320));
    --active-color: #39A9AE;
    --inside-padding-bottom: max(80px, calc(var(--ratio-size) * 210));
}

.esg-page .hd-big-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.esg-page .hd-big-banner>* {
    position: relative;
    z-index: 2;
}

.esg-page .hd-big-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);
}

.hd-page a {
    color: #333;
}

.hd-type-area {
    padding-left: var(--type-area-padding);
    padding-right: var(--type-area-padding);
}

.hd-content-title {
    font-size: var(--content-title);
    font-weight: bold;
    line-height: 1.2;
}

.hd-text-title {
    font-size: var(--text-title);
    font-weight: bold;
    line-height: 1.2;
}

.hd-text-big {
    font-size: var(--text-big);
}

.hd-inside-title {
    font-size: var(--inside-title);
    font-weight: bold;
    line-height: 1;
}

.hd-list-margin-top {
    margin-top: max(20px, calc(var(--ratio-size) * 50));
}

.hd-inside-banner {
    width: 100%;
    margin-top: 90px;
}

.hd-inside-banner .crumbs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 23px;
    padding: 15px max(20px, calc(var(--ratio-size) * 100));
    background-color: #F7F7F7;
    font-size: 14px;
}

.hd-inside-banner .crumbs-nav span {
    position: relative;
}

.hd-inside-banner .crumbs-nav span:not(:last-child) a {
    color: #666666;
    opacity: .9;
}

.hd-inside-banner .crumbs-nav span:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    display: block;
    width: 6px;
    height: 10px;
    background: url('../images/esg/crumbs-arrow.svg') no-repeat center/cover;
}

.hd-inside-banner .hd-inside-banner-main {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: max(200px, calc(var(--ratio-size) * 480));
    color: #fff;
}

.hd-inside-banner .hd-inside-banner-main .banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hd-inside-banner .hd-inside-banner-main .hd-content-title {
    position: relative;
    z-index: 2;
}

.hd-inside-padding-bottom {
    padding-bottom: var(--inside-padding-bottom);
}

.hd-inside-description {
    padding-top: max(50px, calc(var(--ratio-size) * 115));
}

.hd-inside-description .manage-content {
    display: flex;
    margin-top: 35px;
}

.hd-inside-description .text-content {
    position: relative;
    flex: 1;
    padding: 37px 0;
    margin-right: max(30px, calc(var(--ratio-size) * 140));
    border-top: 1px solid #CFCFCF;
    border-bottom: 1px solid #CFCFCF;
}

.hd-inside-description .text-content .text-content-main {
    position: relative;
    height: 100%;
    padding-right: 20px;
    overflow: auto;
}

.hd-inside-description .text-content .text-content-main::-webkit-scrollbar {
    width: 3px;
    height: 100%;
    background-color: #D1E8E9;
}

.hd-inside-description .text-content .text-content-main::-webkit-scrollbar-thumb {
    width: 5px;
    height: 5px;
    background-color: #39A9AD;
    border-radius: 10px;
}

.hd-inside-description .text-content .text-content-main::-webkit-scrollbar-track {
    /* background-color: #000; */
}

.hd-inside-description .text-content .description {
    position: absolute;
    margin-top: 20px;
    padding-right: 20px;
    line-height: 1.8;
}

.hd-inside-description .text-content .description>*:not(:last-child) {
    margin-bottom: max(20px, calc(var(--ratio-size) * 40));
}

.hd-inside-description .image {
    position: relative;
    width: max(300px, calc(var(--ratio-size) * 480));
    min-height: max(400px, var(--ratio-size) * 640);
}

.esg-service-management .hd-inside-description .text-content {
    overflow: unset;
}

.esg-service-management .hd-inside-description .text-content .description {
    position: relative;
}


.esg-service-management .hd-inside-description .image img {
    display: none;
}

.esg-service-management .hd-inside-description .image img.active {
    display: block;
}

.hd-inside-investment .top-title .hd-text-big {
    line-height: 1.1;
}

.hd-inside-investment .data-list {
    margin-top: 25px;
}

.hd-inside-investment .data-list .item {
    display: flex;
    border-bottom: 1px solid #CFCFCF;
}

.hd-inside-investment .data-list .item .year {
    position: relative;
    width: max(100px, calc(var(--ratio-size) * 220));
    padding-top: 12px;
    font-size: 20px;
}

.hd-inside-investment .data-list .item:first-child .year::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 20px);
    border-top: 1px solid var(--active-color);
}

.hd-inside-investment .data-list .item:first-child .data::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 20px);
    border-top: 1px solid var(--active-color);
}

.hd-inside-investment .data-list .item .data {
    position: relative;
    flex: 1;
    padding: 20px;
    border-left: 1px dotted var(--active-color);
}

.hd-inside-investment .data-list .item .total-progress {
    position: relative;
    height: 60px;
    background-color: #D1E8E9;
}

.hd-inside-investment .data-list .item .total-progress .current-progress {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 20%;
    height: 100%;
    background-size: cover;
    color: #fff;
}

.hd-inside-investment .data-list .item:nth-of-type(even) .total-progress .current-progress {
    background-image: url('../images/esg/total-progress-bg-2.jpeg');
}

.hd-inside-investment .data-list .item:nth-of-type(odd) .total-progress .current-progress {
    background-image: url('../images/esg/total-progress-bg-1.jpeg');
}


.hd-inside-investment .data-list .item .total-progress .num {
    padding-right: 10px;
}

.hd-data-list {
    display: flex;
    padding-top: max(30px, calc(var(--ratio-size) * 50));
    margin-top: auto;
}

.hd-data-list .hd-data-item {
    flex: 1;
    line-height: 1.1;
}

.hd-data-list .hd-data-item .num {
    font-size: var(--content-title);
    color: var(--active-color);
    font-weight: bold;
}

.hd-pdf-container {
    margin-top: max(40px, calc(var(--ratio-size) * 80));
    padding-bottom: max(70px, calc(var(--ratio-size) * 140));
}

.hd-pdf-container .hd-pdf-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: max(20px, calc(var(--ratio-size) * 40));
}

.hd-pdf-container .hd-pdf-list .item {
    background-color: #F7F7F7;
    transition: all .5s;
    overflow: hidden;
}

.hd-pdf-container .hd-pdf-list .item:hover {
    box-shadow: 0 0 10px #e0e0e0;
}

.hd-pdf-container .hd-pdf-list .item a {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hd-pdf-container .hd-pdf-list .item .top {
    padding: max(15px, calc(var(--ratio-size) * 30));
    padding-bottom: max(20px, calc(var(--ratio-size) * 45));
    color: var(--active-color);
    transition: all .5s;
}

.hd-pdf-container .hd-pdf-list .item:hover .top {
    background-color: #fff;
}

.hd-pdf-container .hd-pdf-list .item .top .name {
    margin-top: 10px;
    font-size: 20px;
    font-weight: normal;
    line-height: 1.2;
}

.hd-pdf-container .hd-pdf-list .item .btn {
    display: flex;
    justify-content: space-between;
    padding-left: max(15px, calc(var(--ratio-size) * 30));
    margin-top: auto;
    background-image: url('../images/esg/report-button-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font-weight: bold;
}

.hd-pdf-container .hd-pdf-list .item .btn p {
    flex: 1;
    padding: 13px 0;
    padding-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-pdf-container .hd-pdf-list .item .btn .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: auto;
    background-color: #fff;
    transition: all .5s;
}

.hd-pdf-container .hd-pdf-list .item:hover .btn .icon {
    background-color: var(--active-color);
}

.hd-pdf-container .hd-pdf-list .item .btn .icon svg path {
    transition: all .5s;
}

.hd-pdf-container .hd-pdf-list .item:hover .btn .icon svg path {
    stroke: #fff;
}

.hd-pdf-container .hd-pdf-list .item .top .hd-inside-title {
    margin-top: 15px;
    font-weight: 500;
}

.hd-pdf-container .hd-pagination {
    margin-top: max(40px, var(--ratio-size) * 80);
}

.hd-pdf-container .hd-pagination ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.hd-pdf-container .hd-pagination ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #F7F7F7;
    font-size: 12px;
    transition: all .5s;
}

.hd-pdf-container .hd-pagination ul li a:hover {
    background-color: rgba(57, 169, 174, .2);
    color: var(--active-color);
}

.need-pagination-list .hd-pagination ul li.first,
.need-pagination-list .hd-pagination ul li.last {
    display: none;
}

.hd-pdf-container .hd-pagination ul li.selected a {
    background-color: rgba(57, 169, 174, .2);
    color: var(--active-color);
}

.hd-pdf-container .hd-pagination ul li.previous a,
.hd-pdf-container .hd-pagination ul li.next a {
    width: 60px;
    border-radius: 50000px;
    background-image: url('../images/esg/pdf-list-arrow.svg');
    background-repeat: no-repeat;
    background-size: 16px 8px;
    background-position: center;
}

.hd-pdf-container .hd-pagination ul li.next a {
    transform: rotate(180deg);
}


.need-pagination-list .hd-pagination {
    margin-top: max(40px, var(--ratio-size) * 80);
}

.need-pagination-list .hd-pagination ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.need-pagination-list .hd-pagination ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #F7F7F7;
    font-size: 12px;
    transition: all .5s;
}

.need-pagination-list .hd-pagination ul li a:hover {
    background-color: rgba(57, 169, 174, .2);
    color: var(--active-color);
}

.need-pagination-list .hd-pagination ul li.selected a {
    background-color: rgba(57, 169, 174, .2);
    color: var(--active-color);
}

.need-pagination-list .hd-pagination ul li.previous a,
.need-pagination-list .hd-pagination ul li.next a {
    width: 60px;
    border-radius: 50000px;
    background-image: url('../images/esg/pdf-list-arrow.svg');
    background-repeat: no-repeat;
    background-size: 16px 8px;
    background-position: center;
}

.need-pagination-list .hd-pagination ul li.next a {
    transform: rotate(180deg);
}

.hd-pdf-container .hd-pdf-list-2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: max(20px, calc(var(--ratio-size) * 40));
}

.hd-pdf-container .hd-pdf-list-2 .item img {
    width: 100%;
    object-fit: cover;
}

.hd-pdf-container .hd-pdf-list-2 .item .top-image {
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
}

.hd-pdf-container .hd-pdf-list-2 .item .top-image::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
    opacity: 0;
    transition: all .5s;
}

.hd-pdf-container .hd-pdf-list-2 .item .top-image .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: block;
    width: max-content;
    padding: 11px 50px;
    border-radius: 20000px;
    background-color: #fff;
    font-size: 14px;
    opacity: 0;
    transition: all .5s;
}

.hd-pdf-container .hd-pdf-list-2 .item .top-image .btn:hover {
    background-color: var(--active-color);
    color: #fff;
}

.hd-pdf-container .hd-pdf-list-2 .item .top-image:hover::after {
    opacity: 1;
}

.hd-pdf-container .hd-pdf-list-2 .item .top-image:hover .btn {
    opacity: 1;
}

.hd-pdf-container .hd-pdf-list-2 .item .text {
    margin-top: 15px;
    font-weight: bold;
    line-height: 1.5;
}

.esg-page .hd-big-banner .hd-content-title {
    color: #fff;
}

.esg-page .hd-big-banner .description {
    width: min(90%, 900px);
    margin: 0 auto;
    margin-top: 40px;
    text-align: center;
    font-size: var(--text-big);
}

.esg-page .hd-big-banner .description p:not(:last-child) {
    margin-bottom: 40px;
}

.esg-page .weather {
    position: relative;
    z-index: 3;
    padding-top: max(40px, calc(var(--ratio-size) * 115));
}

.esg-page .weather .content-main {
    position: relative;
}

.esg-page .weather .content-main .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.esg-page .weather .content-main .bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .5s;
}

.esg-page .weather .content-main .bg img.active {
    opacity: 1;
}

.esg-page .weather .content-main .list {
    position: relative;
    z-index: 2;
    display: flex;
    height: calc(var(--ratio-size) * 640);
}

.esg-page .weather .content-main .list .item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: max(25px, calc(var(--ratio-size) * 50)) max(25px, calc(var(--ratio-size) * 30));
    color: #fff;
}

.esg-page .weather .content-main .list.shadow .item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
}

.esg-page .weather .content-main .list .item .item-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s;
}

.esg-page .weather .content-main .list.active .item .item-bg {
    opacity: 0;
}

.esg-page .weather .content-main .list .item:not(:last-child) {
    border-right: 1px solid #fff;
}

.esg-page .weather .content-main .list .item .hd-text-title {
    position: relative;
    z-index: 3;
}

.esg-page .weather .content-main .list .item .text-content {
    position: relative;
    z-index: 3;
    display: none;
}

.esg-page .weather .content-main .list .item .hd-text-title {
    padding-bottom: 10px;
}

.esg-page .weather .content-main .list .item a.btn {
    display: inline-block;
    padding: max(7px, calc(var(--ratio-size) * 11)) max(25px, calc(var(--ratio-size) * 50));
    margin-top: 22px;
    background-color: #fff;
    border-radius: 2000px;
    font-size: 14px;
    transition: all .5s;
}

.esg-page .weather .content-main .list .item a.btn:hover {
    background-color: var(--active-color);
    color: #fff;
}

.esg-page .manage {
    position: relative;
    padding-bottom: max(50px, calc(var(--ratio-size) * 140));
    margin-top: max(40px, calc(var(--ratio-size) * 200));
    background-color: #F7F7F7;
}

.esg-page .manage::after {
    content: '';
    position: absolute;
    top: min(-100px, calc(var(--ratio-size) * -340));
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F7F7F7;
}

.esg-page .manage .hd-content-title {
    position: relative;
    z-index: 2;
}

.esg-page .manage .manage-swiper {
    width: calc(100% - var(--type-area-padding));
    min-height: calc(var(--ratio-size) * 480);
    overflow: hidden;
    margin-left: auto;
}

.esg-page .manage .swiper-slide {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    min-height: calc(var(--ratio-size) * 480);
    height: auto;
    padding: max(25px, var(--ratio-size) * 50) max(25px, var(--ratio-size) * 30);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #fff;
}

.esg-page .manage .swiper-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: all .5s;
}

.esg-page .manage .swiper-slide.swiper-slide-active::after {
    opacity: 1;
}

.esg-page .manage .swiper-slide .hd-text-title {
    position: relative;
    z-index: 2;
    padding-bottom: 10px;
}

.esg-page .manage .swiper-slide .text-content {
    display: none;
    position: relative;
    z-index: 2;
}

.esg-page .manage .swiper-slide .btn {
    display: inline-block;
    padding: max(7px, calc(var(--ratio-size) * 11)) max(25px, calc(var(--ratio-size) * 50));
    margin-top: 22px;
    background-color: #fff;
    border-radius: 2000px;
    font-size: 14px;
    transition: all .5s;
}

.esg-page .manage .swiper-slide .btn:hover {
    background-color: var(--active-color);
    color: #fff;
}

.esg-page .report {
    position: relative;
    padding: max(50px, var(--ratio-size) * 118) 0;
}

.esg-page .report .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.esg-page .report .bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: all .5s;
}

.esg-page .report .bg img.active {
    opacity: 1;
}

.esg-page .report-content-main {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    color: #fff;
}

.esg-page .report-content-main .list {
    border-top: 1px solid #fff;
}

.esg-page .report-content-main .list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: max(25px, calc(var(--ratio-size) * 50));
    border-bottom: 1px solid #fff;
    color: #fff;
    transition: all .5s;
}

.esg-page .report-content-main .list a:hover {
    background-color: #fff;
    color: #333;
}

.esg-page .report-content-main .list a svg rect,
.esg-page .report-content-main .list a svg path {
    transition: all .5s;
}

.esg-page .report-content-main .list a:hover svg rect {
    fill: var(--active-color);
}

.esg-page .report-content-main .list a:hover svg path {
    stroke: var(--active-color);
}

.esg-page .report-content-main .list a .icon {
    display: block;
    margin-left: max(25px, calc(var(--ratio-size) * 200));
}

.esg-page .supply-chain {
    display: flex;
    padding-top: max(50px, calc(var(--ratio-size) * 165));
    padding-bottom: max(50px, calc(var(--ratio-size) * 170));
}

.esg-page .supply-chain .left {
    width: 50%;
}

.esg-page .supply-chain .list {
    margin-top: max(25px, calc(var(--ratio-size) * 45));
}

.esg-page .supply-chain .list li {
    position: relative;
    opacity: .5;
    transition: all .5s;
}

.esg-page .supply-chain .list li.active {
    opacity: 1;
}

.esg-page .supply-chain .list li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    border-top: 1px solid var(--active-color);
    transition: all .5s;
}

.esg-page .supply-chain .list li.active::after {
    width: 100%;
}


.esg-page .supply-chain .list a {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: max(25px, calc(var(--ratio-size) * 50)) max(20px, calc(var(--ratio-size) * 40));
    margin-right: calc(var(--ratio-size) * 200);
    border-top: 1px solid #CFCFCF;
}

.esg-page .supply-chain .list li:last-child a {
    border-bottom: 1px solid #CFCFCF;
}

.esg-page .supply-chain .list a .icon {
    opacity: 0;
    transition: all .5s;
}

.esg-page .supply-chain .list li.active a .icon {
    opacity: 1;
}

.esg-page .supply-chain .list a .icon svg {
    display: block;
}

.esg-page .supply-chain .image {
    position: relative;
    width: 50%;
}

.esg-page .supply-chain .image .item {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: max(20px, calc(var(--ratio-size) * 40)) max(15px, calc(var(--ratio-size) * 28));
    opacity: 0;
    transition: all .5s;
}

.esg-page .supply-chain .image .item.active {
    z-index: 2;
    opacity: 1;
}

.esg-page .supply-chain .image .item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
}

.esg-page .supply-chain .image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.esg-page .supply-chain .image .description {
    position: relative;
    z-index: 3;
    color: #fff;
}

.esg-page .latest {
    padding-top: max(50px, calc(var(--ratio-size) * 115));
    padding-bottom: max(50px, calc(var(--ratio-size) * 140));
    background-color: #F7F7F7;
}

.esg-page .latest .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.esg-page .latest .top .switch-btn {
    display: flex;
}

.esg-page .latest .top .switch-btn img {
    display: block;
    cursor: pointer;
}

.esg-page .latest .top .switch-btn .care-button-prev {
    transform: rotate(180deg);
    margin-right: 40px;
}

.esg-page .latest .news-swiper {
    width: calc(100% - var(--type-area-padding));
    margin-left: auto;
    overflow: hidden;
}

.esg-page .latest .swiper-slide {
    width: calc(calc(100% + 80px) / 3.5);
    padding-right: 40px;
}

.esg-page .latest .swiper-slide.swiper-slide-active.active {
    width: calc(calc(100% + 80px) / 3.5 * 2);
    height: auto;
    max-height: 500px;
    transition: all .5s;
}

.esg-page .latest .swiper-slide.active .text-content {
    display: none;
}

.esg-page .latest .swiper-slide.active .image {
    width: 100%;
    height: 100%;
    transition: all .5s;
}

.esg-page .latest .swiper-slide .image {
    position: relative;
    overflow: hidden;
    height: 170px;
}

.esg-page .latest .image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
}

.esg-page .latest .image .text {
    position: absolute;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: max(20px, calc(var(--ratio-size) * 30)) max(15px, calc(var(--ratio-size) * 25));
    color: #fff;
    transform: translateY(100%);
    transition: all .5s;
}

.esg-page .latest .swiper-slide-active.active .image .text {
    transform: translateY(0);
}

.esg-page .latest .image .text .time {
    padding-right: max(15px, calc(var(--ratio-size) * 25));
    border-right: 1px solid #fff;
    text-align: center;
    line-height: 1;
}

.esg-page .latest .image .text .time .day {
    font-weight: normal;
}

.esg-page .latest .image .text .hd-text-big {
    flex: 1;
    margin-left: max(20px, calc(var(--ratio-size) * 30));
}

.esg-page .latest .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.esg-page .latest .text-content {
    padding-bottom: max(15px, max(var(--ratio-size) * 25));
    border-bottom: 1px solid var(--active-color);
}

.esg-page .latest .text-content .time {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 26px;
}

.esg-page .latest .text-content .time::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 50%;
    background-color: var(--active-color);
}

.esg-page .latest .text-content .title {
    margin-top: 10px;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.esg-page .latest .text-content .text {
    margin-top: max(15px, calc(var(--ratio-size) * 30));
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.esg-page .latest .text-content .latest-more {
    display: flex;
    align-items: center;
    margin-top: max(30px, calc(var(--ratio-size) * 60));
}

.esg-page .latest .text-content .latest-more img {
    margin-left: 5px;
}

.esg-page .latest .all-news-btn {
    display: inline-block;
    padding: max(7px, calc(var(--ratio-size) * 11)) max(25px, calc(var(--ratio-size) * 50));
    margin-top: 22px;
    background-color: #E4E3E3;
    border-radius: 2000px;
    font-size: 14px;
    transition: all .5s;
}

.esg-page .latest .all-news-btn:hover {
    background-color: var(--active-color);
    color: #fff;
}

.esg-page .meeting {
    display: flex;
    justify-content: center;
    /* padding: max(70px, calc(var(--ratio-size) * 100));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; */
}

.esg-page .meeting .content-main {
    color: #fff;
}

.esg-page .meeting .content-main .tag {
    position: relative;
    display: inline-block;
    padding-left: 28px;
    padding-right: 10px;
    background-image: url('../images/esg/meeting-btn.svg');
    background-repeat: no-repeat;
    background-position: left bottom;
    font-size: 20px;
    font-weight: bold;
}

.esg-page .meeting .content-main .title {
    position: relative;
    font-size: max(30px, calc(var(--ratio-size) * 68));
    font-weight: bold;
    line-height: 1;
}

.esg-page .meeting .content-main .text-content .content-top-img {
    display: inline-block;
    margin-top: 20px;
}

.esg-page .meeting .content-main .text-content .text {
    display: flex;
    align-items: center;
    padding-bottom: 35px;
    font-size: max(26px, calc(var(--ratio-size) * 38));
    font-weight: bold;
    border-bottom: 1px solid #fff;
}

.esg-page .meeting .content-main .text-content .text .player-btn {
    margin-left: max(30px, calc(var(--ratio-size) * 66));
    transition: all .5s;
}

.esg-page .meeting .content-main .text-content .text .player-btn img {
    display: block;
}

.esg-page .meeting .content-main .text-content .text .player-btn:hover {
    transform: scale(1.1);
    cursor: pointer;
}

.esg-map .content-main {
    margin-top: max(50px, calc(var(--ratio-size) * 120));
}

.esg-map .item {
    display: flex;
}

.esg-map .item:not(:last-child) {
    margin-bottom: 10px;
}

.esg-map .item .area-one {
    position: relative;
    z-index: 2;
    width: 150px;
    padding: 16px 0;
    border-top: 1px solid #CFCFCF;
}

.esg-map .item .area-two {
    position: relative;
    flex: 1;
    display: flex;
    gap: 10px;
    margin-left: 40px;
}

.esg-map .item .area-two.roof {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 20px;
    padding-top: 40px;
    background-image: url('../images/esg/roof-bg.svg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
}

.esg-map .item .area-two .pillar-name {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    line-height: 1.3;
    background-color: rgba(57, 169, 174, .75);
    width: 150px;
    font-size: 16px;
}

.esg-map .item .area-two .pillar-name p {
    /* width: 2em; */
    padding: 15px;
    text-align: center;
}

.esg-map .item .area-two .detail-list,
.esg-map .item .area-two .built-list {
    flex: 1;
    display: flex;
}

.esg-map .item .area-two .detail-list {
    gap: 10px;
}

.esg-map .item .area-two .detail-list .item-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 27px 20px;
    background-color: #F7F7F7;
}

.esg-map .item .area-two .detail-list .item-detail .top-content {
    display: flex;
    justify-content: space-between;
}

.esg-map .item .area-two .detail-list .item-detail .top-content .serial {
    font-size: 38px;
    font-weight: bold;
    line-height: 1;
    color: transparent;
    text-stroke: 2px var(--active-color);
    -webkit-text-stroke: 2px var(--active-color);
}

.esg-map .item .area-two .detail-list .item-detail .top-content .hd-text-title {
    font-size: 16px;
}

.esg-map .item .area-two .detail-list .item-detail .description {
    margin-bottom: 35px;
    margin-top: 30px;
    font-size: 16px;
    line-height: 1.6;
}

.esg-map .item .area-two .detail-list .item-detail .content-text {
    flex: 1;
    padding-bottom: 45px;
    padding-top: 30px;
    margin-top: auto;
    line-height: 1.5;
    border-top: 1px solid var(--active-color);
}

.esg-map .item .area-two .detail-list .item-detail .content-text p {
    line-height: 1.8;
}

.esg-map .item .area-two .built {
    flex: 1;
    padding: 20px 0;
}

.esg-map .item .area-two .built .hd-text-big {
    text-align: center;
    color: var(--active-color);
}

.esg-map .item .area-two .built-list {
    justify-content: space-evenly;
    margin-top: 15px;
    gap: 15px;
}

.esg-map .item .area-two .built-item {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background-color: #D7EEEF;
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    line-height: 1.3;
}

.esg-map .item:last-child .area-one::after,
.esg-map .item:last-child .area-two::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #CFCFCF;
}

.esg-deploy .fall {
    padding-top: max(50px, calc(var(--ratio-size) * 115));
    padding-bottom: max(50px, calc(var(--ratio-size) * 150));
}

.esg-deploy .fall .description {
    margin-top: 30px;
    line-height: 1.8;
}

.esg-deploy .fall .description>*:not(:last-child) {
    margin-bottom: max(20px, calc(var(--ratio-size) * 40));
}

.esg-deploy .fall .list {
    display: flex;
    justify-content: space-between;
    gap: max(20px, calc(var(--ratio-size) * 40));
    min-height: calc(var(--ratio-size) * 640);
    margin-top: max(30px, calc(var(--ratio-size) * 60));
}

.esg-deploy .fall .list .item {
    flex: 1;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.esg-deploy .fall .list .item .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.esg-deploy .fall .list .item .text-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 36px 0;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, .2);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.esg-deploy .fall .list .item .text-content .text {
    margin-top: 20px;
}

.esg-deploy .decrease {
    padding-top: max(50px, calc(var(--ratio-size) * 110));
    padding-bottom: max(100px, calc(var(--ratio-size) * 250));
    background-color: #F7F7F7;
}

.esg-deploy .decrease .description {
    margin-top: 30px;
    line-height: 1.8;
}

.esg-deploy .decrease .manage-message {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: max(20px, calc(var(--ratio-size) * 40));
    min-height: calc(var(--ratio-size) * 480);
    margin-top: max(30px, calc(var(--ratio-size) * 70));
}

.esg-deploy .decrease .manage-message::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
}

.esg-deploy .decrease .manage-message .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.esg-deploy .decrease .manage-message .text-content {
    position: relative;
    z-index: 2;
    height: 100%;
    color: #fff;
}

.esg-deploy .decrease .manage-message .text-content .text {
    margin-top: 20px;
}

.esg-deploy .decrease .map-top .top-icon {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 30px;
}

.esg-deploy .decrease .map-top .top-icon .line {
    flex: 1;
    border-bottom: 2px solid var(--active-color);
}

.esg-deploy .decrease .map-top .top-icon img {
    margin: 0 calc(var(--ratio-size) * 135);
}

.esg-deploy .decrease .map-top p {
    margin-top: 10px;
    text-align: center;
}

.esg-deploy .decrease .map-content {
    margin-top: max(20px, calc(var(--ratio-size) * 50));
}

.esg-deploy .decrease .map-content .top-title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 30px;
    padding-top: 80px;
    background-image: url('../images/esg/roof-bg.svg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
}

.esg-deploy .decrease .map-content .list {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.esg-deploy .decrease .map-content .item {
    background-color: #fff;
}

.esg-deploy .decrease .map-content .item .top-content {
    width: 100%;
    padding: 9px;
    background-color: #1A96D5;
    text-align: center;
    color: #fff;
}

.esg-deploy .decrease .map-content .item:nth-child(2) .top-content {
    background-color: rgba(239, 132, 76, .75);
}

.esg-deploy .decrease .map-content .item .top-content .tag {
    display: inline-block;
    padding: 4px 10px;
    font-weight: bold;
    background-color: #fff;
    color: #51AEDD;
    border-radius: 50000px;
}

.esg-deploy .decrease .map-content .item:nth-child(2) .top-content .tag {
    color: #F1A177;
}

.esg-deploy .decrease .map-content .item .list-detail {
    display: flex;
}

.esg-deploy .decrease .map-content .item-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    padding-top: max(30px, calc(var(--ratio-size) * 60));
    padding-bottom: max(35px, calc(var(--ratio-size) *75));
    width: 50%;
}

.esg-deploy .decrease .map-content .item-detail:not(:last-child) {
    border-right: 1px solid #CFCFCF;
}

.esg-deploy .decrease .map-content .item-detail img {
    width: max(90px, calc(var(--ratio-size) * 120));
    height: max(90px, calc(var(--ratio-size) * 120));
}

.esg-deploy .decrease .map-content .item-detail .hd-text-big {
    margin-top: 28px;
    line-height: 1.2;
    font-weight: bold;
    text-align: center;
}

.esg-deploy .decrease .map-content .item-detail .text {
    margin-top: 20px;
    text-align: center;
}

.esg-environment .hd-inside-investment {
    padding-bottom: max(50px, calc(var(--ratio-size) * 160));
    margin-top: max(50px, calc(var(--ratio-size) * 95));
}

.esg-environment .serve {
    padding-top: max(50px, calc(var(--ratio-size) * 115));
    padding-bottom: max(70px, calc(var(--ratio-size) * 200));
    background-color: #F7F7F7;
}

.esg-environment .serve .description {
    margin-top: 30px;
    line-height: 1.8;
}

.esg-environment .serve .serve-swiper {
    width: calc(100% - var(--type-area-padding));
    margin-top: max(30px, calc(var(--ratio-size) * 70));
    margin-left: var(--type-area-padding);
    overflow: hidden;
}

.esg-environment .serve .serve-swiper .swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    width: 55%;
    min-height: calc(var(--ratio-size) * 480);
}

.esg-environment .serve .serve-swiper .swiper-slide .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.esg-environment .serve .serve-swiper .swiper-slide .text-content {
    position: relative;
    z-index: 2;
    padding: 35px;
    background-color: rgba(0, 0, 0, .3);
    /* backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px); */
    color: #fff;
}

.esg-environment .serve .serve-swiper .swiper-slide .hd-text-big {
    padding-bottom: 5px;
}

.esg-public .community-list {
    display: flex;
    gap: max(20px, calc(var(--ratio-size) * 40));
    padding-bottom: max(50px, calc(var(--ratio-size) * 120));
    margin-top: max(50px, calc(var(--ratio-size) * 120));
}

.esg-public .community-list .item {
    flex: 1;
    background-color: #F7F7F7;
    padding: max(20px, calc(var(--ratio-size) * 40)) max(20px, calc(var(--ratio-size) * 35));
    padding-bottom: max(25px, calc(var(--ratio-size) * 50));
}

.esg-public .community-list .item img {
    display: block;
    width: max(80px, calc(var(--ratio-size) * 100));
    height: max(80px, calc(var(--ratio-size) * 100));
    margin: 0 auto;
}

.esg-public .community-list .item .hd-text-big {
    margin-top: max(20px, max(var(--ratio-size) * 35));
}

.esg-public .community-list .item .text {
    margin-top: 15px;
    line-height: 1.8;

}

.esg-public .care {
    padding-top: max(50px, calc(var(--ratio-size) * 105));
    padding-bottom: max(70px, calc(var(--ratio-size) * 120));
    background-color: #F7F7F7;
}

.esg-public .care .description {
    margin-top: 30px;
    line-height: 1.8;

}

.esg-public .care .care-swiper {
    width: calc(100% - var(--type-area-padding));
    margin-top: max(30px, calc(var(--ratio-size) * 70));
    margin-left: var(--type-area-padding);
    overflow: hidden;
}

.esg-public .care .care-swiper .swiper-slide {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 55%;
    min-height: calc(var(--ratio-size) * 480);
}

.esg-public .care .care-swiper .swiper-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 50%);
}

.esg-public .care .care-swiper .swiper-slide .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.esg-public .care .care-swiper .swiper-slide .hd-text-big {
    position: relative;
    z-index: 2;
    padding: max(20px, calc(var(--ratio-size) * 40)) max(15px, calc(var(--ratio-size) * 30));
    color: #fff;
}

.esg-public .care .swiper-button-box {
    display: flex;
    margin-top: max(30px, calc(var(--ratio-size) * 60));
}

.esg-public .care .swiper-button-box img {
    display: block;
    cursor: pointer;
}

.esg-public .care .swiper-button-box .care-button-prev {
    transform: rotate(180deg);
    margin-right: 40px;
}

.esg-talents .bottom-content {
    position: relative;
    margin-top: max(50px, calc(var(--ratio-size) * 120));
    padding-top: max(50px, calc(var(--ratio-size) * 120));
    padding-bottom: max(70px, calc(var(--ratio-size) * 170));
    color: #fff;
}

.esg-talents .bottom-content .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.esg-talents .bottom-content .talents-swiper {
    position: relative;
    z-index: 2;
    width: calc(100% - var(--type-area-padding));
    margin-left: var(--type-area-padding);
    overflow: hidden;
}

.esg-talents .bottom-content .talents-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: auto;
    padding: 30px;
    background-color: rgba(0, 0, 0, .2);
    transition: all .5s;
}

.esg-talents .bottom-content .talents-swiper .swiper-slide.swiper-slide-active {
    background-color: #fff;
}

.esg-talents .bottom-content .talents-swiper .swiper-slide .serial {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--active-color);
    background-color: #fff;
    font-size: 14px;
    transition: all .5s;
}

.esg-talents .bottom-content .talents-swiper .swiper-slide.swiper-slide-active .serial {
    background-color: var(--active-color);
    color: #fff;
}

.esg-talents .bottom-content .talents-swiper .swiper-slide .hd-text-big {
    text-align: center;
    line-height: 1.5;
    transition: all .5s;
}

.esg-talents .bottom-content .talents-swiper .swiper-slide.swiper-slide-active .hd-text-big {
    color: var(--active-color);
}

.esg-talents .bottom-content .text-content-swiper {
    position: relative;
    z-index: 2;
    padding: 0 max(50px, calc(var(--ratio-size) * 160));
    padding-bottom: calc(var(--ratio-size) * 140);
    margin-top: max(50px, calc(var(--ratio-size) * 120));
    border-bottom: 1px solid var(--active-color);
    text-align: center;
    line-height: 1.8;
    overflow: hidden;
}

.esg-harmony {
    padding-bottom: max(70px, calc(var(--ratio-size) * 150));
}

.esg-harmony .step-list {
    display: flex;
    gap: 27px;
    margin-top: max(50px, calc(var(--ratio-size) * 120));
}

.esg-harmony .step-list .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 30px;
    border-top: 1px solid var(--active-color);
}

.esg-harmony .step-list .name {
    display: flex;
    align-items: center;
}

.esg-harmony .step-list .name .main-icon {
    width: 90px;
}

.esg-harmony .step-list .name .text {
    margin: 0 20px;
}

.esg-harmony .step-list .name .arrow-icon {
    width: 35px;
}

.esg-harmony .step-list .text-content {
    flex: 1;
    padding: max(20px, calc(var(--ratio-size) * 40));
    padding-bottom: max(25px, calc(var(--ratio-size) * 50));
    margin-top: 30px;
    background-color: #F7F7F7;
    line-height: 1.8;

}

.esg-harmony .help {
    position: relative;
    padding-top: max(30px, calc(var(--ratio-size) * 77));
    padding-bottom: max(200px, calc(var(--ratio-size) * 400));
    margin-top: max(50px, calc(var(--ratio-size) * 120));
}

.esg-harmony .help .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.esg-harmony .help .hd-text-title {
    position: relative;
    z-index: 2;
}

.esg-harmony .help .description {
    position: relative;
    z-index: 2;
    margin-top: 20px;

    line-height: 1.8;
}

.esg-harmony .improve {
    position: relative;
    z-index: 2;
    display: flex;
    margin-top: min(-50px, calc(var(--ratio-size) * -120));
}

.esg-harmony .improve .left-text,
.esg-harmony .improve .image {
    width: 50%;
    background-color: #F7F7F7;
}

.esg-harmony .improve .left-text {
    display: flex;
    flex-direction: column;
    padding: max(30px, calc(var(--ratio-size) * 70)) 0;
    padding-left: max(25px, calc(var(--ratio-size) * 50));
    padding-right: max(50px, calc(var(--ratio-size) * 110));

}

.esg-harmony .improve .left-text .description {
    margin-top: 20px;
}

.esg-harmony .improve .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.esg-welfare .help-list {
    margin-top: max(50px, calc(var(--ratio-size) * 120));
}

.esg-welfare .help-list .help-item {
    display: flex;
}

.esg-welfare .help-list .help-item:nth-child(odd) {
    background-color: #F7F7F7;
}

.esg-welfare .help-list .help-item:nth-child(even) {
    flex-direction: row-reverse;
}

.esg-welfare .help-list .help-item .image {
    width: max(300px, calc(var(--ratio-size) * 640));
}

.esg-welfare .help-list .help-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.esg-welfare .help-list .help-item .item-message {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: max(30px, calc(var(--ratio-size) * 70)) max(50px, calc(var(--ratio-size) * 160));
    padding-right: var(--type-area-padding);
}

.esg-welfare .help-list .help-item:nth-child(even) .item-message {
    padding: max(30px, calc(var(--ratio-size) * 70)) max(50px, calc(var(--ratio-size) * 160));
    padding-left: var(--type-area-padding);
}

.esg-welfare .help-list .help-item .item-message .text {
    margin-top: 15px;
    line-height: 1.8;

}

.esg-welfare .help-list .help-item .item-message .hd-data-list {
    justify-content: space-between;
}

.esg-welfare .help-list .help-item .item-message .hd-data-item {
    flex: unset;
}

.esg-policy .select-nav {
    display: flex;
    justify-content: center;
}

.esg-policy .select-nav .btn {
    width: 120px;
    padding-bottom: 10px;
    text-align: center;
}

.esg-policy .select-nav .btn a {
    display: block;
}

.esg-policy .select-nav .btn.active {
    border-bottom: 2px solid var(--active-color);
}

.esg-policy .select-nav .btn.active a {
    color: var(--active-color);
}

.esg-policy .select-nav .btn:hover {
    border-bottom: 2px solid var(--active-color);
}

.esg-policy .select-nav .btn:hover a {
    color: var(--active-color);
}

.esg-policy .hd-pdf-list {
    margin-top: max(30px, calc(var(--ratio-size) * 60));
}

.esg-news .news-container {
    margin-top: max(50px, calc(var(--ratio-size) * 115));
}

.esg-news .news-container .top-content {
    display: flex;
    justify-content: space-between;
}

.esg-news .news-container .top-content .btn {
    background-color: #E4E3E3;
    border-radius: 50000px;
    transition: all .5s;
}

.esg-news .news-container .top-content .btn:hover {
    background-color: var(--active-color);
    color: #fff;
}

.esg-news .news-container .top-content .btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 50px;
    transition: all .5s;
}

.esg-news .news-container .top-content .btn:hover a {
    color: #fff;
}

.esg-news.esg-news-page .news-container {
    margin-top: 0;
    padding-top: max(50px, calc(var(--ratio-size) * 100));
    padding-bottom: max(70px, calc(var(--ratio-size) * 200));
}

.esg-news.esg-news-page .news-container .top-news-list {
    margin-top: 0;
}

.esg-news .news-container .top-news-list {
    display: flex;
    gap: max(20px, calc(var(--ratio-size) * 40));
    height: max(300px, calc(var(--ratio-size) * 470));
    margin-top: max(30px, calc(var(--ratio-size) * 55));
}

.esg-news .news-container .top-news-list .first-item {
    flex: 1;
}

.esg-news .news-container .top-news-list .second-item {
    width: calc((100% - max(40px, var(--ratio-size) * 80)) / 3);
}

.esg-news .news-container .top-news-list .second-item.full-news {
    width: 100%;
}

.esg-news .news-container .top-news-list .item {
    position: relative;
    overflow: hidden;
}

.esg-news .news-container .top-news-list .item a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
}

.esg-news .news-container .top-news-list .item a {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.esg-news .news-container .top-news-list .item .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s;
}

.esg-news .news-container .top-news-list .item a:hover .bg {
    transform: scale(1.1);
}

.esg-news .news-container .top-news-list .first-item .text {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: max(20px, calc(var(--ratio-size) * 30)) max(15px, calc(var(--ratio-size) * 25));
    color: #fff;
}

.esg-news .news-container .top-news-list .first-item .text .time {
    padding-right: max(15px, calc(var(--ratio-size) * 25));
    border-right: 1px solid #fff;
    text-align: center;
    line-height: 1;
}

.esg-news .news-container .top-news-list .first-item .text .hd-text-big {
    flex: 1;
    margin-left: max(20px, calc(var(--ratio-size) * 30));
}

.esg-news .news-container .top-news-list .second-item .text {
    position: relative;
    z-index: 2;
    padding: 20px;
    color: #fff;
}

.esg-news .news-container .top-news-list .second-item .text .time {
    position: relative;
    display: flex;
}

.esg-news .news-container .top-news-list .second-item .text .time::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    margin-top: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background-color: #fff;
}

.esg-news .news-container .top-news-list .second-item .text .hd-text-big {
    font-size: 20px;
}

.esg-news .news-container .news-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: max(20px, calc(var(--ratio-size) * 40));
    margin-top: max(20px, calc(var(--ratio-size) * 40));
}

.esg-news .news-container .news-list .item a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--active-color);
}

.esg-news .news-container .news-list .image {
    position: relative;
    overflow: hidden;
    height: 170px;
    overflow: hidden;
}

.esg-news .news-container .news-list .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s;
}

.esg-news .news-container .news-list .item a:hover .image img {
    transform: scale(1.1);
}

.esg-news .news-container .news-list .text-content {
    flex: 1;
    flex-direction: column;
    display: flex;
    height: 100%;
}

.esg-news .news-container .news-list .text-content .time {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 26px;
}

.esg-news .news-container .news-list .text-content .time::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    margin-right: 7px;
    border-radius: 50%;
    background-color: var(--active-color);
}

.esg-news .news-container .news-list .text-content .title {
    margin-top: 10px;
    font-size: 20px;

}

.esg-news .news-container .news-list .text-content .text {
    margin-top: max(15px, calc(var(--ratio-size) * 30));

    font-size: 14px;
}

.esg-news .news-container .news-list .text-content .latest-more {
    display: flex;
    align-items: center;
    padding-top: max(30px, calc(var(--ratio-size) * 60));
    margin-top: auto;
}

.esg-news .news-container .news-list .text-content .latest-more .img {
    margin-left: 5px;
}

.esg-news .videos-container {
    padding-top: max(45px, calc(var(--ratio-size) * 95));
    padding-bottom: max(70px, calc(var(--ratio-size) * 200));
    margin-top: max(50px, calc(var(--ratio-size) * 120));
    background-color: #F7F7F7;
}

.esg-news.esg-video-page .videos-container {
    padding-top: max(50px, calc(var(--ratio-size) * 100));
    padding-bottom: max(70px, calc(var(--ratio-size) * 200));
    margin-top: 0;
}

.esg-news.esg-video-page .videos-container .top-video {
    margin-top: 0;
}

.esg-news .videos-container .top-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: max(20px, calc(var(--ratio-size) * 40));
}

.esg-news .videos-container .top-content .btn {
    background-color: #E4E3E3;
    border-radius: 50000px;
    transition: all .5s;
}

.esg-news .videos-container .top-content .btn:hover {
    background-color: var(--active-color);
    color: #fff;
}

.esg-news .videos-container .top-content .btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 50px;
    transition: all .5s;
}

.esg-news .videos-container .top-content .btn:hover a {
    color: #fff;
}

.esg-news .videos-container .top-video {
    position: relative;
    height: 480px;
    margin-top: max(30px, calc(var(--ratio-size) * 55));
    margin-bottom: max(20px, calc(var(--ratio-size) * 40));
    cursor: pointer;
}

.esg-news .videos-container .top-video img {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.esg-news .videos-container .top-video img.btn-bg {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    opacity: 0;
    transition: all .5s;
}

.esg-news .videos-container .top-video:hover img.btn-bg {
    opacity: 1;
}

.esg-news .videos-container .videos-list {
    display: grid;
    gap: max(20px, calc(var(--ratio-size) * 32));
    grid-template-columns: repeat(2, calc(var(--ratio-size) * 610));
}

.esg-news .videos-container .videos-list .item {
    position: relative;
    flex: 1;
    display: flex;
    cursor: pointer;
    height: calc(var(--ratio-size) * 230);
}

.esg-news .videos-container .videos-list .item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
}

.esg-news .videos-container .videos-list .item .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.esg-news .videos-container .videos-list .item .text {
    position: relative;
    z-index: 2;
    padding: 20px;
    line-height: 1.5;
    margin-top: auto;
    color: #fff;
}

.esg-news .videos-container .videos-list .item .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all .5s;
}

.esg-news .videos-container .videos-list .item:hover .play-btn {
    opacity: 1;
}

.esg-talent-management .data-message {
    padding-top: max(50px, calc(var(--ratio-size) * 120));
    padding-bottom: max(70px, calc(var(--ratio-size) * 120));
    margin-top: max(50px, calc(var(--ratio-size) * 120));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.esg-talent-management .list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    color: #fff;
}

.esg-talent-management .list .item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc((100% - 30px * 3) / 4);
    min-height: 150px;
    padding: 45px 20px;
    background-color: rgba(0, 0, 0, .2);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    cursor: pointer;
    line-height: 1.5;
    transition: all .5s;
    text-align: center;
}

.esg-talent-management .list .item:hover {
    background-color: #fff;
    color: var(--active-color);
}

.esg-talent-management .list .item .serial {
    position: absolute;
    left: 20px;
    top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 14px;
    background-color: #fff;
    border-radius: 50%;
    color: var(--active-color);
    transition: all .5s;
}

.esg-talent-management .list .item:hover .serial {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: var(--active-color);
}

.esg-talent-management .list .more-content {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 260px;
    padding: 20px max(50px, calc(var(--ratio-size) * 160));
    padding-bottom: 40px;
    text-align: center;
    line-height: 1.8;
    border-bottom: 1px solid var(--active-color);
}

.esg-talent-management .list .more-content.active {
    display: flex;
}

.esg-talent-management .list .more-content p:not(:last-child) {
    margin-bottom: max(10px, calc(var(--ratio-size) * 30));
}

.esg-talent-management .list .item.active {
    background-color: #fff;
    color: var(--active-color);
}

.esg-talent-management .list .item.active .serial {
    color: #fff;
    background-color: var(--active-color);
}

.esg-production-management {
    padding-bottom: max(70px, calc(var(--ratio-size) * 180));
}

.esg-production-management .data-message {
    padding-top: max(40px, calc(var(--ratio-size) * 85));
    padding-bottom: max(50px, calc(var(--ratio-size) * 120));
    margin-top: max(50px, calc(var(--ratio-size) * 120));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #fff;
}

.esg-production-management .data-message .list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: max(25px, calc(var(--ratio-size) * 45));
}

.esg-production-management .data-message .list .item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    padding-bottom: 15px;
    background-color: rgba(0, 0, 0, .2);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.esg-production-management .data-message .list .item::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    border-top: 1px solid var(--active-color);
}

.esg-production-management .data-message .list .item p {
    opacity: .5;
}

.esg-production-management .data-message .list .item .hd-text-big {
    margin-bottom: max(15px, calc(var(--ratio-size) * 30));
    opacity: 1;
    line-height: 1.25;
}

.esg-production-management .data-message .list .data-item:first-child {
    margin-bottom: 20px;
}

.esg-production-management .data-message .list .data-item .hd-text-title {
    margin-top: 5px;
    color: var(--active-color);
    opacity: 1;
}

.esg-production-management .hd-inside-investment {
    margin-top: max(50px, calc(var(--ratio-size) * 120));
}

.esg-innovation-management {
    padding-bottom: max(70px, calc(var(--ratio-size) * 180));
}

.esg-innovation-management .build {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 940px;
    padding-bottom: max(40px, calc(var(--ratio-size) * 80));
    margin-top: max(50px, calc(var(--ratio-size) * 95));
    color: #fff;
}

.esg-innovation-management .build .top-content {
    padding-top: max(30px, calc(var(--ratio-size) * 75));
    padding-bottom: max(40px, calc(var(--ratio-size) * 90));
    background-color: rgba(0, 0, 0, .2);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    text-align: center;
}

.esg-innovation-management .build .top-content .text {
    margin-top: 20px;
    line-height: 1.8;
}

.esg-innovation-management .build .data-message {
    margin-top: 50px;
}

.esg-innovation-management .build .data-message .text-content .text {
    margin-top: 20px;
    line-height: 1.8;

}

.esg-innovation-management .build .data-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: max(25px, calc(var(--ratio-size) * 50));
}

.esg-innovation-management .build .data-list .item {
    padding-top: 20px;
    border-top: 1px solid #FFFFFF;
}

.esg-innovation-management .build .data-list .item .hd-inside-title {
    margin-bottom: 5px;
    color: var(--active-color);
}

.esg-innovation-management .hd-inside-investment {
    margin-top: max(50px, calc(var(--ratio-size) * 120));
}

.esg-quality-management .data-message {
    padding-top: max(40px, calc(var(--ratio-size) * 85));
    padding-bottom: max(70px, calc(var(--ratio-size) * 100));
    margin-top: max(50px, calc(var(--ratio-size)* 120));
    color: #fff;
}

.esg-quality-management .data-message .data-list {
    display: flex;
    gap: max(20px, calc(var(--ratio-size) * 20));
    margin-top: 35px;
}

.esg-quality-management .data-message .data-list-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--active-color);
}

.esg-quality-management .data-message .data-list-item .top-title {
    padding: 10px 0;
}

.esg-quality-management .data-message .data-list-item .list {
    height: 100%;
    display: flex;
    gap: 20px;
}

.esg-quality-management .data-message .data-list-item .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    padding: 30px 20px;
    background-color: rgba(0, 0, 0, .2);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.esg-quality-management .data-message .data-list-item .item .text {
    margin-top: 10px;
    line-height: 1.5;
}

.esg-quality-management .data-message .data-list-item .item .text p:not(:last-child) {
    margin-bottom: 30px;
}

.esg-quality-management .data-message .data-list-item .item .progress {
    padding-top: 40px;
    margin-top: auto;
    margin-left: auto;
}

.esg-quality-management .data-message .description {
    margin-top: 30px;
    line-height: 1.8;
}

.esg-quality-management .data-message .description p:not(:last-child) {
    margin-bottom: max(20px, calc(var(--ratio-size) * 35));
}

.esg-purchasing-management .data-message {
    padding-top: max(50px, calc(var(--ratio-size) * 120));
    padding-bottom: max(70px, calc(var(--ratio-size) * 120));
    margin-top: max(50px, calc(var(--ratio-size) * 120));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.esg-purchasing-management .data-message .title {
    text-align: center;
    color: #fff;
}

.esg-purchasing-management .list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
    color: #fff;
}

.esg-purchasing-management .list .item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc((100% - 30px * 3) / 4);
    min-height: 150px;
    padding: 45px 20px;
    background-color: rgba(0, 0, 0, .2);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    cursor: pointer;
    transition: all .5s;
    text-align: center;
    line-height: 1.5;
}

.esg-purchasing-management .list .item:hover {
    background-color: #fff;
    color: var(--active-color);
}

.esg-purchasing-management .list .item .serial {
    position: absolute;
    left: 20px;
    top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 14px;
    background-color: #fff;
    border-radius: 50%;
    color: var(--active-color);
    transition: all .5s;
}

.esg-purchasing-management .list .item:hover .serial {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: var(--active-color);
}

.esg-purchasing-management .list .more-content {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 260px;
    padding: 20px max(50px, calc(var(--ratio-size) * 300));
    padding-bottom: 40px;
    text-align: center;
    line-height: 1.8;
    border-bottom: 1px solid var(--active-color);
    width: 100%;
}

.esg-purchasing-management .list .more-content.active {
    display: flex;
}

.esg-purchasing-management .list .more-content p:not(:last-child) {
    margin-bottom: max(10px, calc(var(--ratio-size) * 30));
}

.esg-purchasing-management .list .item.active {
    background-color: #fff;
    color: var(--active-color);
}

.esg-purchasing-management .list .item.active .serial {
    color: #fff;
    background-color: var(--active-color);
}

.esg-service-management {
    padding-bottom: max(70px, calc(var(--ratio-size) * 150));
}

.esg-service-management .text-content {
    padding: 0;
    margin-right: 0;
}

.esg-service-management .text-content .item {
    position: relative;
    padding-right: max(30px, calc(var(--ratio-size) * 160));
}

.esg-service-management .text-content .item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 0;
    border-top: 1px solid var(--active-color);
    transition: all .5s;
}

.esg-service-management .text-content .item.active::before {
    width: 100%;
}

.esg-service-management .text-content .item:hover::before {
    width: 100%;
}


.esg-service-management .text-content .item .title {
    padding: max(30px, calc(var(--ratio-size) * 60)) 0;
    cursor: pointer;
    border-top: 1px solid #CFCFCF;
    opacity: .5;
    transition: all .5s;
}

.esg-service-management .text-content .item.active .title {
    opacity: 1;
}

.esg-service-management .text-content .item:hover .title {
    opacity: 1;
}

.esg-service-management .text-content .description {
    display: none;
    padding-bottom: max(25px, calc(var(--ratio-size) * 50));
    margin-top: 0;
    border-bottom: 1px solid #CFCFCF;
}

.esg-service-management .text-content .item.active .title {
    padding-top: max(20px, calc(var(--ratio-size) * 35));
    padding-bottom: 20px;
}

.esg-service-management .text-content .item:last-child:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - max(30px, calc(var(--ratio-size) * 160)));
    border-bottom: 1px solid #CFCFCF;
}

.esg-service-management .hd-inside-description .text-content {
    border-bottom: none;
}

.esg-green-product {
    padding-bottom: max(70px, calc(var(--ratio-size) * 150));
}

.esg-green-product .green-content {
    padding-top: max(50px, calc(var(--ratio-size) * 115));
}

.esg-green-product .green-content .green-product-image {
    margin-top: 35px;
}

.esg-green-product .green-content .green-product-image img {
    width: 100%;
}

.esg-green-product .green-content .quarter-list {
    display: flex;
    gap: max(20px, calc(var(--ratio-size) * 40));
    margin-top: max(30px, calc(var(--ratio-size) * 60));
}

.esg-green-product .green-content .quarter-list .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: max(25px, calc(var(--ratio-size) * 45));
    border-top: 2px solid var(--active-color);
}

.esg-green-product .green-content .quarter-list .item .text {
    flex: 1;
    padding: max(20px, calc(var(--ratio-size) * 40));
    padding-bottom: max(40px, calc(var(--ratio-size) * 80));
    margin-top: max(25px, calc(var(--ratio-size) * 45));
    background-color: #F7F7F7;
    line-height: 1.8;

}

.esg-factory .factory-content {
    padding-top: max(50px, calc(var(--ratio-size) * 115));
}

.esg-factory .factory-content .factory-image {
    margin-top: 35px;
}

.esg-factory .factory-content .factory-image img {
    width: 100%;
}

.esg-factory .factory-content .description {
    padding-bottom: max(50px, calc(var(--ratio-size) * 120));
    margin-top: max(30px, calc(var(--ratio-size) * 60));

}

.esg-factory .factory-content .description p:not(:last-child) {
    margin-bottom: max(20px, calc(var(--ratio-size) * 40));
}

.esg-factory .nine-factory {
    padding-top: max(50px, calc(var(--ratio-size) * 120));
    padding-bottom: max(70px, calc(var(--ratio-size) * 120));
    background-color: #F7F7F7;
}

.esg-factory .nine-factory .top-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.esg-factory .nine-factory .factory-swiper {
    width: calc(100% - var(--type-area-padding));
    margin-left: var(--type-area-padding);
    margin-top: max(35px, calc(var(--ratio-size) * 75));
    overflow: hidden;
}

.esg-factory .nine-factory .factory-swiper .swiper-slide {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 55%;
    min-height: calc(var(--ratio-size) * 480);
}

.esg-factory .nine-factory .swiper-button-box {
    display: flex;
}

.esg-factory .nine-factory .swiper-button-box img {
    display: block;
    cursor: pointer;
}

.esg-factory .nine-factory .swiper-button-box .care-button-prev {
    transform: rotate(180deg);
    margin-right: 40px;
}

.esg-supply-chain-management .description {
    padding-top: max(50px, calc(var(--ratio-size) * 115));
}

.esg-supply-chain-management .description .text {
    margin-top: 35px;
}

.esg-supply-chain-management .message-container {
    padding-bottom: max(70px, calc(var(--ratio-size) * 180));
    margin-top: max(35px, calc(var(--ratio-size) * 70));
}

.esg-supply-chain-management .message-container .list {
    display: flex;
    gap: 20px;
    margin-top: max(20px, calc(var(--ratio-size) * 35));
}

.esg-supply-chain-management .message-container .list .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 30px;
    border-top: 1px solid var(--active-color);
    transition: all .5s;
}

.esg-supply-chain-management .message-container .list .top {
    display: flex;
    align-items: center;
    opacity: .2;
    transition: all .5s;
}

.esg-supply-chain-management .message-container .list .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    background-color: var(--active-color);
    color: #fff;
    font-weight: bold;
}

.esg-supply-chain-management .message-container .list .top .name {
    margin-left: 20px;
}

.esg-supply-chain-management .message-container .detail-message {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    padding: max(20px, calc(var(--ratio-size) * 45)) max(20px, calc(var(--ratio-size) * 30));
    margin-top: max(20px, calc(var(--ratio-size) * 30));
    background-color: #F7F7F7;
    transition: all .5s;
}

.esg-supply-chain-management .message-container .detail-message .hd-text-big {
    padding-bottom: 20px;
}

.esg-supply-chain-management .message-container .detail-message .text {
    display: none;
    line-height: 1.8;

}

.esg-supply-chain-management .message-container .detail-message .bottom-icon {
    opacity: 0;
    margin-top: auto;
    transition: all .5s;
}

.esg-supply-chain-management .message-container .item.active .detail-message .bottom-icon {
    opacity: 1;
}


.esg-supply-chain-management .message-container .detail-message .bottom-icon img {
    padding-top: max(35px, calc(var(--ratio-size) * 60));
    margin-left: auto;
}

.esg-supply-chain-management .message-container .item.active .top {
    opacity: 1;
}

.esg-supply-chain-management .message-container .item.active {
    flex: 2;
}

.esg-supply-chain-management .message-container .item.active .detail-message {
    background-color: #fff;
    box-shadow: 0 0 20px #00000010;
}

.esg-rating-management .rating-content {
    padding-top: max(50px, calc(var(--ratio-size) * 115));
}

.esg-rating-management .rating-content .list {
    padding-bottom: calc(var(--ratio-size) * 120);
    margin-top: max(20px, calc(var(--ratio-size) * 35));
}

.esg-rating-management .rating-content .list .item {
    padding-bottom: max(25px, calc(var(--ratio-size) * 50));
    border-bottom: 1px solid #CFCFCF;
}

.esg-rating-management .rating-content .image {
    display: flex;
    width: 100%;
    height: calc(var(--ratio-size) * 320);
    background-color: #F7F7F7;
}

.esg-rating-management .rating-content .image img {
    width: 50%;
    height: 100%;
    object-fit: cover;
}

.esg-rating-management .rating-content .list .jk-message {
    margin-top: max(25px, calc(var(--ratio-size) * 50));
    text-align: center;
}

.esg-rating-management .rating-content .list .jk-message .top .hd-content-title {
    line-height: 1;
}

.esg-rating-management .rating-content .list .jk-message .text {
    margin-top: 25px;
    line-height: 1.8;
}

.esg-rating-management .rating-content .list .item:not(:first-child) {
    padding-top: max(20px, calc(var(--ratio-size) * 40));
}

.esg-rating-management .honor {
    padding-top: max(40px, calc(var(--ratio-size) * 80));
    padding-bottom: max(70px, calc(var(--ratio-size) * 120));
    color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.esg-rating-management .honor .list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: max(25px, calc(var(--ratio-size) * 50));
}

.esg-rating-management .honor .list .item {
    display: flex;
    border-top: 1px solid var(--active-color);
}

.esg-rating-management .honor .list .item .text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 20px;
    margin-top: 10px;
    background-color: rgba(0, 0, 0, .2);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.esg-rating-management .honor .list .item .text p {
    text-align: center;
    line-height: 1.5;
}

.esg-rating-management .honor .list .item .text strong {
    font-weight: bold;
}

.esg-rating-management .honor .list .item .text .markedness {
    padding: 10px 0;
    font-size: var(--text-big);
    text-align: center;
    line-height: 1.2;
}

.esg-govern .framework {
    padding-top: max(50px, calc(var(--ratio-size) * 115));
    padding-bottom: max(50px, calc(var(--ratio-size) * 150));
}

.esg-govern .framework .description {
    margin-top: 30px;

    line-height: 1.8;
}

.esg-govern .framework .description p:not(:last-child) {
    margin-bottom: max(20px, calc(var(--ratio-size) * 40));
}

.esg-govern .framework .step-list {
    display: flex;
    gap: max(20px, calc(var(--ratio-size) * 40));
    margin-top: max(25px, calc(var(--ratio-size) * 50));
}

.esg-govern .framework .step-list .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 30px;
    border-top: 1px solid var(--active-color);
}

.esg-govern .framework .step-list .item .name {
    display: flex;
    align-items: center;
}

.esg-govern .framework .step-list .item .name .text {
    margin: 0 20px;
}

.esg-govern .framework .step-list .item .name .arrow-icon {
    margin-left: auto;
}

.esg-govern .framework .step-list .item .text-content {
    flex: 1;
    padding: max(20px, calc(var(--ratio-size) * 40)) max(20px, calc(var(--ratio-size) * 30));
    padding-bottom: max(25px, calc(var(--ratio-size) * 50));
    margin-top: 30px;
    background-color: #F7F7F7;
}

.esg-govern .framework .step-list .item .text-content .hd-text-big {
    line-height: 1.4;
}

.esg-govern .framework .step-list .item .text-content .text {
    margin-top: 30px;
}

.esg-govern .build {
    padding-top: max(50px, calc(var(--ratio-size) * 115));
    padding-bottom: max(70px, calc(var(--ratio-size) * 180));
    background-color: #F7F7F7;
}

.esg-govern .build .description {
    margin-top: 30px;
    line-height: 1.8;
}

.esg-govern .build .more-message {
    position: relative;
    width: 80%;
    margin: 0 auto;
    margin-top: max(50px, calc(var(--ratio-size) * 100));
}

.esg-govern .build .more-message .bg {
    width: 100%;
}

.esg-govern .build .more-message .mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    opacity: .2;
}

.esg-govern .build .more-message .type {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    padding: calc(var(--ratio-size) * 5) calc(var(--ratio-size) * 30);
    background-color: #fff;
    color: #EA5464;
    border: 2px solid #EA5464;
    border-radius: 50000px;
    font-size: calc(var(--ratio-size) * 18);
    font-weight: bold;
    transition: all .5s;
}

.esg-govern .build .more-message .type.inside {
    top: 20%;
}

.esg-govern .build .more-message .type.active {
    background-color: #EA5464;
    border-color: #fff;
    color: #fff;
}

.esg-govern .more-message .data-item {
    position: absolute;
}

.esg-govern .more-message .data-item .icon {
    position: relative;
    z-index: 2;
    width: calc(var(--ratio-size) * 34);
    height: calc(var(--ratio-size) * 34);
    cursor: pointer;
}

.esg-govern .more-message .data-item .icon svg .svg-bg,
.esg-govern .more-message .data-item .icon svg .svg-vertical,
.esg-govern .more-message .data-item .icon svg .svg-horizontal {
    transition: all .5s;
}

.esg-govern .more-message .data-item .icon:hover svg .svg-bg,
.esg-govern .more-message .data-item .icon.active svg .svg-bg {
    fill: #EA5464;
}

.esg-govern .more-message .data-item .icon svg .svg-vertical {
    transform-origin: center;
}

.esg-govern .more-message .data-item .icon:hover svg .svg-vertical,
.esg-govern .more-message .data-item .icon.active svg .svg-vertical {
    fill: #FFFFFF;
    transform: rotate(90deg);
}

.esg-govern .more-message .data-item .icon:hover svg .svg-horizontal,
.esg-govern .more-message .data-item .icon.active svg .svg-horizontal {
    fill: #FFFFFF;
}

.esg-govern .more-message .data-item .text-content {
    display: none;
    position: absolute;
    left: 50%;
    transform: translate(-50%, calc(var(--ratio-size) * -17));
    width: calc(var(--ratio-size) * 480);
    padding: calc(var(--ratio-size) * 40);
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 0 20px #00000020;
    font-size: calc(var(--ratio-size) * 16);
    text-align: center;
}

.esg-govern .more-message .data-item .text-content .name {
    font-size: calc(var(--ratio-size) * 24);
}

.esg-govern .more-message .data-item .text-content .text {
    margin-top: calc(var(--ratio-size) * 15);
}

.esg-govern .more-message .data-item.first {
    top: 32%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.esg-govern .more-message .data-item.second {
    top: 50.5%;
    right: 29%;
    transform: translate(-50%, -50%);
    z-index: 4;
}

.esg-govern .more-message .data-item.third {
    top: 50.5%;
    left: 29%;
    transform: translate(50%, -50%);
    z-index: 4;
}

.esg-govern .more-message .data-item.fourth {
    bottom: 29%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.esg-govern .more-message .data-item.fifth {
    top: 25%;
    left: 18%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.esg-govern .more-message .data-item.sixth {
    top: 25%;
    right: 18%;
    transform: translate(50%, -50%);
    z-index: 5;
}

.esg-govern .more-message .data-item.seventh {
    bottom: 16%;
    left: 18%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.esg-govern .more-message .data-item.eighth {
    bottom: 16%;
    right: 18%;
    transform: translate(50%, -50%);
    z-index: 3;
}

.esg-govern .phone-more-picture {
    display: none;
    margin-top: 20px;
}

.esg-govern .phone-more-message {
    display: none;
    margin-top: 40px;
}

.esg-govern .phone-more-message .hd-text-title {
    text-align: center;
}

.esg-govern .phone-more-message .message-detail {
    margin-top: 20px;
}

.esg-govern .phone-more-message .message-detail .type {
    text-align: center;
}

.esg-govern .phone-more-message .message-detail .type p {
    display: inline-block;
    padding: 5px 25px;
    border: 2px solid #fff;
    background-color: #EA5464;
    border-radius: 20000px;
    font-weight: bold;
    font-size: 16px;
    color: #fff;
}

.esg-govern .phone-more-message .message-detail .list {
    margin-top: 15px;
}

.esg-govern .phone-more-message .message-detail .item {
    background-color: #fff;
    text-align: center;
    border-radius: 20px;
    padding: 20px 15px;
}

.esg-govern .phone-more-message .message-detail .item:not(:last-child) {
    margin-bottom: 20px;
}

.esg-govern .phone-more-message .message-detail .item .top-title {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
}

.esg-govern .phone-more-message .message-detail .item .item-detail {
    margin-top: 5px;
}

.esg-plan {
    padding-bottom: max(70px, calc(var(--ratio-size) * 180));
}

.esg-plan .top-description {
    padding-top: max(50px, calc(var(--ratio-size) * 115));
}

.esg-plan .top-description .description {
    margin-top: 30px;

    line-height: 1.8;
}

.esg-plan .top-description .description p:not(:last-child) {
    margin-bottom: max(20px, calc(var(--ratio-size) * 40));
}

.esg-plan .top-description .logo-img {
    display: block;
    width: min(90%, calc(var(--ratio-size) * 440));
    margin: 0 auto;
    margin-top: max(50px, calc(var(--ratio-size) * 90));
}

.esg-plan .emission-list {
    /* --line-top: 30.5%; */
    --line-top: 0;
    position: relative;
    display: flex;
    gap: 3.125%;
    padding-bottom: 40px;
    margin-top: max(50px, calc(var(--ratio-size) * 100));
}

.esg-plan .emission-list::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--type-area-padding);
    width: calc(100% - var(--type-area-padding) * 2);
    border-bottom: 1px solid #CFCFCF;
}

.esg-plan .emission-list::before {
    content: '';
    position: absolute;
    top: var(--line-top);
    right: 0;
    width: calc(100% - var(--type-area-padding));
    border-bottom: 1px solid #EA5464;
}

.esg-plan .emission-list .item {
    position: relative;
    /* flex: 1.4; */
    width: 34.375%;
    padding-top: max(20px, calc(var(--ratio-size) * 40));
    border-top: 1px solid var(--active-color);
}

.esg-plan .emission-list .item:first-child {
    /* flex: 1; */
    width: 25%;
    opacity: 0;
}

.esg-plan .emission-list .item:first-child .full-content {
    opacity: 0;
    visibility: hidden;
}

.esg-plan .emission-list .item.item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    right: calc(var(--ratio-size) * -20);
    height: 100%;
    border-right: 1px dotted var(--active-color);
}

.esg-plan .emission-list .item .part-one {
    position: relative;
}

.esg-plan .emission-list .item .part-one .full-content {
    width: 100%;
}

.esg-plan .emission-list .item .part-one .half-content {
    position: absolute;
    bottom: 0;
    width: calc(100% + var(--type-area-padding) - 2px);
    max-width: max-content;
    left: calc(var(--type-area-padding) * -1);
}

.esg-plan .emission-list .item .part-two {
    padding-top: 32px;
    margin-top: 40px;
    border-top: 1px solid var(--active-color);
}

.esg-plan .emission-list .item:not(:first-child) .part-two .hd-text-title {
    opacity: 0;
    visibility: hidden;
    width: 72.7%;
}

.esg-plan .emission-list .item:not(:first-child) .part-one .hd-text-title {
    display: none;
    opacity: 0;
    visibility: hidden;
}

.esg-plan .emission-list .item .part-two .jk-message {
    margin-top: max(20px, calc(var(--ratio-size) * 40));
}

.esg-plan .emission-list .item .part-two .jk-message .top {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
}

.esg-plan .emission-list .item .part-two .jk-message .top p {
    flex: 1;
    color: var(--active-color);
}

.esg-plan .emission-list .item .part-two .jk-message-detail {
    padding-bottom: max(50px, calc(var(--ratio-size) * 90));
    margin-top: 20px;
    line-height: 1.8;
}

.esg-plan .tips {
    margin-top: 32px;
    margin-bottom: max(50px, calc(var(--ratio-size) * 120));
}

.esg-plan .tips sup {
    color: #EA5464;
}

.esg-plan .strategy {
    padding-top: max(50px, calc(var(--ratio-size) * 180));
    padding-bottom: max(70px, calc(var(--ratio-size) * 200));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #fff;
    text-align: center;
}

.esg-plan .strategy .year {
    display: inline-block;
    font-size: max(100px, calc(var(--ratio-size) * 168));
    font-weight: bold;
    opacity: .5;
    line-height: 1;
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
}

.esg-plan .strategy .text {
    padding: 0 11%;
    margin-top: 35px;
    line-height: 1.8;
}

.esg-plan .strategy-list {
    position: relative;
    display: flex;
    gap: 40px;
    padding-top: max(50px, calc(var(--ratio-size) * 120));
    padding-bottom: max(20px, calc(var(--ratio-size) * 40));
}

.esg-plan .strategy-list::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--type-area-padding);
    width: calc(100% - var(--type-area-padding) * 2);
    border-bottom: 1px solid #CFCFCF;
}

.esg-plan .strategy-list .item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 32px;
    border-top: 2px solid var(--active-color);
}

.esg-plan .strategy-list .item.item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 0;
    height: 100%;
    border-right: 1px dotted var(--active-color);
}

.esg-plan .strategy-list .item:not(:first-child) .hd-text-title {
    opacity: 0;
    visibility: hidden;
}

.esg-plan .strategy-list .item .jk-message {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: max(20px, calc(var(--ratio-size) * 40));
}

.esg-plan .strategy-list .item .jk-message .top {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
}

.esg-plan .strategy-list .item .jk-message .top p {
    flex: 1;
    color: var(--active-color);
}

.esg-plan .strategy-list .item .message-detail {
    flex: 1;
    padding: max(20px, calc(var(--ratio-size) * 35)) max(20px, calc(var(--ratio-size) * 40));
    margin-top: 20px;
    background-color: #F7F7F7;
}

.esg-plan .strategy-list .item .message-detail h3 {
    font-size: 18px;
    font-weight: bold;
}

.esg-plan .strategy-list .item .message-detail .text:nth-child(2) {
    margin-top: max(20px, calc(var(--ratio-size) * 35));
    border-top: 1px solid #CFCFCF;
}

.esg-plan .strategy-list .item .message-detail .text:nth-child(2) h3 {
    padding-top: max(20px, calc(var(--ratio-size) * 35));
}

/* reset esg header nav */
.topmenus .item.esg-item {
    position: unset;
}

.topmenus .esg-dropdown {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(100%);
    display: none;
    /* display: flex; */
    flex-wrap: wrap;
    gap: 25px;
    width: 100%;
    padding: 40px 15%;
    padding-bottom: 90px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.topmenus .esg-dropdown.first-view {
    display: flex !important;
    opacity: 0;
    visibility: hidden;
}

.topmenus .esg-dropdown>ul {
    flex: 1;
}

.topmenus .esg-dropdown>ul>li:first-child {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #c1c1c1;
}

.topmenus .esg-dropdown>ul>li:first-child a {
    font-size: 16px;
}

.topmenus .esg-dropdown>ul>li>a {
    display: block;
    padding: 3px 0;
    transition: all .5s;
    font-size: 14px;
}

.topmenus .esg-dropdown>ul>li:hover>a {
    color: #1da63b;
}

.topmenus .esg-dropdown>ul>li.has-more-nav {
    position: relative;
}

.topmenus .esg-dropdown>ul>li.has-more-nav>a {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topmenus .esg-dropdown>ul>li.has-more-nav>a::after {
    content: '';
    display: block;
    transform: translateX(50%);
    border: 5px solid transparent;
    border-left-color: #000;
    transition: all .5s;
}

.topmenus .esg-dropdown>ul>li.has-more-nav:hover>a::after {
    transform: translateX(0) rotate(180deg);
}

.topmenus .esg-dropdown>ul>li.has-more-nav ul {
    display: none;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(100%, -50%);
    padding: 5px 5px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

/* .topmenus .esg-dropdown>ul>li.has-more-nav ul::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-100%, -50%);
    border: 5px solid transparent;
    border-right-color: #fff;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
} */


.topmenus .esg-dropdown>ul>li.has-more-nav ul a {
    display: block;
    padding: 3px 5px;
    padding-right: 30px;
    transition: all .5s;
    font-size: 14px;
    white-space: nowrap;
}

.topmenus .esg-dropdown>ul>li.has-more-nav ul a:hover {
    color: #1da63b;
}

body.wfEditorMode .hd-page a.wfEditorMode {
    display: block !important;
    position: relative !important;
    z-index: 9999 !important;
    width: max-content !important;
    height: 1.3em !important;
    min-height: auto !important;
    line-height: 1.3em !important;
    padding: 0 0.5em !important;
    margin-top: -1.3em !important;
    background-color: #fff !important;
    color: #99ccff !important;
    transform: translateY(100%);
    border-radius: 0 !important;
}

body.wfEditorMode .hd-page a.wfEditorMode:hover {
    display: block !important;
    position: relative !important;
    z-index: 9999 !important;
    width: max-content !important;
    height: 1.3em !important;
    min-height: auto !important;
    line-height: 1.3em !important;
    padding: 0 0.5em !important;
    margin-top: -1.3em !important;
    background-color: #fff !important;
    color: #99ccff !important;
    transform: translateY(100%);
    border-radius: 0 !important;
}

.hd-page a.wfEditorMode {
    display: none !important;
}

.hd-page a.wfEditorMode::after,
.hd-page a.wfEditorMode::before {
    display: none;
}

.esg-inside-nav {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #CFCFCF;
}

.esg-inside-nav li {
    flex: 1;
}

.esg-inside-nav a {
    display: block;
    padding: 5px 15px;
    text-align: center;
}