@import "common.css";

.green-main-banner .banner-content{
    /*width: max-content;*/
    transform: translate(-50%, -50%);
}
.green-main-banner .banner-content .title-citiTen{
    display: none;
    font-size: 1.16rem;
    line-height: 1.16rem;
    font-family: Arial;
    font-weight: bold;
    color: #FFFFFF;
    opacity: 0.12;
    margin-bottom: -0.4rem;
    letter-spacing: .1rem;
}
.green-main-banner .banner-content h2{
    font-weight: bold;
    font-size: .62rem;
    line-height: .62rem;
    /*text-shadow: 4px 3px 2px rgba(0,20,251,0.57);*/
    text-shadow: .04rem .03rem .02rem rgba(1,25,50,.57);
    background: linear-gradient(0deg, #E6CCFD 0%, #EFF6FE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff;
    margin-bottom: .7rem;
}
.green-main-banner .banner-content h2 strong{
    display: block;
    font-size: 1rem;
    line-height: 1.02rem;
    margin-bottom: .35rem;
}

.green-main-banner .banner-content .banner-btn li{
    /*background: rgba(1,25,50,.5);*/
}
/*.green-main-banner .banner-content .banner-btn li:last-of-type{*/
    /*margin-left: .7rem;*/
/*}*/
.green-main-banner .banner-content .banner-btn a{
    width: 2rem
}


.zero-carbon-supplier, .brand-supplier-btn{
    padding: .54rem 0 .64rem;
    position: relative;
}
.zero-carbon-supplier p{
    margin: .17rem auto .41rem;
    width: 12rem;
}
.brand-supplier-btn{
    margin-bottom: 50px;
    background: url(../images/index/bg-brand-supplier.png) no-repeat;
    background-size: cover;
}


.GSC-map{
    position: relative;
}
.GSC-map a{
    display: block;
    width: 100%;
}
.GSC-map img{
    width: 100%;
}
.GSC-map .green-map-pos{
    width: 100%;
    padding: .26rem 0;
    position: absolute;
    bottom: .4rem;
    text-align: center;
    background: rgba(255,255,255,.6);
}
.GSC-map .green-map-pos h3{
    font-size: .28rem;
    color: #093460;
    font-weight: bold;
}
.GSC-map .green-map-pos h6{
    font-size: .22rem;
    color: #093460;
    margin-top: .1rem;
}

/* swiper */
.swiper-container-mr{
    margin: .5rem auto;
}
.swiper-container {
    padding: 0 .2rem;
    width: calc(100% - .4rem);
    height: 5.44rem;
}
.swiper-container .swiper-slide {
    /*width: 3.64rem!important;*/
    height: 4.98rem;
}
.swiper-container .swiper-slide a{
    display: block;
    height: 100%;
    position: relative;
    border: .02rem solid #DEDEDE;
    border-top: .08rem solid #00E8A3;
}
.swiper-container .swiper-slide a:hover{
    color: #596477;
}
.swiper-container .swiper-slide a .marks{
    position: absolute;
    top: 1rem;
    left: .3rem;
    width: .12rem;
    height: .12rem;
    background: url(../images/index/icon/icon-marks.png) no-repeat;
    background-size: 100%;
}
.swiper-container .swiper-slide .swiper-img{
    max-width: 1.2rem;
    height: 1.2rem;
    margin: .3rem auto 0;
    position: relative;
}
.swiper-container .swiper-slide img{
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.swiper-container .swiper-slide .swiper-content,
.swiper-container .swiper-slide h3, .swiper-container .swiper-slide p,
.swiper-container .swiper-slide p span, .swiper-container .swiper-slide p em{
    font-size: .13rem!important;
    line-height: .24rem;
    color: #596477;
}
.swiper-container .swiper-slide .swiper-content{
    padding: 0 .3rem;
    max-height: 3.52rem;
    overflow-y: auto;
}
.swiper-container .swiper-slide p{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 11;
    -webkit-box-orient: vertical;
}
.swiper-container .swiper-slide ul li{
    list-style: inside;
}
.swiper-container .swiper-slide h3{
    margin-top: .2rem;
}
.swiper-container .swiper-pagination{
    bottom: 0!important;
}
.swiper-container .swiper-pagination-bullet{
    width: .1rem;
    height: .1rem;
    cursor: pointer;
}
.swiper-container .swiper-pagination-bullet-active{
    background: #011932;
}

.swiper-container .swiper-button-next,
.swiper-container .swiper-button-prev{
    width: .4rem;
    height: .4rem;
    background: #FFFFFF;
    box-shadow: 0 .02rem .06rem 0 rgba(204, 204, 204, 0.36);
    border-radius: 50%;
    color: #999;
}
.swiper-container .swiper-button-prev{
    left: 0;
}
.swiper-container .swiper-button-next{
    right: 0;
}
.swiper-container .swiper-button-next:after,
.swiper-container .swiper-button-prev:after{
    font-size: .2rem;
    font-weight: bold;
}
.swiper-container .swiper-button-next.swiper-button-disabled,
.swiper-container .swiper-button-prev.swiper-button-disabled{
    opacity: 1;
    color: #E6E6E6;
}


.green-effect-container{
    padding: .6rem 0;
}
.green-effect-container ul{
    margin-top: .6rem;
    border: .01rem solid #014249;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .35rem 0 .5rem;
}
.green-effect-container li{
    width: 25%;
    border-right: .01rem solid #014249;
}
.green-effect-container li a,
.green-map li a,
.research-brand li a{
    display: block;
    position: relative;
}
.green-effect-container li:last-of-type{
    border-right: none;
}
.green-effect-container li b{
    display: block;
    width: 1.8rem;
    height: .86rem;
    margin: 0 auto;
}
.green-effect-container li:nth-of-type(1) b{
    width: 1.85rem;
    background: url("../images/index/icon/icon-yx1.png") no-repeat;
    background-size: 100%;
}
.green-effect-container li:nth-of-type(2) b{
    background: url("../images/index/icon/icon-yx2.png") no-repeat;
    background-size: 100%;
}
.green-effect-container li:nth-of-type(3) b{
    background: url("../images/index/icon/icon-yx3.png") no-repeat;
    background-size: 100%;
}
.green-effect-container li:nth-of-type(4) b{
    background: url("../images/index/icon/icon-yx4.png") no-repeat;
    background-size: 100%;
}
.green-effect-container li:nth-of-type(5) b{
    background: url("../images/index/icon/icon-yx5.png") no-repeat;
    background-size: 100%;
}
.green-effect-container li:nth-of-type(6) b{
    background: url("../images/index/icon/icon-yx6.png") no-repeat;
    background-size: 100%;
}
.green-effect-container li:nth-of-type(7) b{
    background: url("../images/index/icon/icon-yx7.png") no-repeat;
    background-size: 100%;
}
.green-effect-container li span{
    display: block;
    font-size: .36rem;
    line-height: .7rem;
    color: #00e8a3;
}
.green-effect-container li h6,.green-map li h6{
    font-size: .16rem;
    line-height: .26rem;
    color: #fff;
}
.green-effect-container li h6{
    font-size: .18rem;
    line-height: .18rem;
}
.green-map li h6{
    /*min-height: .52rem;*/
}

.green-map{}
.green-map ol{
    padding: 0 0 .25rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.green-map li{
    float: left;
    margin-right: .2rem;
    margin-bottom: .2rem;
    position: relative;
    width: 4.35rem;
}
.green-map li img{
    width: 100%;
    height: 100%;
}

.green-map li:nth-child(3n),
.green-map li:last-of-type{
    margin-right: 0;
}
.green-map li:last-of-type{
    margin-bottom: 0;
}
.green-map li:nth-of-type(1),
.green-map li:nth-of-type(6){
    width: 7.44rem;
}

.green-map li a{
    height: 3.42rem;
}
.green-map li .green-map-pos{
    position: absolute;
    bottom: 0;
    padding-left: .40rem;
    padding-bottom: .34rem;
}
.green-map li h3{
    font-size: .3rem;
    line-height: .63rem;
    color: #fff;
    font-weight: bold;
}
.green-map .tag{
    font-size: .3rem;
    color: #FFFFFF;
    line-height: .66rem;
    background: rgba(1,25,50,.6);
    position: absolute;
    top: .2rem;
    left: 0;
    padding: 0 .2rem;
    text-align: center;
}


.research-brand-container .research-brand{
    text-align: center;
}
.story li h4{
    min-height: .5rem;
}
.story li p{
    min-height: .72rem;
}

.brand-container li{
    width: calc(25% - .26rem);
    height: 4.3rem;
    border: .01rem solid #e6e7e9;
    margin-left: .3rem;
}
.brand-container li:first-of-type{
    margin-left: 0;
}
.brand-container li img{
    width: 100%;
    max-height: 1.83rem;
    object-fit: cover;
}
.brand-container li h4,
.brand-container li p{
    padding: 0 .2rem;
}
.brand-container li h4{
    margin: .22rem 0 .24rem;
}
.brand-container li span{
    color: #596477;
    display: block;
    padding: .22rem .2rem .4rem;
    text-align: left;
    font-size: .14rem;
    line-height: .14rem;
}
.brand-container li .type{
    color: #011932;
    background: #00e8a3;
    font-size: .15rem;
    line-height: .36rem;
    position: absolute;
    top: 0;
    left: .13rem;
    padding: 0 .09rem;
    font-weight: normal;
}

.monthly-report-btn{
    padding-top: .2rem;
    padding-bottom: .5rem;
}
.research-brand-container .problem-download-btn{
    padding: .4rem .3rem;
    border: 1px solid #E6E7E9;
}
.problem-download-btn a{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .22rem;
    width: 3.4rem;
    line-height: .8rem;
    border-radius: .04rem;
    background: #011932;
    color: #fff;
}
.problem-download-btn b{
    display: block;
    width: .28rem;
    height: .31rem;
    margin-right: .2rem;
}
.problem-download-btn a:first-of-type{
    margin-bottom: .3rem;
}
.problem-download-btn a:first-of-type b{
    background: url("../images/icon-small-FAQ.png") no-repeat;
}
.problem-download-btn a:last-of-type b{
    background: url("../images/icon-small-download.png") no-repeat;
}
.problem-download-btn a:hover{
    color: #011932;
    background: #00e8a3;
}
.problem-download-btn a:first-of-type:hover b{
    background: url(../images/icon-blue-FAQ.png) no-repeat;
    background-size: 100%;
}
.problem-download-btn a:last-of-type:hover b{
    background: url(../images/icon-blue-download.png) no-repeat;
    background-size: 100%;
}

.monthly-report-container{
    padding: 26px 24px 27px 30px;
    border: 1px solid #E6E7E9;
}
.monthly-report-container .img{
    width: 161px;
    height: 217px;
    margin-right: 40px;
}
.monthly-report-container img{
    /*max-width: 161px;*/
    width: 100%;
    max-height: 217px;
    border-radius: 6px;
}
.monthly-report-container h3{
    padding: 0 0 13px 0;
}
.monthly-report-container p{
    font-size: 18px;
    color: #8E9386;
}
.monthly-report-container .more-see-btn{
    margin: 25px 0 30px;
}
.monthly-report-container input::-webkit-input-placeholder {  	/* WebKit browsers */
    color: #c7c7c7;
}
.monthly-report-container input:-moz-placeholder {            	/* Mozilla Firefox 4 to 18 */
    color: #c7c7c7;
}
.monthly-report-container input::-moz-placeholder {           	/* Mozilla Firefox 19+ */
    color: #c7c7c7;
}
.monthly-report-container input:-ms-input-placeholder {       	/* Internet Explorer 10+ */
    color: #c7c7c7;
}
.monthly-report-container input[type=text]{
    font-size: 18px;
    color: #011932;
    border:1px solid #d5d5d5;
    border-right: none;
    line-height: 18px;
    padding: 0 16px;
    width: 377px;
    height: 52px;
}
.monthly-report-container input[type=button]{
    font-size: 18px;
    color: #011932;
    line-height: 54px;
    background: #00e8a3;
    padding: 0 27px;
    cursor: pointer;
}
.email-pos{
    position: relative;
}
.email-pos .tips{
    position: absolute;
    bottom: -26px;
    text-align: center;
    padding: 2px 16px;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
    display: none;
}
.email-pos .error{
    background-color: #c83000;
}
.email-pos .success{
    background-color: #00e8a3;
}

/* 项目合作伙伴 */
.page-of-partner{
    margin-bottom: .01rem;
}
.page-of-partner .swiper{
    padding-bottom: .38rem;
}
.page-of-partner .partner-body{
    /*display: flex;*/
    /*justify-content: center;*/
}
.page-of-partner .partner-body .swiper-slide{
    /*width: calc(20% - .26rem);*/
    height: 1.81rem;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    /*margin-right: 27px!important;*/
}
.page-of-partner .partner-body .swiper-slide:first-of-type{
    /*margin-left: 0;*/
}
.page-of-partner .partner-body .swiper-slide a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 0.02rem);
    height: calc(100% - 0.02rem);
    border: .01rem solid #e5e5e5;
    border-radius: .03rem;
    text-align: center;
    transition: 0.3s;
    overflow: hidden;
}
.page-of-partner .partner-body .swiper-slide a span{
    float: none;
    display: block;
    vertical-align: middle;
    width: 80%;
}
.page-of-partner .partner-body .swiper-slide img{
    max-width: 66%!important;
    max-height: 66%!important;
}
.page-of-partner .partner-body .partner-info{
    width: 100%;
    height: 0.53rem;
    line-height: 0.53rem;
    color: #fff;
    background: #011932;
    transition: 0.3s;
    text-align: center;
    font-size: 0.14rem;
    position: absolute;
    left: 0;
    bottom: -0.53rem;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.page-of-partner .partner-body .partner-info h1{
    font-size: 0.14rem;
    color: #fff;
    line-height: normal;
}
.page-of-partner .partner-body .partner-info a{
    font-size: .12rem;
    color: #87c4ff;
    margin-top: 0.02rem;
    display: block;
    border: none;
}

.page-of-partner .swiper-pagination{
    bottom: 0;
}
.page-of-partner .swiper-pagination-bullet-active{
    background: #011932;
}

.page-of-partner .partner-body .swiper-slide:hover a{
    /*height: .87rem;*/
}
.page-of-partner .partner-body .swiper-slide:hover .partner-info{
    bottom: 0;
}
.page-of-partner .partner-body .swiper-slide:hover .partner-info a{
    height: auto;
    color: #87c4ff;
}