:root {
    --top: calc(-150 * var(--px));
}

.esg .layer>header {
    max-width: var(--root-max-width);
    margin: auto;
    padding-top: calc(100 * var(--px));
    padding-bottom: calc(50 * var(--px));
}

.esg .layer>header h3 {
    font-size: calc(48 * var(--px));
    font-weight: bold;
    line-height: calc(52 * var(--px));
}

.esg .layer>header .desc {
    color: #333;
    font-size: calc(20 * var(--px));
    line-height: calc(24 * var(--px));
    padding-top: calc(20 * var(--px));
}

.esg .layer>main {
    max-width: var(--root-max-width);
    margin: auto;
    padding-bottom: calc(100 * var(--px));
}

.esg-info {
    padding: calc(150 * var(--px)) 0 calc(300 * var(--px));
    background-image: linear-gradient(to right, #f7954a, #ef6b30, #eb5723);
    position: relative;
}

.esg-info .esg-info-content {
    max-width: var(--root-max-width);
    margin: auto;
    display: flex;
}

.esg-info .esg-info-content .left {
    color: #fff;
    flex: 1 1 0;
    padding-right: calc(80 * var(--px));
}

.esg-info .esg-info-content .left h3 {
    font-size: calc(48 * var(--px));
    line-height: calc(52 * var(--px));
    font-weight: bold;
    padding-bottom: calc(40 * var(--px));
}

.esg-info .esg-info-content .left>section {
    text-align: justify;
    font-size: calc(18 * var(--px));
    line-height: calc(24 * var(--px));
    word-spacing: calc(-2 * var(--px));
}

.esg-info .esg-info-content .right {
    flex: 0 1 calc(676 * var(--px));
    max-width: 40%;
}

.esg-info .esg-info-content .right img {
    width: 100%;
    aspect-ratio: 169 / 94;
}

.layer.pv {
    margin-top: var(--top);
    position: relative;
    z-index: 1;
}

.layer.pv>main {
    height: calc(420 * var(--px));
    background: url(/themes/basic/skin/images/esg_bg.jpg) no-repeat;
    background-position: center bottom;
    background-size: cover;
    padding-bottom: 0;
    display: flex;
}

.layer.pv>main>section {
    flex: 1 1 0;
    padding: calc(70 * var(--px));
    overflow: hidden;
    position: relative;
    transition: flex .3s ease;
}

.layer.pv>main>section .icon {
    --height: 78;
    height: calc(var(--height) * var(--px));
    overflow: hidden;
}

.layer.pv>main>section .icon img {
    height: 100%;
    filter: drop-shadow(0 calc(calc(var(--height) + 2) * var(--px)) 0 #fff);
    translate: 0 calc(calc(var(--height) + 2) * var(--px) * -1);
}

.layer.pv>main>section h3 {
    font-weight: bold;
    font-size: calc(36 * var(--px));
    line-height: calc(42 * var(--px));
    color: #fff;
    margin-top: calc(20 * var(--px));
}

.layer.pv>main>section ul {
    height: 0;
    overflow: hidden;
    margin-top: calc(60 * var(--px));
}

.layer.pv>main section.active {
    flex: 3 1 0;
    background-color: rgba(240, 243, 245, .9);
}

.layer.pv>main section.active .icon img {
    translate: 0 0;
}

.layer.pv>main section.active h3 {
    color: #000;
}

.layer.pv>main section.active ul {
    height: auto;
    display: flex;
}

.layer.pv>main section .toggle-button {
    cursor: pointer;
    width: calc(50 * var(--px));
    height: calc(50 * var(--px));
    position: absolute;
    right: calc(20 * var(--px));
    bottom: calc(20 * var(--px));
    transform-origin: center center;
    transition: transform .3s linear;
}

.layer.pv>main section .toggle-button:hover {
    transform: scale(1.1);
}

.layer.pv>main section .line {
    fill: none;
    stroke: #fff;
    stroke-width: 5;
    transition: transform 0.3s;
}

.layer.pv>main section .vertical {
    transform-origin: center;
}

.layer.pv>main section.active .toggle-button.selected .vertical {
    transform: scaleY(0);
}

.layer.pv>main section.active .toggle-button.selected .line {
    stroke: var(--root-color);
}


.layer.pv>main section.active ul li {
    flex: 1 1 0;
    font-size: calc(24 * var(--px));
    color: #666;
}

.layer.pv>main section.active ul li p {
    padding-bottom: calc(26 * var(--px));
}

.layer.pv>main section.active ul li h4 {
    color: var(--root-color);
    font-weight: bold;
    font-size: calc(50 * var(--px));
    word-wrap: normal;
    word-break: normal;
}
.layer.pv>main section.active ul li h4 small {
    font-size: calc(30 * var(--px));
}

.info header {
    max-width: var(--root-max-width);
    margin: auto;
    padding-top: calc(150 * var(--px));
    padding-bottom: calc(40 * var(--px));
}

.info header h3 {
    font-size: calc(48 * var(--px));
    line-height: calc(52 * var(--px));
    font-weight: bold;
}

.info .info-content {
    display: flex;
    flex-direction: column;
    gap: calc(60 * var(--px)) 0;
}

.info .info-content .info-item {
    width: calc(100vw - calc((100vw - var(--root-max-width)) / 2));
    display: flex;
    justify-content: space-between;
    background-color: #f3f6f8;
}

.info .info-content .info-item:nth-of-type(odd) {
    padding-right: calc((100vw - var(--root-max-width)) / 2);
}

.info .info-content .info-item:nth-of-type(even) {
    padding-left: calc((100vw - var(--root-max-width)) / 2);
}

.info .info-content .info-item:nth-of-type(1) {
    margin-left: calc((100vw - var(--root-max-width)) / 2);
}

.info .info-content .info-item .img,
.info .info-content .info-item section {

    flex: 0 1 50%;
}

.info .info-content .info-item .img img {
    width: 100%;
    aspect-ratio: 399 / 250;
    display: block;
}

.info .info-content .info-item section {
    font-size: calc(18 * var(--px));
    line-height: calc(24 * var(--px));
    display: flex;
    align-items: center;
    padding: calc(20 * var(--px)) 0;
}

.info .info-content .info-item section p {
    text-align: justify !important;
}

.info .info-content .info-item:nth-of-type(1) section {
    padding-left: calc(60 * var(--px));
}

.info .info-content .info-item:nth-of-type(2) section {
    padding-right: calc(60 * var(--px));
}

/* 新增 */
.info:nth-of-type(even) .info-content .info-item:nth-of-type(1) {
    margin-left: 0;
    margin-right: calc((100vw - var(--root-max-width)) / 2);
}
.info:nth-of-type(even) .info-content .info-item:nth-of-type(1) {
    padding-right: 0;
    padding-left: calc((100vw - var(--root-max-width)) / 2);
}
.info:nth-of-type(even) .info-content .info-item:nth-of-type(1) section {
    padding-left: 0;
    padding-right: calc(60 * var(--px));
}

.layer.download>main {
    padding-bottom: 0;
}

.layer.download .swiper {
    --top: 120;
    padding-top: calc(var(--top) * var(--px));
    padding-bottom: calc(100 * var(--px));
    margin-top: calc(var(--top) * var(--px) * -1);
}

.layer.download .swiper-slide {
    display: flex;
    background-color: #f3f6f8;
}

.layer.download .swiper-slide .left {
    flex: 0 1 calc(380 * var(--px));
    position: relative;
}

.layer.download .swiper-slide .left .left-content {
    height: 100%;
    background-image: linear-gradient(to right, #ee682d, #eb5a25);
    clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%, 0 0);
    padding-left: calc(55 * var(--px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.layer.download .swiper-slide .left::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 60%;
    clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%, 0 0);
    background-color: #f0c5b7;
    left: calc(30 * var(--px));
    top: 0;
    z-index: -1;
}

.layer.download .swiper-slide .left .content {
    min-height: calc(105 * var(--px));
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(/themes/basic/skin/images/file-icon.png) no-repeat;
    background-position: center center;
    background-size: auto calc(105 * var(--px));
}

.layer.download .swiper-slide .left .content .title {
    color: #fff;
    font-size: calc(32 * var(--px));
    font-weight: bold;
}

.layer.download .swiper-slide .center {
    padding-left: calc(55 * var(--px));
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.layer.download .swiper-slide .center h4 {
    font-size: calc(36 * var(--px));
    font-weight: bold;
    line-height: calc(42 * var(--px));
    margin-bottom: calc(42 * var(--px));
}

.layer.download .swiper-slide .center .link {
    font-size: calc(18 * var(--px));
    color: var(--root-color);
    text-decoration-color: var(--root-color);
}

.layer.download .swiper-slide .center .link img {
    width: calc(21 * var(--px));
}

.layer.download .swiper-slide .right {
    width: calc(190 * var(--px));
    margin-right: calc(110 * var(--px));
}

.layer.download .swiper-slide .right img {
    width: 100%;
    translate: 0 -30%;
}

.layer.download .swiper .swiper-pagination {
    bottom: calc(70 * var(--px));
}

.layer.download .swiper .swiper-pagination .swiper-pagination-bullet {
    width: calc(20* var(--px));
    height: calc(10* var(--px));
    border-radius: 4px;
}

.layer.download .swiper .swiper-pagination .swiper-pagination-bullet-active {
    width: calc(50* var(--px));
    background-color: var(--root-color);
    transition: width .3s linear;
}

@media screen and (max-width: 768px) {
    .esg-info .esg-info-content {
        flex-direction: column;
    }

    .esg-info .esg-info-content .left {
        padding-right: 0;
    }

    .esg-info .esg-info-content .right {
        margin-top: calc(30 * var(--px));
    }

    .layer.pv>main {
        height: calc(360 * var(--px));
    }

    .layer.pv>main>section {
        padding: calc(40 * var(--px));
    }

    .layer.pv>main>section h3 {
        font-size: calc(28 * var(--px));
    }

    .layer.pv>main>section .icon {
        --height: 58;
    }

    .layer.pv>main section.active ul li h4 {
        font-size: calc(40 * var(--px));
    }

    .layer.download .swiper-slide .left {
        flex: 0 1 calc(280 * var(--px));
    }

    .layer.download .swiper-slide .left .left-content {
        padding-left: calc(20 * var(--px));
    }

    .layer.download .swiper-slide .right {
        margin-right: calc(40 * var(--px));
    }

    .layer.download .swiper-slide .right {
        width: calc(135 * var(--px));
    }

    .layer.download .swiper-slide .left .content {
        background-size: auto calc(80 * var(--px));
    }

    .layer.download .swiper-slide .center h4 {
        font-size: calc(30 * var(--px));
        line-height: calc(36 * var(--px));
    }

    .layer.download .swiper-slide .left .content .title {
        font-size: calc(24 * var(--px));
    }
}