@import "common.css";

#container{
    color: #272f20;
}
.banner{
    width: 100%;
    height: 4.25rem;
    position: relative;
    display: block;
}
.banner img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner .banner-title{
    width: calc(100% - 1.22rem);
    font-size: .34rem;
    color: #fff;
    line-height: 1.18rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    font-weight: bold;
    padding-left: 1.22rem;
}
.green-supply-why{
    padding: .22rem 1.12rem .1rem;
    background: #03b675;
    color: #fff;
    text-align: center;
}
.green-supply-why h2{
    font-size: .38rem;
    line-height: .99rem;
    font-weight: bold;
}
.green-supply-why p{
    line-height: .35rem;
    font-size: .19rem;
    margin-bottom: .3rem;
}
.green-brand-why{
    background: #1373d2;
}


/* 公共样式正文 */
.green-supply-container{}
.green-supply-common{
    padding-top: .5rem;
}
.green-supply-common .green-common-title,
.green-supply-common .green-common-title-blue{
    color: #03b675;
    font-size: .24rem;
    display: flex;
    align-items: center;
    border-bottom: .02rem solid #03b675;
    font-weight: bold;
}
.green-supply-common .green-common-title-blue{
    color: #1373D2;
    border-bottom: .02rem solid #1373D2;
}
.green-common-title b,
.green-common-title-blue b{
    display: block;
    width: .58rem;
    height: .58rem;
    background: url(../images/pages/icon/icon-title.png) no-repeat;
    background-size: 100%;
    margin-right: .2rem;
}
.green-common-title-blue b{
    background: url(../images/pages/icon/icon-title-blue.png) no-repeat;
    background-size: 100%;
}


.green-common-content{
    padding: .12rem 0 0 .8rem;
}
.green-common-content .common-introduce{
    line-height: .3rem;
    font-size: .16rem;
    margin-bottom: .3rem;
	font-weight: normal;
}
.green-common-content .green-rectify-btn, .PRTR-cell .btn a{
    display: block;
    color: #011932;
    font-size: .18rem;
    line-height: .4rem;
    border: .02rem solid #011932;
    width: 2rem;
    text-align: center;
}
.green-common-content .green-rectify-btn:hover, .PRTR-cell .btn a:hover{
    color: #fff;
    background: #011932;
}

/* 我是品牌 */
.GSC-brandBox{}

/* 供应商方法 */
.green-method{
    width: calc(50% - 0.42rem);
    border: .01rem dashed #011932;
}
.green-method img{
    width: 100%;
    height: 4.02rem;
    object-fit: cover;
	cursor: pointer;
}
.green-method .method-content{
    background: #f7f7f7;
    padding: .15rem .32rem .15rem .23rem;
}
.green-method .method-content span{
    font-size: .16rem;
    line-height: .24rem;
    color: #011932;
}
.green-method .method-content span b{
    font-weight: bold;
    font-size: .14rem;
}
.green-method .method-content span:last-of-type{
    font-size: .14rem;
    width: 100%;
    text-align: justify;
}

/* 履行环境责任 */
.duty-introduce{
    width: calc(50% - 1.18rem);
    background: #f0f2f6;
    padding: .2rem .51rem .2rem .27rem;
}
.duty-introduce p{
    font-size: .16rem;
    line-height: .3rem;
    margin-bottom: .2rem;
}
.duty-introduce p a{
    display: inline-block;
    line-height: .3rem;
}
.duty-introduce p a:hover{
	color: #03b675;
}

.PRTR-cell{}
.box-glossary{
    margin-top: .3rem;
}
.box-glossary p {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.box-glossary p strong{
    display: block;
    font-size: .18rem;
    line-height: .52rem;
    border-radius: .04rem;
    padding: 0 .35rem;
    margin: 0 auto;
    color: #0CB57B;
    background: #DDF8E5;
}
.box-glossary ol{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    top: .68rem;
}
.box-glossary li{
    width: 1.44rem;
    height: .76rem;
    font-size: .18rem;
    color: #666;
    line-height: .26rem;
    border-radius: .04rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    background: #DDF8E5;
    border: .01rem solid #C8F1DE;
}
.box-glossary li br{
    margin: 0;
}

.box-glossary p:before,
.box-glossary ol:before,
.box-glossary li:before{
    content: '';
    width: .02rem;
    height: .02rem;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

.box-glossary p:before{
    height: .27rem;
    bottom: -.27rem;
}
.box-glossary ol:before{
    width: calc(100% - 1.44rem);
    top: -.41rem;
}
.box-glossary li:before{
    height: .39rem;
    top: -.40rem;
}

.box-glossary p:before,
.box-glossary ol:before,
.box-glossary li:before{
    background: #C8F1DE;
}

.PRTR-cell .btn{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 1rem;
}
.PRTR-cell .btn a{
    width: 36%;
    padding: 0 .1rem;
}


/* 暂时去掉-start */
.PRTR-cell .cellBox{
    height: 2.48rem;
    position: relative;
}
.PRTR-cell ul li{
    width: calc(50% - .96rem);
    height: .64rem;
    float: left;
    font-size: .18rem;
    line-height: .30rem;
}
.PRTR-cell ul li a:hover{
    color: #fff;
}
.PRTR-cell ul li a{
    display: block;
    height: 100%;
    color: #fff;
}
.PRTR-cell ul li span{
    display: block;
    font-size: .18rem;
    line-height: .30rem;
}
.PRTR-cell ul li:nth-child(odd){
    padding: .3rem .66rem .3rem .3rem;
    text-align: left;
}
.PRTR-cell ul li:nth-child(even){
    padding: .3rem .3rem .3rem .66rem;
    text-align: right;
}
.PRTR-cell ul li:nth-child(1),
.PRTR-cell ul li:nth-child(4){
    background: #077f7d;
}
.PRTR-cell ul li:nth-child(1):hover,
.PRTR-cell ul li:nth-child(4):hover{
    /*background: #03b675;*/
    color: #fff;
}

.PRTR-cell ul li:nth-child(2),
.PRTR-cell ul li:nth-child(3){
    background: #03b675;
}
.PRTR-cell ul li:nth-child(2):hover,
.PRTR-cell ul li:nth-child(3):hover{
    /*background: #077f7d;*/
    color: #fff;
}

.PRTR-cell ul li:nth-child(3){
    line-height: .64rem;
}
.PRTR-cell .PRTR{
    width: 1.26rem;
    height: 1.26rem;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: .03rem solid #03b375;
    border-radius: 50%;
    display: flex;
    align-items: center;
}
.PRTR-cell .PRTR .cn{
    font-size: .2rem;
    line-height: .3rem;
    color: #077f7d;
    text-align: center;
}
.PRTR-cell .PRTR:hover{
    color: #077f7d;
}
/* 暂时去掉-end */


/* 三角 */
.management-tool-container{
    padding: .3rem 0 .6rem;
}
.management-tool-container .management-tool{
    width: 80%;
    height: .23rem;
    background: #1373d2;
    position: relative;
    margin: 0 auto;
}
.management-tool:before,
.management-tool:after{
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-right: .23rem solid #1373d2;
    border-bottom: .23rem solid transparent;
    border-top: .23rem solid transparent;
    position: absolute;
    left: -0.23rem;
    top: 50%;
    transform: translate(0, -50%);
}

.management-tool:after{
    left: initial;
    right: -0.23rem;
    border-left: .23rem solid #1373d2;
    border-right: none;
}
.management-tool ol{
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    top: -0.33rem;
}
.management-tool ol li{
    text-align: center;
}
.management-tool ol li img{
    width: .78rem;
    height: .78rem;
}
.management-tool ol li span{
    font-size: .18rem;
    display: block;
    margin-top: .17rem;
}

.promote-content{
    padding: .26rem 0;
    background: #03b675;
    /*margin: 0 -0.50rem 0 -1.30rem;*/
    border-bottom: .01rem solid #028e5c;
}
.promote-content p{
    font-size: .24rem;
    color: #fff;
    line-height: .49rem;
    text-align: center;
	font-weight: bold;
}


/* swiper */
.swiper-container-mr{
    position: relative;
    overflow: hidden;
}
.swiper-container {
    width: 100%;
    height: 2.4rem;
}
.swiper-slide{}
.swiper-slide a{
	display: flex;
    justify-content: space-between;
    align-items: center;
	height: 100%;
}
.swiper-slide img{
    margin: 0 auto;
	width: 1.5rem;
}
.swiper-slide .swiper-content{
    width: calc(55% - .4rem);
    text-align: left;
    margin-right: .65rem;
}
.swiper-slide h3,.swiper-slide a{
    font-size: .22rem;
    color: #333;
    font-weight: bold;
    line-height: .6rem;
}
.swiper-slide p{
    font-size: .16rem;
    color: #333;
    line-height: .3rem;
	font-weight: normal;
}
.swiper-button-next:after, .swiper-button-prev:after{
    color: #999;
    font-size: .3rem;
    background: #fff;
}

/* citi指数 */
.citi-index-bg{
    background: #fff;
    padding: .3rem 0;
}
.citi-index{
    padding: .45rem .5rem;
    background: #f0f2f6;
	display: flex;
	align-items: center;
    justify-content: space-between;
}
.citi-index .citi-index-content{
    width: 60%;
}
.citi-index-content h3{
    font-size: .24rem;
    font-weight: bold;
}
.citi-index-content p{
    font-size: .16rem;
    line-height: .3rem;
    margin-top: .3rem;
    text-align: justify;
}
.citi-index-content .citi-index-btn{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: .43rem;
}
.citi-index-content .citi-index-btn a{
    display: block;
    width: 2.16rem;
    line-height: .4rem;
    border: .02rem solid #011932;
    color: #011932;
    font-size: .21rem;
    text-align: center;
    margin-right: .3rem;
}
.citi-index-content .citi-index-btn a:last-of-type{
    margin-right: 0;
}
.citi-index-content .citi-index-btn a:hover{
    color: #fff;
    background: #011932;
}

.citi-index-img{
    width: 35%;
}
.citi-index-img img{
    width: 100%;
}

.citi-index-cyclic{
    width: 291px;
    height: 296px;
    background: url(../images/border-circle.png) no-repeat;
    background-size: 100%;
    position: relative;
}
.citi-index-cyclic li{
    width: 82px;
    height: 82px;
    font-size: 17px;
    color: #fff;
    line-height: 23px;
    position: absolute;
    border-radius: 50%;
}
.citi-index-cyclic li span{
    display: block;
    line-height: 23px;
    text-align: center;
}
.citi-index-cyclic li span:first-of-type{
    padding-top: 18px;
}

.citi-index-cyclic li:nth-of-type(1){
    width: 120px;
    height: 120px;
    color: #1574d2;
    font-size: 19px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 20px rgba(21, 116, 210, .3);
}
.citi-index-cyclic li:nth-of-type(1) span:first-of-type{
    padding-top: 36px;
}

.citi-index-cyclic li:nth-of-type(2){
    background: #5daade;
    border: 9px solid #d3e4f1;
    left: 50%;
    top: -42px;
    margin-left: -50px;
}
.citi-index-cyclic li:nth-of-type(3){
    background: #f26465;
    border: 9px solid #f0d6d9;
    top: 76px;
    left: -42px;
}
.citi-index-cyclic li:nth-of-type(4){
    background: #faa618;
    border: 9px solid #f2e3ca;
    top: 76px;
    right: -42px;
}
.citi-index-cyclic li:nth-of-type(5){
    background: #62c081;
    border: 9px solid #d4e8df;
    bottom: -21px;
    left: 10px;
}
.citi-index-cyclic li:nth-of-type(6){
    background: #44c1c0;
    border: 9px solid #cee8eb;
    bottom: -21px;
    right: 10px;
}

/* cati指数 */
.cati-index .citi-index-content{}
.cati-index-cyclic{
    width: 35%;
    display: flex;
    justify-content: center;
    /*margin-right: .3rem;*/
}
.cati-index-cyclic img{
    width: 60%;
}

.realize-green-why{
    line-height: .8rem;
    background: #1373d2;
    font-size: .24rem;
    color: #fff;
    text-align: center;
}
.brand-promote-content{
    background: #1373d2;
    border-bottom: .01rem solid #0f5aa4;
}

.brand-story ul{
    height: 100%;
}
.brand-story ul li{
    background: #f7f7f7;
    margin-bottom: .2rem;
    display: flex;
    /*justify-content: center;*/
    height: calc(33.3% - .133rem);
}
.brand-story ul li:last-of-type{
    margin-bottom: 0;
}
.brand-story ul li a{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}
.brand-story ul li .cover{
	width: 2.26rem;
	height: 1.35rem;
	position: relative;
}
.brand-story ul li img{
    width: 100%;
    height: 100%;
    object-fit: cover;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
}
.brand-story ul li h4{
    width: calc(100% - 2.7rem);
    color: #272f20;
    font-size: .23rem;
    line-height: .4rem;
    padding: 0 .22rem;
    font-weight: bold;
}
.brand-story-more{
    font-size: .2rem;
    line-height: .3rem;
    color: #03b675;
    font-style: italic;
	margin: .2rem 0 .39rem;
	display: block;
}

.brand-story-map img{
    width: 100%;
    height: 3rem;
    object-fit: cover;
}

.brand-story-map .map{
    padding: .16rem .33rem;
    background: #f7f7f7;
}
.brand-story-map h4{
    color: #272f20;
    font-size: .25rem;
    line-height: .4rem;
    margin-bottom: .13rem;
    font-weight: bold;
}
.brand-story-map p{
    color: #272f20;
    font-size: .16rem;
    line-height: .3rem;
	font-weight: normal;
}

/* 绿色生态链 */
.banner .banner-title-chain{
    line-height: normal;
    padding-bottom: .44rem;
    background: transparent;
}
.banner .banner-title-chain h2{
    font-size: .36rem;
    line-height: .36rem;
    margin-bottom: .18rem;
}
.banner .banner-title-chain p{
    font-size: .22rem;
    line-height: .22rem;
}
.green-chain-introduce{
    margin-top: .1rem;
    padding: .53rem 0 .14rem 0;
}
.green-chain-introduce a{
    display: inline-block;
    font-size: .18rem;
    line-height: .36rem;
    color: #62a000;
}
.green-chain-introduce p{
    color:rgba(51,51,51,1);
    font-size: .2rem;
    line-height: .36rem;
    margin-bottom: .3rem;
    text-align: justify;
}
.green-chain-introduce p a{
    font-size: .2rem;
}
.green-chain-introduce p:last-of-type{
    margin-bottom: 0;
}


.enterprise-stepsBox{
    display: flex;
    justify-content: space-between;
}
.enterprise-steps{
    width: calc(50% - .4rem);
    margin-top: .4rem;
    border-left: .01rem solid #e5e5e5;
    border-right: .01rem solid #e5e5e5;
    border-bottom: .01rem solid #e5e5e5;
    background: #f8fbfe;
}
.enterprise-steps h2{
    font-size: .26rem;
    line-height: .68rem;
    color: #fff;
    background: #1373D2;
    text-align: center;
    margin: 0 -0.01rem;
}
.enterprise-steps .steps{
    padding: .4rem .3rem .24rem;
    /*min-height: 7.4rem;*/
}
.enterprise-steps .steps li{
    margin-bottom: .3rem;
}
.enterprise-steps .steps li b{
    width: .21rem;
    height: .19rem;
    background: url(../images/pages/icon/icon-chain-arrow.png) no-repeat;
    background-size: 100%;
    margin-right: .19rem;
    margin-top: .09rem;
}
.enterprise-steps .steps li a{
    display: inline;
    color: #62a000;
    font-size: .18rem;
}
.enterprise-steps .steps li p{
    font-size: .18rem;
    color: rgba(39,47,32,1);
    line-height: .38rem;
    width: calc(100% - .4rem);
    text-align: justify;
}
.enterprise-steps .steps li .list{
    display: block;
    padding: .05rem .22rem 0;
}
.enterprise-steps .steps li .list em{
    display: block;
    font-size: .18rem;
    color: rgba(39,47,32,1);
    line-height: .4rem;
    font-style: normal;
}
.enterprise-steps .steps li .list em:before{
    content: '●';
    font-size: .12rem;
    color:rgba(39,47,32,1);
    margin-right: .05rem;
}

.chain-benefit{
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin: .3rem 0;
}
.chain-benefit li{
    /*width: 2.88rem;*/
    width: calc(28% - .42rem);
    padding: .4rem .21rem;
    background: #1373D2;
    color: #fff;
    text-align: center;
}
.chain-benefit li h3{
    font-size: .26rem;
    font-weight: 500;
    margin: .05rem 0 .18rem;
}
.chain-benefit li p{
    font-size: .16rem;
    line-height: .26rem;
    width: 80%;
    margin: 0 auto;
}
.chain-chart{
    width: 70%;
    margin: .5rem auto;
    display: block;
}

.padding-normal{
    padding-top: 0;
}
.green-chain-start{
    width: 10.6rem;
    margin: 0 auto;
    text-align: center;
}
.green-chain-start p{
    font-size: .26rem;
    font-weight: 500;
    color: rgba(39,47,32,1);
    line-height: .4rem;
}
.green-chain-start .start{
    display: block;
    width: 4.06rem;
    font-size: .22rem;
    line-height: .62rem;
    color:rgba(255,255,255,1);
    background:rgba(1,25,50,1);
    margin: .3rem auto;
}
.green-chain-start .start:hover{
    color:rgba(255,255,255,1);
}

.brand-logo-list{
    margin-bottom: .3rem;
    display: flex;
    flex-flow: row wrap;
}
.brand-logo-list li{
    width: calc(10% - 0.04rem);
    height: .84rem;
    border: .01rem solid #f5f5f5;
    /*float: left;*/
    display: flex;
    align-items: center;
    justify-content: center;
}
.brand-logo-list li img{
    max-width: .9rem;
    max-height: .5rem;
    border: none;
    outline: none;
    vertical-align: middle;
}
.brand-logo-list .bt{
    border-top: .02rem solid #f5f5f5;
}
.brand-logo-list .bb{
    border-bottom: .02rem solid #f5f5f5;
}
.brand-logo-list .br{
    border-right: .02rem solid #f5f5f5;
}