image{
	/* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */
	border: 0;
	/* 取消图片底侧有空白缝隙的问题 ① */
	vertical-align: middle;
	/* 取消图片底侧有空白缝隙的问题 ② */
	object-fit: cover;
}
@font-face {
	font-family: "FZDBSJW";
	src: url('/common/fonts/FZDBSJW.ttf');
}
.main{
	width: 100vw;
	min-height: 100vh;
	background-image: url('/static/page-bg.jpg');
	background-size: cover;
}
.header{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	padding-top: 26px;
}
.header .logo{
	width: 197px;
	padding: 0 0 6px 39px;
}
.header .title{
	width: 480px;
}
.header .position{
	width: 161px;
	padding: 0 60px 6px 25px;
}
.header view image{
	width: 100%;
}

/* 轮播 */
.banner{
	width: calc(100% - 150px);
	box-shadow: 0 0 38px 5px #447406;
	margin: 33px auto;
}


/* 导航 */
.calculator .nav-btns{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-top: 46px;
	position: relative;
	z-index: 2;
}
.calculator .nav-btns .btn{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 271px;
	height: 73px;
	background-image: url('/static/icon-tabbar.png');
	background-size: cover;
}
.calculator .nav-btns .btn.active{
	background-image: url('/static/icon-tabbar-active.png');
}
.calculator .nav-btns .btn image{
	height: 27px;
	margin-top: 9px;
}

/* 尾部 */
.footer{
	background-color: #31742f;
	line-height: 62px;
	color: #ffffff;
	font-size: 24px;
	text-align: center;
	letter-spacing: 3px;
}
.footer>text{
	padding-left: 15px;
}

/* 计算器 */
.calculator-bg{
	padding: 0 75px;
	margin-top: 48px;
	position: relative;
}
.calculator-bg .bg-img{
	width: 100%;
	height: 350px;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
}
.calculator-bg .bg-img>image{
	width: 100%;
	height: 350px;
}
.calculator{
	width: 100%;
	background-color: #fcfbd2;
}
.calculator .count{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.calculator .cate{
	box-sizing: border-box;
	width: 398px;
	height: 771px;
	margin-left: 26px;
	border: 2px solid #659436;
	position: relative;
	z-index: 2;
}
.calculator .cate .list{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 18px;
}

.calculator .cate .list .title{
	display: flex;
	align-items: flex-end;
	width: 100%;
	font-size: 20px;
}
.calculator .cate .list .title text{
	margin-bottom: 6px;
}
.calculator .cate .list:nth-of-type(1) .title text{
	margin-top: 10px;
}
.calculator .cate .list .title::before{
	content: '';
	display: block;
	width: 128px;
	margin-left: 12px;
	background-repeat: no-repeat;
	background-position: left center;
}

.calculator .cate .list:nth-of-type(1) .title::before{
	background-image: url('/static/icon-clothing.png');
	background-size: auto 59px;
	height: 59px;
}
.calculator .cate .list:nth-of-type(2) .title::before{
	background-image: url('/static/icon-food.png');
	background-size: auto 45px;
	height: 45px;
}
.calculator .cate .list:nth-of-type(3) .title::before{
	background-image: url('/static/icon-live.png');
	background-size: auto 42px;
	height: 42px;
}
.calculator .cate .list:nth-of-type(4) .title::before{
	background-image: url('/static/icon-go.png');
	background-size: auto 36px;
	height: 36px;
}
.calculator .cate .list:nth-of-type(5) .title::before{
	background-image: url('/static/icon-use.png');
	background-size: auto 37px;
	height: 37px;
}

.calculator .cate .list .item{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 110px;
	height: 29px;
	font-size: 14px;
	margin: 15px 9px 0;
	background-image: url('/static/icon-btns.png');
	background-size: 100%;
}

.calculator .interface{
	box-sizing: border-box;
	width: 456px;
	height: 768px;
	padding: 40px 38px 0;
	margin-right: 26px;
	background-color: #669438;
	border: 1px solid #31742f;
	border-radius: 70px;
	box-shadow: 5px 5px 0 2px #2d5305;
	position: relative;
	z-index: 2;
}

/* 计算器界面 */
.interface .result{
	box-sizing: border-box;
	width: 100%;
	height: 350px;
	background-color: #ffffff;
	border: 1px solid #31742f;
	border-radius: 15px;
	padding: 6px 26px;
	font-size: 24px;
	line-height: 1.4;
	color: #659437;
}
.interface .result .individual{
	padding: 6px 0;
	border-bottom: 1px solid #ddd949;
}
.interface .result .subtotal{
	padding: 6px 0;
}
.interface .result .total{
	padding: 18px 0 15px;
	border-top: 1px solid #ddd949;
}
.interface .result .item{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.interface .result .item view:first-child{
	width: 118px;
	margin-right: 28px;
}
.interface .result .item view:nth-of-type(2){
	color: #333333;
}
.interface .result .subtotal .item view:first-child{
	display: flex;
	justify-content: space-between;
}
.interface .result .individual .item view:first-child{
	width: 146px;
	margin-right: 0;
}
.interface .result .item view:nth-of-type(2){
	width: calc(100% - 240px);
	text-align: right;
}
.interface .result .item view:last-child{
	width: 74px;
	text-align: right;
}
.interface .result .total .item view:first-child{
	letter-spacing: 5px;
}
.interface .result .item view .input{
	width: 100%;
	font-size: 24px;
	/* white-space: nowrap;
	overflow: hidden;
	direction: rtl */;
}
.interface .result .item view .input.blur{
	animation: opacity_name 0.8s linear alternate infinite;
}

@keyframes opacity_name {
	from {
		opacity: .1;
	}
	to {
		opacity: 1;
	}
}

/* 计算器按钮 */
.interface-btns{
	display: flex;
	justify-content: space-between;
	margin-top: 18px;
}

.interface-btns .num,
.interface-btns .operate{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 260px;
}
.interface-btns .num .btn,
.interface-btns .operate .btn{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 71px;
	height: 71px;
	margin-top: 12px;
	background-image: url('/static/icon-btn-01.png');
	background-size: cover;
	font-size: 26px;
	color: #1c5e2e;
}
.interface-btns .num .btn:last-child{
	box-sizing: border-box;
	padding-bottom: 22px;
	font-size: 30px;
}

.interface-btns .operate{
	width: 90px;
}

.interface-btns .operate .btn{
	width: 90px;
	height: 71px;
	margin-top: 12px;
	background-image: url('/static/icon-btn-03.png');
}
.interface-btns .operate .btn:last-child{
	height: 153px;
	background-image: url('/static/icon-btn-02.png');
	writing-mode: tb-rl;
}

/* 操作说明 */
.calculator .explain{
	width: 100%;
	margin-top: 32px;
	line-height: 51px;
	font-size: 20px;
	color: #ffffff;
	text-align: center;
	background-color: #31742f;
}


/* 评估碳足迹 */
.calculator-other{
	padding-top: 26px;
}
.assess,
.eliminate{
	position: relative;
	z-index: 2;
	width: 100%;
}
/* 标题 */
.assess-title,
.eliminate-title{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 26px;
}
.assess-title>image,
.eliminate-title>image{
	height: 29px;
}

.assess .assess-title-other{
	margin-top: -22px;
}

.total-num{
	display: flex;
	align-items: center;
}
.total-num .num{
	width: 39px;
	line-height: 33px;
	margin: 0 7px;
	background-color: #31742f;
	border-radius: 5px;
	color: #ffffff;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
}
.total-num .num:nth-last-of-type(3){
	background: none;
	color: #31742f;
	font-size: 24px;
	width: auto;
}
.total-num image{
	height: 24px;
	margin-left: 7px;
}
.assess-form,
.assess-contrast{
	padding: 0 32px;
}

/* 柱状图 */
.assess-form{
	display: flex;
	justify-content: space-between;
}
.histogram{
	width: calc(100% - 400px);
	height: 370px;
	padding-top: 0;
}
.histogram .form-list{
	display: flex;
	align-items: flex-end;
	height: 300px;
	border-bottom: 2px solid #31742f;
}
.histogram .form-item{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 280px;
	width: calc(100%/5);
	overflow: hidden;
	animation-name: changeHeight;
	animation-duration: 1.2s;
	animation-iteration-count:1;
}
.histogram .form-item text{
	font-size: 15px;
	font-weight: bold;
}
.histogram .form-item view{
	width: 28px;
	border-radius: 14px;
	margin-top: 5px;
}

@keyframes changeHeight {
  from {height: 0;}
  to {height: 280px;}
}

.histogram .form-item:nth-of-type(1) view{
	background-image: linear-gradient(to top,rgba(166,254,165,0),rgba(166,254,165,1));
}
.histogram .form-item:nth-of-type(2) view{
	background-image: linear-gradient(to top,rgba(255,181,76,0),rgba(255,181,76,1));
}
.histogram .form-item:nth-of-type(3) view{
	background-image: linear-gradient(to top,rgba(148,223,222,0),rgba(148,223,222,1));
}
.histogram .form-item:nth-of-type(4) view{
	background-image: linear-gradient(to top,rgba(255,218,173,0),rgba(255,218,173,1));
}
.histogram .form-item:nth-of-type(5) view{
	background-image: linear-gradient(to top,rgba(136,136,172,0),rgba(136,136,172,1));
}
.form-title{
	display: flex;
	align-items: flex-end;
	height: 40px;
}
.form-title view{
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100%/5);
}
.form-title image{
	height: 25px;
}

/* 饼图 */ 
.pie-chart{
	width: 400px;
	height: 400px;
	margin-right: -30px;
}

/* 对比 */
.assess-txt{
	display: flex;
	align-items: center;
	padding: 0 26px;
	margin: 15px 0 15px;
	font-size: 18px;
}

.assess-btns{
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 1px 1px 0 1px rgba(45, 83, 5, .35);
	width: 110px;
	height: 30px;
	border: 1px solid #959795;
	border-radius: 7px;
	overflow: hidden;
	margin: 0 7px;
	background-color: #ffffff;
}
.assess-btns .btn{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 30px;
	background-image: linear-gradient(to top,#d0cfd1,#f7f7f7);
}
.assess-btns .btn image{
	width: 19px;
}
.assess-btns input{
	width: calc(100% - 70px);
	height: 30px;
	text-align: center;
	font-size: 16px;
}

.assess-txt text{
	color: #327531;
}
.assess-contrast .assess-contrast-bg{
	width: 100%;
	height: 235px;
	background-color: rgba(252, 252, 242, .52);
}
.assess-contrast .line{
	width: 100%;
	height: 0;
	border-top: 1px solid #98b992;
	border-bottom: 1px solid #31742f;
}
.assess-contrast .list{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	height: 308px;
	margin-top: -255px;
}
.assess-contrast .item{
	text-align: center;
	font-size: 16px;
	line-height: 1.2;
}
.assess-contrast .item image{
	margin-bottom: 25px;
}
.assess-contrast .item:nth-of-type(1) text{
	color: #327531;
}
.assess-contrast .item:nth-of-type(1){
	width: 130px;
}
.assess-contrast .item:nth-of-type(2){
	width: 130px;
}
.assess-contrast .item:nth-of-type(3){
	width: 168px;
}
.assess-contrast .item:nth-of-type(4){
	width: 130px;
}
.assess-contrast .item:nth-of-type(5){
	width: 262px;
}

/* 消除碳足迹 */
.eliminate .tips{
	box-sizing: border-box;
	width: calc(100% - 52px);
	margin: 23px auto 0;
	padding: 20px 35px;
	background-image: linear-gradient(to top,rgba(181,250,172,1),rgba(181,250,172,0));
	font-size: 19px;
	line-height: 2.2;
}
.eliminate .tips text{
	color: #337632;
	margin: 0 32px;
}
.eliminate-img{
	display: flex;
	justify-content: center;
	padding: 34px 26px 42px;
	position: relative;
}
.eliminate-img>image{
	height: 460px;
}
.eliminate-img .payment-btn{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 271px;
	height: 67px;
	background-image: url(/static/icon-payment.png);
	background-size: cover;
	position: absolute;
	right: 0;
	bottom: -10px;
	z-index: 99;
}
.eliminate-img .payment-btn image{
	height: 27px;
	margin-top: 9px;
}
.eliminate-img .payment-btn-other{
	right: auto;
	left: 0;
}

/* 在线支付 */
.contribution{
	width: 100%;
	position: relative;
	z-index: 2;
}
.iframe-box{
	width: 100%;
	height: 818px;
	position: relative;
	z-index: 2;
}

/* 查看证书 */
.certificate-bg{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, .5);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99;
}
.certificate{
	width: calc(100% - 200px);
	background-color: #ffffff;
	position: relative;
}
.certificate>image{
	width: 100%;
}
.certificate .content{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.certificate .logo{
	width: 149px;
	height: 111px;
	margin: 100px auto 0;
}
.certificate .logo image{
	width: 100%;
	height: 100%;
}
.certificate .txt{
	width: 680px;
	margin: 40px auto 0;
}
.certificate .txt .code{
	font-family: 'FZDBSJW';
	font-size: 21px;
	line-height: 24px;
	color: #d4191a;
	text-align: right;
	margin-top: 32px;
	letter-spacing: 1px;
}
.certificate .txt>image{
	width: 529px;
	height: 223px;
	margin-left: 50px;
}

.certificate .msg{
	width: 680px;
	margin: 40px auto 0;
}
.certificate .msg .item{
	font-size: 26px;
	line-height: 46px;
	text-align: justify;
}
.certificate .msg .item:nth-of-type(1){
	display: flex;
}
.certificate .msg .item:nth-of-type(2){
	text-indent: 2em;
	margin-top: 10px;
}
.certificate .number{
	margin: 0 3px;
}
.certificate .msg .item text{
	font-family: 'FZDBSJW';
	color: #d4191a;
	letter-spacing: 2px;
	text-indent: 2px;
}

.certificate .msg .time{
	font-size: 26px;
	line-height: 32px;
	margin-top: 20px;
	text-align: right;
}

.certificate .foot{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 540px;
	margin: 40px auto 0;
}
.certificate .foot-logo,
.certificate .foot-logo image{
	width: 170px;
	height: 170px;
}
.certificate .qr{
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 13px;
	line-height: 20px;
}
.certificate .qr image{
	width: 194px;
	height: 191px;
	margin-bottom: 5px;
}
.certificate .qr text{
	font-size: 14px;
	font-weight: bold;
}
.certificate .support{
	width: 100%;
	font-size: 22px;
	line-height: 1.5;
	text-align: center;
	margin-top: 20px;
}