.esg-index .banner-title { padding-top: 3.2rem; background-size: 100% auto; background-repeat: no-repeat; } .esg-index .banner-title .wrapper { padding: 0.5rem 0.6rem 0.67rem; background: #f6faff; border-radius: 8px; box-shadow: 0px 20px 45px 2px rgba(222, 233, 248, 0.8); } .esg-index .banner-title .wrapper .title { font-size: 0.36rem; font-weight: 700; text-align: left; color: #000000; line-height: 0.42rem; } .esg-index .banner-title .wrapper .des { margin-top: 0.3rem; font-size: 0.2rem; min-height: 1.5rem; text-align: LEFT; color: #333333; line-height: 0.39rem; max-height: 1.95rem; overflow: auto; } .esg-index .page-title { margin-top: 0.72rem; margin-bottom: 0.54rem; font-size: 0.36rem; font-weight: 700; text-align: center; color: #333333; line-height: 0.42rem; position: relative; } .esg-index .esg-content { display: flex; height: 6.53rem; margin-bottom: 0.8rem; } .esg-index .esg-content .left { width: 9.62rem; height: 100%; } .esg-index .esg-content .left .swiper-container { width: 100%; height: 100%; margin: 0 auto; position: relative; } .esg-index .esg-content .left .swiper-container .swiper-slide img { width: 100%; height: 100%; object-fit: cover; } .esg-index .esg-content .left .swiper-container .swiper-button-prev::after, .esg-index .esg-content .left .swiper-container .swiper-button-next::after { font-size: 0.3rem; color: #fff; } .esg-index .esg-content .left .swiper-container .swiper-button-prev { left: 0.2rem; } .esg-index .esg-content .left .swiper-container .swiper-button-next { right: 0.2rem; } .esg-index .esg-content .right { width: calc(100% - 9.62rem); height: 100%; background-color: #fff; padding: 0.5rem 0.68rem 0; } .esg-index .esg-content .right .title { font-size: 0.2rem; font-weight: 700; color: #51575c; line-height: 0.4rem; text-align: left; } .esg-index .esg-content .right form { margin-top: 0.15rem; } .esg-index .esg-content .right form .form p { width: 100%; height: 0.36rem; border: 1px solid #d1d1d1; border-radius: 2px; display: flex; margin-bottom: 0.12rem; align-items: center; padding: 0 0.15rem 0 0.2rem; } .esg-index .esg-content .right form .form p.desc { height: 1rem; align-items: start; line-height: 0.36rem; } .esg-index .esg-content .right form .form p span { font-size: 0.16rem; font-weight: 350; color: #51575c; } .esg-index .esg-content .right form .form p span.label { line-height: 0.36rem; position: relative; } .esg-index .esg-content .right form .form p input, .esg-index .esg-content .right form .form p textarea { height: 100%; flex: 1; border: none; outline: none; font-size: 0.16rem; } .esg-index .esg-content .right form .form p textarea { height: calc(100% - 0.2rem); margin: 0.1rem 0; resize: none; } .esg-index .esg-content .right form .form .code-box { display: flex; } .esg-index .esg-content .right form .form .code-box p { flex: 1; margin-right: 0.1rem; } .esg-index .esg-content .right .submit_div { display: flex; justify-content: flex-end; position: relative; } .esg-index .esg-content .right .submit_div .submit { display: inline-block; padding: 0 0.2rem; height: 0.44rem; line-height: 0.44rem; font-size: 0.16rem; color: #e60000; border: 1px solid #e60000; border-radius: 4px; box-shadow: 0px 20px 45px 2px rgba(222, 233, 248, 0.8); } .esg-index .esg-content .right .submit_div .alert-box { position: absolute; right: 1.5rem; line-height: 0.44rem; } .esg-index .esg-honor { display: flex; justify-content: space-between; padding: 0 0.35rem; } .esg-index .esg-honor li { flex-shrink: 0; width: 7rem; height: 2.6rem; background: #f6faff; border-radius: 0.04rem; box-shadow: 0 0.2rem 0.45rem 0.02rem rgba(222, 233, 248, 0.8); padding: 0.43rem 0.82rem 0.66rem 1.15rem; display: flex; justify-content: space-between; } .esg-index .esg-honor li .left { width: 1.92rem; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .esg-index .esg-honor li .left .top { width: 100%; text-align: center; } .esg-index .esg-honor li .left .top span { font-size: 0.9rem; font-weight: 700; color: #333333; line-height: 1.05rem; } .esg-index .esg-honor li .left .top span.remark { font-size: 0.32rem; line-height: 0.38rem; } .esg-index .esg-honor li .left .bottom { font-size: 0.16rem; text-align: center; color: #51575c; line-height: 0.19rem; } .esg-index .esg-honor li .right { width: 1.7rem; padding-top: 0.45rem; text-align: center; } .esg-index .esg-honor li .right img { height: 0.4rem; } .esg-index .esg-honor li .right .bottom { margin-top: 0.15rem; font-size: 0.14rem; text-align: center; color: #51575c; line-height: 0.16rem; } .esg-index .inclusion { display: flex; align-items: center; margin-top: 0.4rem; padding: 0 0.35rem; } .esg-index .inclusion .title { font-size: 0.24rem; font-weight: 700; color: #51575c; line-height: 0.28rem; margin-right: 0.3rem; } .esg-index .inclusion .item { margin-right: 0.2rem; display: flex; align-items: center; } .esg-index .inclusion .item img { width: 0.24rem; margin-right: 0.1rem; } .esg-index .inclusion .item span { font-size: 0.2rem; color: #51575c; line-height: 0.23rem; } .esg-index .esg-prize { display: flex; gap: 0.2rem; flex-wrap: wrap; justify-content: center; } .esg-index .esg-prize li { width: 4.933333rem; background: #f6faff; box-shadow: 0px 20px 45px 2px rgba(222, 233, 248, 0.8); padding: 0 0.38rem; } .esg-index .esg-prize li .top { width: 100%; height: 0.86rem; border-bottom: 1px solid rgba(0, 0, 0, 0.05); display: flex; align-items: center; justify-content: center; } .esg-index .esg-prize li .top img { max-height: 0.63rem; } .esg-index .esg-prize li .bottom { width: 100%; height: 1.14rem; position: relative; display: flex; align-items: center; } .esg-index .esg-prize li .bottom .title { width: 100%; height: auto; font-size: 0.14rem; color: #333333; line-height: 0.25rem; text-align: center; } .esg-index .esg-prize li:nth-of-type(3) .bottom, .esg-index .esg-prize li:nth-of-type(3) .title { line-height: 0.18rem; } .footer { margin-top: 0.78rem; } .esg-index .download ul { display: flex; flex-wrap: wrap; gap: 0.3rem 0.35rem; justify-content: center; } .esg-index .download ul li { width: 3.52rem; height: 1.4rem; padding: 0.3rem 0.26rem; position: relative; cursor: pointer; box-shadow: 0px 20px 45px 2px rgba(222, 233, 248, 0.8); background: #f6faff; } .esg-index .download ul li:hover { background: radial-gradient(#28597a, #051c36); } .esg-index .download ul li:hover p, .esg-index .download ul li:hover a { color: #fff; } .esg-index .download ul li P { font-size: 0.2rem; color: #333; line-height: 0.4rem; text-align: center; position: absolute; width: 3rem; top: 50%; transform: translateY(-50%); } .esg-index .download ul li P a { color: #333; } .esg-index .download ul li P i { font-size: 0.35rem; } .esg-index .download ul li P span { position: relative; bottom: 0.03rem; } @media screen and (max-width: 750px) { .esg-index .nav { padding-left: 0.34rem !important; } .esg-index .nav .dreamer-location { margin-top: 0.14rem; } .esg-index .nav .dreamer-location li a { font-size: 0.28rem; line-height: 0.48rem; } .esg-index .page-title { font-size: 0.4rem; line-height: 0.6rem; padding: 0 0.2rem; } .esg-index .esg-content { display: block; height: initial; margin-bottom: 0; } .esg-index .esg-content .left { width: 100%; height: 5.1rem; } .esg-index .esg-content .right { width: 100%; height: initial; padding: 0.4rem 0.3rem; } .esg-index .esg-content .right .title { font-size: 0.32rem; line-height: 0.5rem; } .esg-index .esg-content .right form .form p { height: 0.8rem; } .esg-index .esg-content .right form .form p span { font-size: 0.28rem; line-height: 0.8rem; } .esg-index .esg-content .right form .form p span.code.label { width: 1.12rem; white-space: nowrap; } .esg-index .esg-content .right form .form p input { font-size: 0.28rem; } .esg-index .esg-content .right form .form p textarea { font-size: 0.28rem; line-height: 0.5rem; } .esg-index .esg-content .right form .form p.desc { height: 1.5rem; padding-right: 1.25rem; } .esg-index .esg-content .right form .form p.desc span.label { line-height: 0.8rem; } .esg-index .esg-content .right form .form p.desc span.val-size { line-height: 0.5rem !important; font-size: 0.28rem !important; } .esg-index .esg-content .right form .form .code-box p { flex: initial; width: 5.1rem; margin-right: 0.1rem; } .esg-index .esg-content .right form .form .code-box #v_container-box, .esg-index .esg-content .right form .form .code-box canvas { height: 0.8rem !important; width: 1.6rem !important; } .esg-index .esg-content .right .submit_div .submit { height: 0.6rem; line-height: 0.6rem; font-size: 0.3rem; } .esg-index .esg-content .right .submit_div .alert-box { right: 2.2rem; font-size: 0.28rem; line-height: 0.6rem; } .esg-index .esg-honor { flex-direction: column; gap: 0.2rem; } .esg-index .esg-honor li { align-items: center; padding: 0.4rem 0.3rem; } .esg-index .esg-honor li .left { width: 3.4rem; height: initial; } .esg-index .esg-honor li .left .bottom { margin-top: 0.2rem; font-size: 0.28rem; } .esg-index .esg-honor li .right { width: initial; padding-top: 0; } .esg-index .esg-honor li .right img { height: 0.6rem; } .esg-index .esg-honor li .right .bottom { font-size: 0.22rem; } .esg-index .esg-prize { padding: 0 0.3rem; gap: 0.3rem; } .esg-index .esg-prize li { width: 100%; padding: 0 0.3rem; } .esg-index .esg-prize li .top { height: 1rem; } .esg-index .esg-prize li .top img { max-height: 0.8rem; } .esg-index .esg-prize li .bottom { height: initial; padding: 0.3rem 0; } .esg-index .esg-prize li .bottom .title { font-size: 0.28rem; line-height: 0.5rem; } .esg-index .mp-see-more { margin-top: 0.2rem; text-align: center; } .esg-index .mp-see-more span { font-size: 0.4rem; color: #222; display: inline-block; transition: all 0.3s; } .esg-index .mp-see-more span.active { transform: rotate(180deg); } .esg-index .download ul { width: 7.3rem; margin: 0 auto; } .esg-index .download ul li { width: 100%; } .esg-index .download ul li p { width: auto; display: inline-block; left: 50%; transform: translateX(-50%) translateY(-50%); } .esg-index .download ul li p span { font-size: 0.3rem; } .esg-index .download ul li p i { font-size: 0.4rem; } }