/* CSS Document */
html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	margin: 0;
	padding: 0
}

html {
	background: #fff;
	position: relative;
	height: 100%;
	font-size: 125%;
	overflow-x: hidden;
}

@media (max-width:1200px) {
	html {
		font-size: 100%;
	}
}

@media (max-width:1024px) {
	html {
		font-size: 87.5%;
	}
}

@media (max-width:768px) {
	html {
		font-size: 100%;
	}
}

@media (max-width:540px) {
	html {
		font-size: 100%;
	}
}

@media (max-width:440px) {
	html {
		font-size: 87.5%;
	}
}

@media (max-width:340px) {
	html {
		font-size: 75%;
	}
}

body {
	/*?? body ��??? width ?? height ?? ���� ҳ��??������� ����*/
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

	font-size: 100%;
	color: #333;
	font-family: "Microsoft YaHei";
	background-color: #fff;
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}

body * {
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}

@media screen and (orientation:portrait) {

	/*������ʽ*/
	body {
		transform-origin: 0 0;
		transform: rotateZ(90deg) translateY(-100%);
	}
}

form {
	display: inline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block
}

audio,
canvas,
video {
	display: inline-block;
	*display: inline;
	*zoom: 1
}

button,
input,
select,
textarea {
	font-size: 100%;
	vertical-align: middle;
	outline: none;
	font-family: "Microsoft YaHei";
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

th {
	text-align: inherit
}

img {
	border: 0;
	-ms-interpolation-mode: bicubic;
}

input,
img {
	vertical-align: middle
}

ol,
ul {
	list-style: none
}

em,
i {
	font-style: normal
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover {
	text-decoration: underline;
}

textarea {
	resize: none
}

* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

:after,
:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

.left {
	float: left;
}

.right {
	float: right;
}

.clearfix:after {
	clear: both;
	content: " ";
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
}

/* ---- mainSwiperBox Style ---- */
.mainSwiperBox {
	height: 100%;
}

.mainSwiperBox .swiper-container {
	width: 100%;
	height: 100%;
}

.mainSwiperBox .swiper-wrapper {
	height: 100%;
}

.mainSwiperBox .swiper-slide {
	height: 100%;
	position: relative;
}

.mainSwiperBox img.img {
	position: absolute;
	height: auto;
}
/* ---- windmill-box ---- */
.windmill-box {
	position: absolute;
	width: 400px;
	height: 620px;
	right: 0;
	bottom: 20px;
}
.windmill-box .leaf {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	transform-origin: 50% 50%;
	animation: windmill 2s linear infinite;
}
.windmill-box .rod {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 9.5%;
	height: 66.94%;
	height: auto;
	/* display: none; */
}
@keyframes windmill {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/* ---- firstBox Style ---- */
#mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(1){
	z-index: 90;
	width: 207.25vmin; /* 2488px; */
}
.firstBox {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: calc(207.25vmin + 1px); /* 2488px; */
	background:
	url(../img/first-lefttop-bg.png) left top / 49vmin 16.25vmin no-repeat,
	url(../img//first-bg.jpg) center center /100% 100% no-repeat ;
	z-index: 29;
}
.firstBox .cloud01 {
	/* left: 49vmin; */
	top: 13.75vmin;
	width: 34vmin;
	height: 9.75vmin;
	animation: cloud-wave 90s linear infinite;
}
.firstBox .cloud02 {
	/* left: 90.25vmin; */
	top: 22vmin;
	width: 20.25vmin;
	height: 6.75vmin;
	animation: cloud-wave 90s linear infinite;
	animation-delay: -15s;
}
.firstBox .cloud03 {
	/* left: 155.25vmin; */
	top: 11.5vmin;
	width: 28.25vmin;
	height: 8.25vmin;
	animation: cloud-wave 90s linear infinite;
	animation-delay: -45s;
}
.firstBox .cloud04 {
	/* right: -8.25vmin; */
	top: 14.75vmin;
	width: 18.5vmin;
	height: 7.75vmin;
	animation: cloud-wave 90s linear infinite;
	animation-delay: -65s;
}
.firstBox .leaf-left {
	left: -7.5vmin;
	top: -3.5vmin;
	width: 18.25vmin;
	height: 28.5vmin;
	transform-origin: 0 0;
	animation: leave-left-swing 3s ease-in-out infinite alternate;
}
.firstBox .leaf-top {
	left: 2.75vmin;
	top: -8vmin;
	width: 27.25vmin;
	height: 24.25vmin;
	transform-origin: 0 0;
	animation: leave-right-swing 3s ease-in-out infinite alternate;
}
.firstBox .building-near {
	left: 50.5vmin;
	bottom: 8.25vmin;
	width: 77.5vmin;
}
.firstBox .building-far {
	left: 0;
	bottom: 0vmin;
	width: 157.25vmin;
}
.firstBox .mountain {
	left: 0;
	bottom: 0;
	width: 196vmin;
}
.firstBox .trajectory {
	left: 4.5vmin;
	bottom: 5.5vmin;
	width: 126.25vmin;
}
.firstBox .trajectory {
	left: 4.5vmin;
	bottom: 5.5vmin;
	width: 126.25vmin;
}
.firstBox .mascot-box {
	position: absolute;
	width: 40.25vmin;
	height: auto;
	bottom: 55vmin;
	left: 5vmin;
	animation: mascot-left 4s linear forwards;
}
.firstBox .mascot-box .mascot {
	position: absolute;
	left: 0;
	width: 100%;
	height: auto;
	animation: mascot-down 4s linear forwards;
}
.firstBox .windmill-container {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 84.5vmin;
	height: 12vmin;
}
.firstBox .windmill-container .hill-far {
	right: 0;
	bottom: 0;
	width: 84.5vmin;
}
.firstBox .windmill-container .hill-midd {
	right: 9vmin;
	bottom: 0;
	width: 64.5vmin;
}
.firstBox .windmill-container .hill-near {
	right: 7.75vmin;
	bottom: 0;
	width: 59.25vmin;
}
.firstBox .windmill-near {
	bottom: 6.75vmin;
	right: 12.5vmin;
	width: 33.25vmin;
	height: 51.75vmin;
}
.firstBox .windmill-far {
	bottom: 15vmin;
	right: 30.25vmin;
	width: 14vmin;
	height: 21.75vmin;
}
.firstBox .windmill-far .leaf {
	animation-duration: 4s;
}
.firstBox .windmill-midd {
	bottom: 8.5vmin;
	left: 19.75vmin;
	width: 24.5vmin;
	height: 38vmin;
}
.firstBox .windmill-midd .leaf {
	animation-duration: 3s;
}
.firstBox .solar-energy {
	width: 42vmin;
	right: 21vmin;
	height: auto;
}
.firstBox .slogan {
	position: absolute;
	height: auto;
	left: 66vmin;
	top: 21.25vmin;
	width: 94vmin;
	opacity: 0;
	transform: scale(0.382);
	animation: news-out 0.2s linear forwards;
}
.firstBox .slogan img {
	width: 100%;
	height: auto;
	position: relative;
}
.swiper-slide-active .firstBox .slogan{
	animation: news-in 0.6s linear forwards;
}
@keyframes leave-left-swing {
	0% {
		transform: rotate(5deg);
	}
	100% {
		transform: rotate(-10deg);
	}
}
@keyframes leave-right-swing {
	0% {
		transform: rotate(10deg);
	}
	100% {
		transform: rotate(-15deg);
	}
}
@keyframes cloud-wave {
	0% {
		left: -10%;
		opacity: 1;
	}
	90% {
		left: 110%;
		opacity: 1;
	}
	100% {
		opacity: 0;
		left: 120%;
	}
}
/* ����?? */
@keyframes mascot-left {
	0% {
		left: 5vmin;
	}
	100% {
		left: 29.25vmin;
	}
}
@keyframes mascot-down {
	0% {
		bottom: 0vmin;
		transform: scale(0.8);
	}
	35% {
		bottom: -25vmin;
	}
	100% {
		transform: scale(1);
		bottom: -40.25vmin;
	}
}
/* ---- secondBox Style ---- */
#mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(2){
	width: 111.25vmin; /* 1336px; */
	z-index: 80;
}
.secondBox {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 111.25vmin; /* 1336px; */
	background:
	url(../img/second-bg.jpg) left top / 100% 100% no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 19;
}
.secondBox .scenery-container {
	position: absolute;
	right: -19.5vmin;
	bottom: 0;
	width: 47.5vmin;
	height: 10vmin;
}
.secondBox .scenery-container .grove {
	width: 45.5vmin;
	bottom: 0;
	left: 0;
}
.secondBox .scenery-container .house {
	width: 16.25vmin;
	bottom: 0;
	left: 6vmin;
	z-index: 1;
}
.secondBox .scenery-container .solar-energy {
	width: 21vmin;
	bottom: 0;
	right: 0;
}
.secondBox .windmill-right {
	bottom: 2.25vmin;
	right: -1.5vmin;
	width: 17.5vmin;
	height: 27.25vmin;
}
.secondBox .windmill-midd {
	bottom: 0.5vmin;
	left: 24.5vmin;
	width: 13.75vmin;
	height: 21.25vmin;
	animation-duration: 4.5s;
}
.secondBox .windmill-midd .leaf {
	animation-duration: 4s;
}
.secondBox .windmill-left {
	bottom: 0vmin;
	left: 17.25vmin;
	width: 11.75vmin;
	height: 18.75vmin;
}
.secondBox .windmill-left .leaf {
	animation-duration: 3s;
}
.news-container {
	position: relative;
	border: 0.25vmin solid rgba(66, 174, 131, 0.65);
	border-radius: 3.75vmin;
	background: rgba(255, 255, 255, 0.65);
	padding: 3.5vmin 4.75vmin 5vmin;
	width: 100vmin;
	box-shadow: 0.75vmin 0.75vmin 0.5vmin rgba(75, 154, 123, 0.27);
	z-index: 999;
	opacity: 0;
	transform: scale(0.382);
	animation: news-out 0.2s linear forwards;
}
.swiper-slide-active .news-container{
	animation: news-in 0.4s linear forwards;
}
@keyframes news-in {
	0% {
		opacity: 0;
		transform: translate(0, -50%) scale(0.382);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0) scale(1);
	}
}
@keyframes news-out {
	0% {
		opacity: 1;
		transform: translate(0, 0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(0, 50%) scale(1);
	}
}
.news-container .headlines-box {
	margin-bottom: 2vmin;
}
.news-container .headlines-box h1 {
	position: relative;
	line-height: 4.5vmin;
	padding-left: 11.5vmin;
	font-size: 2.75vmin;
	color: #36aa79;
	font-weight: bold;
	margin-bottom: 1vmin;
}
.news-container .headlines-box h1 label {
	position: absolute;
	top: 0.5vmin;
	left: 0;
	height: 3.5vmin;
	line-height: 3.5vmin;
	padding: 0 1.25vmin;
	border-left: 0.75vmin solid #fce744;
	background: #42ae83;
	font-size: 2vmin;
	color: #fff;
}
.news-container .headlines-box h1 label::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	margin-top: -0.5vmin;
	width: 0; 
    height: 0;
    border-top: 0.5vmin solid transparent;
    border-left: 0.75vmin solid #42ae83;
    border-bottom: 0.5vmin solid transparent;
}
.news-container .headlines-box p {
	line-height: 2.25vmin;
	font-size: 1.25vmin;
	color: #666;
}
.news-container .headlines-box p a {
	display: inline-block;
	color: #42ae83;
}

.news-swiper-container {
	float: left;
	height: 30vmin;
	width: 50.9%;
	position: relative;
}
.news-swiper-container .news-swiper-next {
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: -1.5vmin;
	right: -1.75vmin;
	background: #42ae83;
}
.news-swiper-container  .swiper {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	z-index: 2;
}
.news-swiper-container .swiper-slide {
	height: 30vmin;
	position: relative;
	overflow: hidden;
}
.news-swiper-container .swiper-slide img {
	position: absolute;
	width: auto;
	min-width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.news-swiper-container .swiper-slide p{
	position: absolute;
	z-index: 2;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4.75vmin;
	line-height: 4.75vmin;
	padding: 0 1vmin;
	font-size: 1.75vmin;
	color: #fff;
	text-align: center;
	background: rgba(5, 151, 93, 0.6);
}
.general-news-box {
	float: right;
	width: 43.6%;
	position: relative;
	top: -1.75vmin;
}
.general-news-box .news-list {
	margin-bottom: 2.5vmin;
}
.general-news-box .news-list li {
	position: relative;
	line-height: 3.25vmin;
	height: calc(4.75vmin + 1px);
	padding: 0.75vmin 0 0.75vmin 1.75vmin;
	border-bottom: 1px dashed #39ab7b;
	font-size: 1.75vmin;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.general-news-box .news-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2vmin;
	width: 0.75vmin;
	height: 0.75vmin;
	border-radius: 50%;
	background: #42ae83;
	overflow: hidden;
	line-height: 0;
}
.general-news-box .pic-news-lists li {
	float: left;
	width: 46.8%;
	height: 11.5vmin;
	overflow: hidden;
	position: relative;
}
.general-news-box .pic-news-lists li:nth-of-type(2n) {
	float: right;
}
.general-news-box .pic-news-lists li img {
	position: absolute;
	width: auto;
	min-width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.general-news-box .pic-news-lists li p {
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2.75vmin;
	padding:0 1vmin 0 3.75vmin;
	line-height: 2.75vmin;
	font-size: 1.25vmin;
	color: #fff;
	text-align: center;
	background: rgba(0, 0, 0, 0.5);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.general-news-box .pic-news-lists li p::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 2.75vmin;
	background: url(../img/icon-play-s.png) center center / 1.25vmin auto no-repeat #05975d;
}
@media screen and (orientation:portrait) {
	#mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(2){
		width: 150vmin; /* 1336px; */
		z-index: 70;
	}
	.secondBox {
		width: 150vmin; /* 1336px; */
	}
	.news-container {
		width: 126vmin;
	}
	.news-container .headlines-box h1 {
		line-height: 6vmin;
		padding-left: 14vmin;
		font-size: 4vmin;
	}
	.news-container .headlines-box h1 label {
		height: 4.8vmin;
		line-height: 4.8vmin;
		font-size: 3.6vmin;
	}
	.news-container .headlines-box p {
		display: none;
	}
	.news-swiper-container {
		height: 41.2vmin;
		width: 50.9%;
	}
	.news-swiper-container .swiper-slide {
		height: 41.2vmin;
	}
	.news-swiper-container .swiper-slide p{
		height: 6vmin;
		line-height: 6vmin;
		font-size: 3.6vmin;
	}
	.general-news-box {
		top: -1.75vmin;
	}
	.general-news-box .news-list li {
		line-height: 5.25vmin;
		height: calc(6.75vmin + 1px);
		padding: 0.75vmin 0 0.75vmin 1.75vmin;
		font-size: 3.6vmin;
	}
	.general-news-box .news-list li::before {
		top: 3vmin;
	}
	.general-news-box .pic-news-lists li {
		height: 14vmin;
	}
	.general-news-box .pic-news-lists li p {
		height: 4.8vmin;
		padding:0 1vmin 0 1vmin;
		line-height: 4.8vmin;
		font-size: 3.2vmin;
	}
	.general-news-box .pic-news-lists li p::before {
		display: none;
	}
}
/* ---- thirdBox Style ---- */
#mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(3){
	/*width: 163.75vmin;  1964px; */
	width: 100vmax;
	z-index: 60;
}
.thirdBox {
	position: absolute;
	left: -1px;
	top: 0;
	width: 100%;
	height: 100%;
	width: calc(100vmax + 2px);
	/* width: calc(163.75vmin + 2px); 1964px; */
	background:
	url(../img/third_bg.jpg) left top / 100% 100% no-repeat;
	z-index: 9;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.thirdBox .scenery-container {
	position: absolute;
	bottom: 0;
	width: 66vmin;
	height: 26vmin;
	right: 8.25vmin;
}
.thirdBox .pylon {
	width: 17.25vmin;
	bottom: 6.75vmin;
	left: 0;
}
.thirdBox .solar-energy {
	width: 23vmin;
	left: 17.25vmin;
	bottom: 10vmin;
}
.thirdBox .factory-box {
	position: absolute;
	right: 0;
	bottom: 7.75vmin;
	width: 20.25vmin;
}
.thirdBox .factory {
	width: 100%;
	bottom: 0;
	left: 0;
}
.thirdBox .factory-cloud {
	width: 8vmin;
	animation: factory-cloud-wave 45s linear infinite;
}
.thirdBox .tree {
	width: 49.5vmin;
	bottom: 1vmin;
	left: 36.5vmin;
}
.thirdBox .factory-cloud-up {
	bottom: 16.75vmin;
}
.thirdBox .factory-cloud-down {
	bottom: 12.75vmin;
	animation-delay: -20s;
}
.thirdBox .windmill-right {
	bottom: 12.25vmin;
	left: 28vmin;
	width: 12.25vmin;
	height: 19vmin;
}
.thirdBox .windmill-left {
	bottom: 14.25vmin;
	left: 18.25vmin;
	width: 10.5vmin;
	height: 16.25vmin;
}
.thirdBox .windmill-left .leaf {
	animation-duration: 3s;
}

@keyframes factory-cloud-wave {
	0% {
		left: -20%;
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		left: 110%;
	}
}
/* ---- third-container Style ---- */
.footprint-container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100vmax;
	height: 100vmin;
	overflow: hidden;
	animation: footprint-out 0.2s linear forwards;
}
.swiper-slide-active .footprint-container{
	animation: footprint-in 0.4s linear forwards;
}
@keyframes footprint-in {
	0% {
		opacity: 0;
		transform: translate(0, -50%) scale(0.382);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0) scale(1);
	}
}
@keyframes footprint-out {
	0% {
		opacity: 1;
		transform: translate(0, 0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(0, 50%) scale(1);
	}
}
/* footprint-nav-container */
.footprint-nav-container {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -20vmin;
	margin: 0 auto;
	height: 17.5vmin;
	width: 103.75vmin;
	z-index: 9;
	transition: .5s ease-in-out;
}
.footprint-nav-container.show-nav {
	bottom: 17.75vmin;
}
.footprint-nav-container .roud {
	bottom: 0;
	left: 0;
	width: 103.75vmin;
}
.footprint-nav-container .nav li {
	position: absolute;
	width: 9vmin;
	height: 10vmin;
}
.footprint-nav-container .nav li.sd {
	left: -4.4%; /* 1245 */
	top: 19%; /* 210 */
}
.footprint-nav-container .nav li.yt {
	left: 10.28%; /* 1245 */
	top: 0; /* 210 */
}
.footprint-nav-container .nav li.wh {
	left: 25.6%; 
	top: 3.3%;
}
.footprint-nav-container .nav li.qd {
	left: 40.96%; 
	top: 19.5%;
}
.footprint-nav-container .nav li.wf {
	right: 35.1%; 
	top: 28.1%;
}
.footprint-nav-container .nav li.zb {
	right: 19.75%; 
	top: 18.1%;
}
.footprint-nav-container .nav li.jn {
	right: 4.34%; 
	top: 33.3%;
}
.footprint-nav-container .nav li a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/footprint-nav-bg.png) center top / 100% 100% no-repeat;
	padding: 0.75vmin;
	cursor: pointer;
	text-decoration: none;
}
.footprint-nav-container .nav li a:hover {
	text-decoration: none;
}
.footprint-nav-container .nav li a.active {
	background-image: url(../img/footprint-nav-bg-a.png);
}
.footprint-nav-container .nav li a::before {
	content: "";
	position: absolute;
	top: -0.75vmin;
	right: 8.5vmin;
	width: 8.25vmin;
	height: 11vmin;
	background: url(../img/footprint-c-baby.png) center center / 100% 100% no-repeat;
	z-index: 1;
	display: none;
}
.footprint-nav-container .nav li a.active::before {
	display: block;
}
.footprint-nav-container .nav li a span {
	width: 100%;
	height: 7.5vmin;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5vmin;
	color: #fff;
	background: #70ca81;
	font-weight: bold;
}
.footprint-nav-container .nav li a.active span {
	background: #ffe640;
}
/*  */
#footprint-inner-container {
	position: absolute;
	width: 300vmax;
	height: 300vmin;
	transition: .3s ease-in-out;
}
#footprint-inner-container.footprint-main {
	left: -100vmax;
	top: -100vmin;
}
#footprint-inner-container.footprint-yt {
	left: -100vmax;
	top: 0vmin;
}
#footprint-inner-container.footprint-wh {
	left: -200vmax;
	top: -50vmin;
}
#footprint-inner-container.footprint-qd {
	left: -200vmax;
	top: -150vmin;
}
#footprint-inner-container.footprint-wf {
	left: -100vmax;
	top: -200vmin;
}
#footprint-inner-container.footprint-zb {
	left: 0vmax;
	top: -150vmin;
}
#footprint-inner-container.footprint-jn {
	left: 0vmax;
	top: -50vmin;
}
.main-map-container {
	position: absolute;
	left: 100vmax;
	top: 100vmin;
	height: 100vmin;
	width: 100vmax;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.main-map-container .slogan-box {
	width: 100%;
	line-height: 0;
	text-align: center;
	height: 10vmin;
	margin-bottom: 0.25vmin;
}
.main-map-container .slogan-box img {
	height: 100%;
	width: auto;
}
.main-map-container .describe-box {
	width: 100%;
	font-size: 1.5vmin;
	line-height: 177.78%;
	color: #333333;
}
.main-map-container .describe {
	width: 86.5vmin;
	margin: 0 auto;
}
.main-map-container .describe-box b {
	font-weight: bold;
	color: #45a179;
	font-size: 2vmin;
}
.main-map-container .map-box {
	height: 55.75vmin;
	width: 95.5vmin;
	margin: 0 auto;
	position: relative;
}
.main-map-container .map-bg {
	width: 95.5vmin;
	left: 0;
	bottom: 0;
}
.main-map-container .cloud-top {
	width: 15.5vmin;
	bottom: 50.5vmin;
	animation: map-cloud-wave 45s linear infinite;
	animation-delay: -20s;
}
.main-map-container .cloud-midd {
	width: 18.75vmin;
	bottom: 38vmin;
	animation: map-cloud-wave 45s linear infinite;
}
.main-map-container .city-box {
	position: absolute;
	height: 2.75vmin;
	width: 10.25vmin;
	z-index: 1;
	cursor: pointer;
	opacity: 0;
	transform: translate(0, -50%);
}
.swiper-slide-active .main-map-container .city-yt {
	animation: city-in 3s linear forwards;
	animation-delay: -2s;
}
.swiper-slide-active .main-map-container .city-wh {
	animation: city-in 3s linear forwards;
	animation-delay: -1.5s;
}
.swiper-slide-active .main-map-container .city-qd {
	animation: city-in 3s linear forwards;
	animation-delay: -1s;
}
.swiper-slide-active .main-map-container .city-wf {
	animation: city-in 3s linear forwards;
	animation-delay: -0.5s;
}
.swiper-slide-active .main-map-container .city-zb {
	animation: city-in 3s linear forwards;
	animation-delay: -0s;
}
.swiper-slide-active .main-map-container .city-jn {
	animation: city-in 3s linear forwards;
	animation-delay: 0.5s;
}
.main-map-container .city-box .btn {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	height: 2.75vmin;
	width: 10.25vmin;
	text-align: center;
	line-height: 2.75vmin;
	border-radius:  1.25vmin;
	font-size: 1.75vmin;
	color: #fff;
	font-weight: bold;
	background: #0060d3;
	background: linear-gradient(#0060d3, #0060d3);
	box-shadow: 0 0 1.5vmin rgba(0, 96, 211, 0);
	
}
.swiper-slide-active .main-map-container .city-yt .btn {
	animation: city-btn 6s ease-in-out infinite forwards;
	animation-delay: -1s;
}
.swiper-slide-active .main-map-container .city-wh .btn {
	animation: city-btn 6s ease-in-out infinite forwards;
	animation-delay: 0s;
}
.swiper-slide-active .main-map-container .city-qd .btn {
	animation: city-btn 6s ease-in-out infinite forwards;
	animation-delay: 1s;
}
.swiper-slide-active .main-map-container .city-wf .btn {
	animation: city-btn 6s ease-in-out infinite forwards;
	animation-delay: 2s;
}
.swiper-slide-active .main-map-container .city-zb .btn {
	animation: city-btn 6s ease-in-out infinite forwards;
	animation-delay: 3s;
}
.swiper-slide-active .main-map-container .city-jn .btn {
	animation: city-btn 6s ease-in-out infinite forwards;
	animation-delay: 4s;
}

.main-map-container .city-box .tantan {
	position: absolute;
	top: -5vmin;
	left: -2vmin;
	width: auto;
	height: 8vmin;
	z-index: 1;
	opacity: 0;
}
.swiper-slide-active .main-map-container .city-yt .tantan {
	animation: city-tantan 6s ease-in-out infinite forwards;
	animation-delay: -1s;
}
.swiper-slide-active .main-map-container .city-wh .tantan {
	animation: city-tantan 6s ease-in-out infinite forwards;
	animation-delay: 0s;
}
.swiper-slide-active .main-map-container .city-qd .tantan {
	animation: city-tantan 6s ease-in-out infinite forwards;
	animation-delay: 1s;
}
.swiper-slide-active .main-map-container .city-wf .tantan {
	animation: city-tantan 6s ease-in-out infinite forwards;
	animation-delay: 2s;
}
.swiper-slide-active .main-map-container .city-zb .tantan {
	animation: city-tantan 6s ease-in-out infinite forwards;
	animation-delay: 3s;
}
.swiper-slide-active .main-map-container .city-jn .tantan {
	animation: city-tantan 6s ease-in-out infinite forwards;
	animation-delay: 4s;
}
@keyframes city-btn {
	0% {
		box-shadow: 0 0 0.5vmin rgba(0, 96, 211, 0);
		/* background: linear-gradient(#0060d3, #0060d3); */
		background: #0060d3;
	}
	80% {
		box-shadow: 0 0 0.5vmin rgba(0, 96, 211, 0);
		/* background: linear-gradient(#0060d3, #0060d3); */
		background: #0060d3;
	}
	100% {
		box-shadow: 0 0 1.5vmin rgba(246, 209, 49, 1);
		/* background: linear-gradient(#e9ac0b, #ffe400); */
		background: #e9ac0b;
	}
}
@keyframes city-tantan {
	0% {
		opacity: 0;
	}
	70% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes city-in {
	0% {
		opacity: 0;
		transform: translate(0, -50%);
	}
	80% {
		opacity: 0;
		transform: translate(0, -50%);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}
.main-map-container .city-box:hover {
	text-decoration: none;
}
.main-map-container .city-box img.landmark {
	position: absolute;
	bottom: 100%;
	height: auto;
	z-index: -1;
}
.main-map-container .city-yt {
	right: 16.5%; /*1146 */
	bottom: 71%;  /* 669 */
}
.main-map-container .city-yt img.landmark {
	left: 1.25vmin;
	width: 6.5vmin;
}
.main-map-container .city-wh {
	right: 2.35%;
	bottom: 67.7%;
}
.main-map-container .city-wh img.landmark {
	right: 2.5vmin;
	width: 10.75vmin;
}
.main-map-container .city-qd {
	right: 22.86%;
	bottom: 46.2%;
}
.main-map-container .city-qd img.landmark {
	right: 6.25vmin;
	bottom: 1.75vmin;
	width: 7.75vmin;
}
.main-map-container .city-wf {
	left: 49.13%;
	bottom: 60%;
	z-index: 4;
}
.main-map-container .city-wf img.landmark {
	left: 0.5vmin;
	width: 7.5vmin;
}
.main-map-container .city-zb {
	left: 37.87%;
	bottom: 61.3%;
	z-index: 2;
}
.main-map-container .city-zb img.landmark {
	left: 3.25vmin;
	width: 3.75vmin;
}
.main-map-container .city-jn {
	left: 26.88%;
	bottom: 53.96%;
}
.main-map-container .city-jn img.landmark {
	right: 0.75vmin;
	width: 6.5vmin;
}
.main-map-container .go-btn {
	position: absolute;
	left: 16.75vmin;
	bottom: 6.25vmin;
	width: 38.75vmin;
	line-height: 0;
	cursor: pointer;
	opacity: 0;
	transform: translate(0, -50%);
	
}
.swiper-slide-active .main-map-container .go-btn {
	animation: city-in 3s linear forwards;
	animation-delay: 1s;
}
.main-map-container .go-btn img {
	width: 100%;
	height: auto;
}
.footprint-city-container {
	position: absolute;
	left: 100vmax;
	top: 100vmin;
	height: 100vmin;
	width: 100vmax;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.footprint-city-yt {
	left: 100vmax;
	top: 0vmin;
}
.footprint-city-wh {
	left: 200vmax;
	top: 50vmin;
}
.footprint-city-qd {
	left: 200vmax;
	top: 150vmin;
}
.footprint-city-wf {
	left: 100vmax;
	top: 200vmin;
}
.footprint-city-zb {
	left: 0vmax;
	top: 150vmin;
}
.footprint-city-jn {
	left: 0vmax;
	top: 50vmin;
}
.footprint-city-container .headline-box {
	position: relative;
	width: 100vmin;
	margin: 0 auto 3vmin;
	padding-left: 18.25vmin;
}
.footprint-city-container .headline-box .landmark {
	position: absolute;
	top: 0;
	left: 0;
	width: 11vmin;
	height: 11vmin;
}
.footprint-city-container .headline-box .landmark img {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
}
.footprint-city-container .headline-box label {
	position: absolute;
	left: 12.25vmin;
	top: 1vmin;
	width: 3.75vmin;
	height: 8vmin;
	line-height: 3vmin;
	font-size: 2.25vmin;
	color: #fff;
	font-weight: bold;
	background: #36aa79;
	border-radius: 0.33vmin;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.footprint-city-container .headline-box h1 {
	height: 3.75vmin;
	line-height: 3.75vmin;
	text-align: center;
	font-size: 3vmin;
	color: #36aa79;
	font-weight: bold;
	margin-bottom: 0.75vmin;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.footprint-city-container .headline-box p {
	height: 6vmin;
	line-height: 3vmin;
	font-size: 1.5vmin;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.footprint-city-container .big-pic-list {
	margin-bottom: 3vmin;
	width: 100vmin;
}
.footprint-city-container .big-pic-list li {
	width: 23.25%;
	margin-right: 2.33%;
	float: left;
}
.footprint-city-container .big-pic-list li:nth-of-type(4n) {
	margin-right: 0;
}
.footprint-city-container .big-pic-list li .pic {
	width: 100%;
	height: 12.5vmin;
	overflow: hidden;
	position: relative;
}
.footprint-city-container .big-pic-list li .pic img {
	position: absolute;
	width: auto;
	min-width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.footprint-city-container .big-pic-list li h2 {
	height: 3vmin;
	line-height: 3vmin;
	background: #36aa79;
	text-align: center;
	font-size: 1.75vmin;
	color: #fff;
	padding: 0 1vmin;
	font-weight: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.footprint-city-container .city-news-list2 {
	width: 100vmin;
}
.footprint-city-container .city-news-list2 li {
	width: 49%;
	float: left;
	padding-left: 2.5vmin;
	position: relative;
	height: 3.5vmin;
	line-height: 3.5vmin;
	font-size: 1.75vmin;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.footprint-city-container .city-news-list2 li:nth-of-type(2n) {
	float: right;
}
.footprint-city-container .city-news-list2 li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -0.4vmin;
	width: 0.75vmin;
	height: 0.75vmin;
	border-radius: 50%;
	overflow: hidden;
	background: #42ae83;
}
.footprint-city-container .place-box {
	height: 17.5vmin;
	width: 100vmin;
	margin-top: 8.25vmin;
}
.footprint-city-container .place-near-box {
	height: 17.5vmin;
	width: 100vmin;
	margin-top: 7.5vmin;
}
.footprint-city-container .city2-container {
	width: 100vmin;
}
.footprint-city-container .big-pic-box {
	float: left;
	width: 40%;
}
.footprint-city-container .big-pic-box .pic {
	width: 100%;
	height: 22.5vmin;
	position: relative;
	overflow: hidden;
}
.footprint-city-container .big-pic-box .pic img {
	position: absolute;
	width: auto;
	min-width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.footprint-city-container .big-pic-box h2 {
	height: 4.25vmin;
	line-height: 4.25vmin;
	font-size: 2vmin;
	color: #fff;
	font-weight: normal;
	background: #36aa79;
	padding: 0 1vmin;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.footprint-city-container .city2-right {
	width: 57%;
	float: right;
}
.footprint-city-container .city-news-list {
	margin-bottom: 2vmin;
}
.footprint-city-container .city-news-list li {
	padding-left: 2vmin;
	position: relative;
	height: 3.25vmin;
	line-height: 3.25vmin;
	font-size: 1.75vmin;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.footprint-city-container .city-news-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -0.25vmin;
	width: 0.5vmin;
	height: 0.5vmin;
	border-radius: 50%;
	overflow: hidden;
	background: #42ae83;
}
.footprint-city-container .pic-list {
	margin-bottom: 3vmin;
	width: 100%;
}
.footprint-city-container .pic-list li {
	width: 30.7%;
	margin-right: 3.95%;
	float: left;
}
.footprint-city-container .pic-list li:nth-of-type(3n) {
	margin-right: 0;
}
.footprint-city-container .pic-list li .pic {
	width: 100%;
	height: 9.5vmin;
	overflow: hidden;
	position: relative;
}
.footprint-city-container .pic-list li .pic img {
	position: absolute;
	width: auto;
	min-width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.footprint-city-container .pic-list li h2 {
	height: 2.5vmin;
	line-height: 2.5vmin;
	background: #36aa79;
	text-align: center;
	font-size: 1.33vmin;
	color: #fff;
	padding: 0 1vmin;
	font-weight: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@keyframes map-cloud-wave {
	0% {
		left: -20%;
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		left: 110%;
	}
}
@media screen and (orientation:portrait) {
	.footprint-nav-container {
		bottom: -25vmin;
		height: 21vmin;
	}
	.footprint-nav-container.show-nav {
		bottom: 15vmin;
	}
	.footprint-nav-container .nav li {
		width: 12vmin;
		height: 13.3vmin;
	}
	.footprint-nav-container .nav li a {
		padding: 1vmin;
	}
	.footprint-nav-container .nav li a::before {
		top: -0.75vmin;
		right: 8.5vmin;
		width: 8.25vmin;
		height: 11vmin;
	}
	.footprint-nav-container .nav li a span {
		height: 10vmin;
		font-size: 3.6vmin;
	}
	/*  */
	.main-map-container .slogan-box {
		height: 10vmin;
		margin-bottom: 0.25vmin;
	}
	.main-map-container .describe-box {
		display: none;
		width: 120vmin;
		font-size: 3.6vmin;
		line-height: 177.78%;
	}
	.main-map-container .describe-box b {
		font-size: 4vmin;
	}
	.main-map-container .map-box {
		height: 70vmin;
		width: 120vmin;
	}
	.main-map-container .map-bg {
		width: 120vmin;
	}
	.main-map-container .city-box {
		height: 4.8vmin;
		width: 14vmin;
	}
	.main-map-container .city-box .btn {
		height: 4.8vmin;
		width: 14vmin;
		line-height: 4.8vmin;
		border-radius:  2.4vmin;
		font-size: 3.6vmin;
	}
	.main-map-container .go-btn {
		width: 45vmin;
	}
	.footprint-city-container .headline-box {
		width: 120vmin;
		margin: 0 auto 3vmin;
		padding-left: 22vmin;
	}
	.footprint-city-container .headline-box .landmark {
		width: 12vmin;
		height: 12vmin;
	}
	.footprint-city-container .headline-box label {
		left: 13.6vmin;
		top: 1vmin;
		width: 4.8vmin;
		height: 10vmin;
		line-height: 3vmin;
		font-size: 3.6vmin;
		border-radius: 0.4vmin;
	}
	.footprint-city-container .headline-box h1 {
		height: 6vmin;
		line-height: 6vmin;
		font-size: 4vmin;
		margin-bottom: 1.2vmin;
	}
	.footprint-city-container .headline-box p {
		height: 4.2vmin;
		line-height: 4.2vmin;
		font-size: 3.6vmin;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}
	.footprint-city-container .big-pic-list {
		margin-bottom: 3vmin;
		width: 120vmin;
	}
	.footprint-city-container .big-pic-list li .pic {
		height: 15vmin;
	}
	.footprint-city-container .big-pic-list li h2 {
		height: 4.8vmin;
		line-height: 4.8vmin;
		font-size: 3.6vmin;
	}
	.footprint-city-container .city-news-list2 {
		width: 120vmin;
	}
	.footprint-city-container .city-news-list2 li {
		padding-left: 3.2vmin;
		height: 5.6vmin;
		line-height: 5.6vmin;
		font-size: 3.6vmin;
	}
	.footprint-city-container .city-news-list2 li::before {
		margin-top: -0.6vmin;
		width: 1.2vmin;
		height: 1.2vmin;
	}
	.footprint-city-container .place-box {
		height: 17.5vmin;
		width: 100vmin;
		margin-top: 8.25vmin;
	}
	.footprint-city-container .place-near-box {
		height: 17.5vmin;
		width: 100vmin;
		margin-top: 7.5vmin;
	}
	.footprint-city-container .city2-container {
		width: 120vmin;
	}
	.footprint-city-container .big-pic-box .pic {
		height: 29.2vmin;
	}
	.footprint-city-container .city-news-list li {
		padding-left: 3vmin;
		height: 5.2vmin;
		line-height: 5.2vmin;
		font-size: 3.6vmin;
	}
	.footprint-city-container .city-news-list li:last-of-type {
		display: none;
	}
	.footprint-city-container .city-news-list li::before {
		margin-top: -0.4vmin;
		width: 0.8vmin;
		height: 0.8vmin;
	}
	.footprint-city-container .pic-list li .pic {
		height: 11.4vmin;
	}
	.footprint-city-container .pic-list li h2 {
		height: 4.8vmin;
		line-height: 4.8vmin;
		font-size: 3.6vmin;
	}
}
/* ---- fourthBox Style ---- */
#mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(4){
	width: 133.5vmin; /* 1964px; */
	z-index: 60;
}
.fourthBox {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: calc(133.5vmin + 2px); /* 11602px; */
	background:
	url(../img/fourth-bg.jpg) left top / 100% 100% no-repeat;
	z-index: 7;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.fourthBox .work {
	width: 12vmin;
	bottom: 4.75vmin;
	right: 51.5vmin;
}
.fourthBox .tree {
	width: 11.5vmin;
	bottom: 6.5vmin;
	right: 35vmin;
}
.fourthBox .man {
	width: 8vmin;
	bottom: 4.75vmin;
	right: 12vmin;
}
.fourthBox .woman {
	width: 7.75vmin;
	bottom: 4vmin;
	right: 1.5vmin;
}
.fourthBox .slogan-box {
	width: 100%;
	line-height: 0;
	text-align: center;
	height: 10.75vmin;
	margin-bottom: 3.75vmin;
}
.fourthBox .slogan-box img {
	height: 100%;
	width: auto;
}
.video-container {
	height: 40vmin;
	position: relative;
	width: 100%;
	padding-left: 21.25vmin;
	display: flex;
	justify-content: center;
	align-items: center;
}
.fourthBox .island {
	position: absolute;
	left: 0;
	bottom: -0.25vmin;
	width: 57.75vmin;
}
.fourthBox .c-baby {
	position: absolute;
	left: 12.5vmin;
	top: -1.25vmin;
	width: 26.25vmin;
}
.video-container .video-box {
	width: 69.75vmin;
	position: relative;
}
.video-container .video-box .video {
	width: 100%;
	height: 40vmin;
	border: 0.75vmin solid #45a179;
	border-radius: 3vmin;
	background: #000000;
	position: relative;
	z-index: 2;
}
.video-container .video-box::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: -1.25vmin;
	width: 95.3%;
	height: 100%;
	border-radius: 2.75vmin;
	background: rgba(112, 200, 162, 0.81);
}
.video-container .video-box .video-js {
	width: 100%;
	height: 100%;
	position: relative;
}
.video-container .video-box video{
	position: absolute;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: auto !important;
	height: 100% !important;
	object-fit: fill;
	border-radius: 2.25vmin;
}
@media screen and (orientation:portrait) {
	.fourthBox .slogan-box {
		transform: scale(1.15);
		margin-bottom: 4vmin;
	}
	.video-container {
		transform: scale(1.15);
	}
}
/* ---- fifthBox Style ---- */
/* #mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(5){
	width: 112.5vmin; 
	z-index: 40;
} */
.fifthBox {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: calc(112.5vmin + 1px); /* 11602px; */
	background:
	url(../img/fifth-bg.jpg) left top / 100% 100% no-repeat;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.fifthBox .riding{
	width: 13vmin;
	left: 30.5vmin;
	bottom: 4.5vmin;
}
.fifthBox .shrub {
	width: 10vmin;
	right: 44.75vmin;
	bottom: 2vmin;
}
.fifthBox .scenery-container {
	position: absolute;
	width: 57.5vmin;
	right: -19.5vmin;
	bottom: 3.25vmin;
	height: 24.25vmin;
}
.fifthBox .waste-sorting {
	width: 21.25vmin;
	left: 0;
	bottom: 0;
}
.fifthBox .grass {
	width: 41.25vmin;
	right: 0;
	bottom: 0.5vmin;
}
.fifthBox .building {
	width: 25.5vmin;
	right: 10vmin;
	bottom: 3vmin;
}
.fifthBox .slogan-box {
	width: 100%;
	line-height: 0;
	text-align: center;
	height: 10.25vmin;
	margin-bottom: 2vmin;
}
.fifthBox .slogan-box img {
	height: 100%;
	width: auto;
}
.proposal-book-container {
	width: 70.75vmin;
	border: 1px solid #267b5c;
	border-radius: 5vmin;
	background: #45a179;
	padding: 1.25vmin;
	position: relative;
}
.proposal-book-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: 2.75vmin;
	width: 18.25vmin;
	height: 0.5vmin;
	border-radius: 0.25vmin;
	background: #45a179;
	overflow: hidden;
	line-height: 0;
	z-index: 1;
}
.proposal-book-side {
	left: -1.5vmin;
	top: 10.75vmin;
	z-index: -1;
}
.proposal-book-side,
.proposal-book-side::before,
.proposal-book-side::after {
	position: absolute;
	width: 1.75vmin;
	height: 4.5vmin;
	background: #56b58b;
	border-radius: 0.75vmin 0 0 0.75vmin;
}
.proposal-book-side::before,
.proposal-book-side::after {
	content: "";
	left: 0;
}
.proposal-book-side::before {
	top: -5.25vmin;
}
.proposal-book-side::after {
	bottom: -5.25vmin;
}
.proposal-book-container .proposal-book {
	width: 100%;
	border: 1px solid #267b5c;
	border-radius: 3.5vmin;
	background: #fff;
	padding: 3.5vmin 4vmin 15.5vmin;
	position: relative;
}
.proposal-book-container .proposal-book h1 {
	height: 3.25vmin;
	line-height: 3.25vmin;
	color: #45a179;
	font-size: 2.75vmin;
	font-weight: bold;
	text-align: center;
}
.proposal-book-container .proposal-book p {
	line-height: 2.5vmin;
	font-size: 1.33vmin;
	color: #333333;
}
.proposal-book-container .proposal-book .proposal {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	flex-wrap: wrap;
	margin-bottom: 0.25vmin;
}
.proposal-book-container .proposal-book .proposal li {
	width: 45.2%;
	margin: 1.5vmin 1.25vmin 0;
	height: 3.25vmin;
	padding: 0.25vmin 1.25vmin;
	border-radius: 1.5vmin;
	background: linear-gradient(to right, #3b9773, #60bf95);
	font-size: 1.75vmin;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
}
.proposal-book-container .qrcode-box {
	position: absolute;
	left: -1.25vmin;
	bottom: 7vmin;
	height: 8.25vmin;
	width: 33.5vmin;
	padding: 0 2vmin 0 16.5vmin;
	background: #b0d8ad;
	border-radius: 0 4vmin 4vmin 0;
	display: flex;
	justify-content: left;
	align-items: center;
	line-height: 2vmin;
	font-size: 1.75vmin;
	color: #2a7353;
	font-weight: bold;
}
.proposal-book-container .qrcode-box::before {
	content: "";
	position: absolute;
	left: 0;
	top: 100%;
	width: 0;
    height: 0;
    border-top: 0.75vmin solid #2d7c5b;
    border-left: 1.25vmin solid transparent;
}
.proposal-book-container .qrcode {
	position: absolute;
	left: 4.25vmin;
	top: -0.75vmin;
	width: 10vmin;
	height: 10vmin;
	background: #fff;
	box-shadow: 0.25vmin 0.25vmin 0.75vmin rgba(85, 179, 138, 0.38);
}
.proposal-book-container .qrcode img {
	width: 100%;
	height: 100%;
}
@media screen and (orientation:portrait) {
	/* #mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(5){
		width: 200vmin; 
		z-index: 30;
	} */
	.fifthBox {
		width: calc(200vmin + 1px); /* 11602px; */
	}
	.proposal-book-container {
		width: 150vmin;
		border-radius: 5vmin;
		padding: 1.25vmin;
	}
	.proposal-book-container .proposal-book {
		padding-bottom: 24vmin;
	}
	.proposal-book-container .proposal-book h1 {
		height: 6vmin;
		line-height: 6vmin;
		font-size: 4.4vmin;
	}
	.proposal-book-container .proposal-book p {
		line-height: 4.8vmin;
		font-size: 3.6vmin;
	}
	.proposal-book-container .proposal-book .proposal {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		align-content: flex-start;
		flex-wrap: wrap;
		margin-bottom: 0.25vmin;
	}
	.proposal-book-container .proposal-book .proposal li {
		height: 5vmin;
		line-height: 4.5vmin;
		padding: 0.25vmin 1.25vmin;
		border-radius: 2.5vmin;
		font-size: 3.6vmin;
	}
	.proposal-book-container .qrcode-box {
		left: -2.5vmin;
		bottom: 4vmin;
		height: 18vmin;
		width: 70vmin;
		padding: 0 2vmin 0 30vmin;
		border-radius: 0 9vmin 9vmin 0;
		line-height: 6vmin;
		font-size: 4vmin;
	}
	.proposal-book-container .qrcode-box::before {
		border-top: 1.5vmin solid #2d7c5b;
		border-left: 2.5vmin solid transparent;
	}
	.proposal-book-container .qrcode {
		left: 4.25vmin;
		top: -1vmin;
		width: 20vmin;
		height: 20vmin;
	}
}
/* ---- sixthBox Style ---- */
/* #mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(6){
	width: 144.75vmin; 
	z-index: 20;
} */
.sixthBox {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: calc(144.75vmin + 1px); /* 1737px; */
	background:
	url(../img/sixth-bg.jpg) left top / 100% 100% no-repeat;
	z-index: 3;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.sixthBox .windmill-left-left {
	width: 13.25vmin;
	height: 20.5vmin;
	left: 12.5vmin;
	bottom: 8.5vmin;
}
.sixthBox .windmill-left-right {
	width: 8vmin;
	height: 12.25vmin;
	left: 18.25vmin;
	bottom: 8.5vmin;
}
.sixthBox .windmill-left-right .leaf {
	animation-duration: 3s;
}
.sixthBox .windmill-right-left {
	width: 7.75vmin;
	height: 12.25vmin;
	right: 23.5vmin;
	bottom: 8.75vmin;
}
.sixthBox .windmill-right-right {
	width: 6.75vmin;
	height: 10.5vmin;
	right: 19.75vmin;
	bottom: 9.75vmin;
}
.sixthBox .windmill-right-right .leaf {
	animation-duration: 3s;
}
.sixthBox .charging {
	width: 47.5vmin;
	right: -19.5vmin;
	bottom: 3.75vmin;
}
.sixthBox .car-red {
	width: 7.5vmin;
	left: 34vmin;
	bottom: 6.75vmin;
}
.sixthBox .car-yellow {
	width: 7vmin;
	left: 71.25vmin;
	bottom: 2vmin;
}
.sixthBox .slogan-box {
	width: 100%;
	line-height: 0;
	text-align: center;
	height: 10.25vmin;
	margin-bottom: 2vmin;
}
.sixthBox .slogan-box img {
	height: 100%;
	width: auto;
}
@media screen and (orientation:portrait) {
	/* #mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(6){
		width: 200vmin; 
		z-index: 10;
	} */
	.sixthBox {
		width: calc(200vmin + 1px); /* 1737px; */
	}
}
/* ---- seventhBox Style ---- */
/* #mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(7){
	width: 110.5vmin; 
} */
.seventhBox {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: calc(110.5vmin + 1px); /* 1326px; */
	background:
	url(../img/seventh-bg.jpg) left top / 100% 100% no-repeat;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.seventhBox .windmill-left-left {
	width: 13vmin;
	height: 20.5vmin;
	left: 44.5vmin;
	bottom: 9.25vmin;
}
.seventhBox .windmill-left-right {
	width: 8vmin;
	height: 12.25vmin;
	left: 50vmin;
	bottom: 9.25vmin;
}
.seventhBox .windmill-left-right .leaf {
	animation-duration: 3s;
}
.seventhBox .windmill-midd-left {
	width: 13vmin;
	height: 20.5vmin;
	left: 58vmin;
	bottom: 10.25vmin;
}
.seventhBox .windmill-midd-right {
	width: 8vmin;
	height: 12.25vmin;
	left: 63.5vmin;
	bottom: 11vmin;
}
.seventhBox .windmill-midd-right .leaf {
	animation-duration: 3s;
}
.seventhBox .windmill-right-left {
	width: 13vmin;
	height: 20.5vmin;
	right: 1vmin;
	bottom: 0vmin;
}
.seventhBox .windmill-right-right {
	width: 8vmin;
	height: 12.25vmin;
	right: -1.5vmin;
	bottom: 0vmin;
}
.seventhBox .windmill-right-right .leaf {
	animation-duration: 3s;
}
.seventhBox .slogan-box {
	width: 100%;
	line-height: 0;
	text-align: center;
	height: 11.25vmin;
	margin-bottom: 1.25vmin;
}
.seventhBox .slogan-box img {
	height: 100%;
	width: auto;
}
.financial-media-container {
	width: 100%;
}
.financial-media-lists {
	float: right;
	width: 35.68vmin;
	height: 46vmin;
	overflow-y: auto;
}
.financial-media-lists li {
	margin-bottom: 1.5vmin;
}
.financial-media-lists li::after {
	clear: both;
	content: " ";
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
}
.financial-media-lists li .pic {
	width: 40.9%;
	float: left;
	height: 10.75vmin;
	position: relative;
	overflow: hidden;
}
.financial-media-lists li .pic img {
	position: absolute;
	width: auto;
	min-width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.financial-media-lists li h1.title {
	float: right;
	min-height: 10.75vmin;
	width: 50%;
	margin-right: 1.25vmin;
	display: flex;
	align-items: center;
	justify-content: left;
	font-size: 1.33vmin;
	line-height: 200%;
	color: #333;
}
.poster-swiper-container {
	position: relative;
	float: right;
	margin-right: 6.75vmin;
	width: 54vmin;
	height: 44.25vmin;
}
.poster-swiper-container .poster-swiper{
	position: relative;
	width: 100%;
	margin: 0 auto;
}
.poster-swiper-container .swiper-container {
	padding: 2.5vmin 2.5vmin 3.25vmin;
}
.poster-swiper-container  .swiper-slide {
	position: relative;
	width: 21.75vmin;
	height: 38.5vmin;
	box-shadow: 0 0.75vmin 2.5vmin rgba(0, 0, 0, 0.5);
	/* opacity: 0; */
}
.poster-swiper-container  .swiper-slide .pic {
	width: 21.75vmin;
	height: 38.5vmin;
	box-shadow: 0 0.75vmin 2.5vmin rgba(0, 0, 0, 0.5);
	position: relative;
}
.poster-swiper-container  .swiper-slide img{
	display:block;
	width: 100%;
	height: 100%;
}
.poster-swiper-container  .swiper-slide .pic .num {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 5vmin;
	color: #fff;
	font-weight: bold;
}
.poster-swiper-container .poster-prev,
.poster-swiper-container .poster-next {
	position: absolute;
	top: 50%;
	margin-top: -2.25vmin;
	width: 2.5vmin;
	height: 4.5vmin;
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}
.poster-swiper-container .poster-prev {
	right: 100%;
	background-image: url(../img/seventh-poster-prev.png);
}
.poster-swiper-container .poster-next {
	left: 100%;
	background-image: url(../img/seventh-poster-next.png);
}
@media screen and (orientation:portrait) {
	/* #mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(7){
		width: 150vmin; 
	} */
	.seventhBox {
		width: calc(150vmin + 1px); /* 1326px; */
	}
	.seventhBox .slogan-box {
		height: 11.25vmin;
		margin-bottom: 1.25vmin;
	}
	.financial-media-container {
		width: 100%;
	}
	.financial-media-lists {
		width: 64vmin;
		height: 56vmin;
	}
	.financial-media-lists li {
		float: left;
		width: 48.5%;
		margin-bottom: 4vmin;
	}
	.financial-media-lists li:nth-of-type(2n) {
		float: right;
	}
	.financial-media-lists li .pic {
		width: 100%;
		float: auto;
		height: auto;
		margin-bottom: 1.5vmin;
	}
	.financial-media-lists li .pic img {
		position: relative;
		width: 100%;
		height: auto;
		left: auto;
		top: auto;
		transform: translate(0, 0);
	}
	.financial-media-lists li h1.title {
		float: none;
		height: 4.8vmin;
		min-height: unset;
		width: 100%;
		margin-right: 0vmin;
		display: block;
		font-size: 3.6vmin;
		line-height: 4.8vmin;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.poster-swiper-container {
		margin-right: 8vmin;
		width: 68vmin;
		height: 56vmin;
	}
	.poster-swiper-container .swiper-container {
		padding: 2.5vmin 2.5vmin 3.25vmin;
	}
	.poster-swiper-container  .swiper-slide {
		width: 28vmin;
		height: 51vmin;
		box-shadow: 0 0.75vmin 2.5vmin rgba(0, 0, 0, 0.5);
		/* opacity: 0; */
	}
	.poster-swiper-container  .swiper-slide .pic {
		width: 22vmin;
		height: 42vmin;
	}
	.poster-swiper-container .poster-prev,
	.poster-swiper-container .poster-next {
		margin-top: -3vmin;
		width: 3.6vmin;
		height: 6vmin;
	}
}
/* ---- eighthBox Style ---- */
/* #mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(8){
	width: 158.25vmin; 
} */
.eighthBox {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: calc(158.25vmin + 1px); /* 1898px; */
	background:
	url(../img/eigth-bg.jpg) left top / 100% 100% no-repeat;
	z-index: 9;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.eighthBox .scenery-container {
	position: absolute;
	left: 1px;
	bottom: 3.75vmin;
	width: 32vmin;
	height: 5vmin;
}
.eighthBox .building {
	width: 21vmin;
	left: 4.75vmin;
	bottom: 0.75vmin;
}
.eighthBox .grass {
	width: 32vmin;
	left: 0;
	bottom: 0;
}
.eighthBox .slogan-box {
	width: 100%;
	line-height: 0;
	text-align: center;
	height: 11.25vmin;
	margin-bottom: 1.25vmin;
}
.eighthBox .slogan-box img {
	height: 100%;
	width: auto;
}
.bullet-box-container {
	width: 75%;
	max-width: 1200px;
	height: 22.25vmin;
	overflow: hidden;
	position: relative;
	opacity: 0;
	transform: translate(50%, 0);
	animation: right-out 0.5s ease-in-out forwards;
}
.swiper-slide-active .bullet-box-container {
	animation: right-in 2s ease-in-out forwards;
	animation-delay: 0.5s;
}
.bullet-box-container  .bullet-wrapper {
	position: absolute;
}
.qrcode-container{
	width: 75%;
	max-width: 1200px;
	height: 13.5vmin;
	margin-top: 7vmin;
	position: relative;
	background: #7bd6ae;
	padding-left: 46.75vmin;
	display: flex;
	justify-content: left;
	align-items: center;
	align-content: center;
	opacity: 0;
	transform: translate(0, 50%);
	animation: bottom-out 0.5s ease-in-out forwards;
}
.swiper-slide-active .qrcode-container {
	animation: bottom-in 1s ease-in-out forwards;
	animation-delay: 0.5s;
}
.qrcode-container .topic-box {
	position: absolute;
	left: 0;
	top: 0;
	width: 43.25vmin;
	height: 100%;
	background: #45a179;
	padding: 0 2.5vmin;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.qrcode-container .topic-box h1,
.qrcode-container .topic-box h2 {
	width: 28.75vmin;
	color: #fff;
	font-weight: bold;
	text-align: center;
}
.qrcode-container .topic-box h1 {
	height: 3vmin;
	line-height: 3vmin;
	font-size: 2.5vmin;
	margin-bottom: 1.5vmin;
}
.qrcode-container.topic-box h1 img {
	width: 3vmin;
	height: auto;
	margin-right: 1vmin;
}
.qrcode-container .topic-box h2 {
	height: 3.5vmin;
	line-height: 3.5vmin;
	font-size: 1.5vmin;
	background: #5ecc9c;
}
.qrcode-container .phone-box{
	position: absolute;
	left: 3.75vmin;
	top: -3.25vmin;
	width: 10.75vmin;
	height: 21.5vmin;
}
.qrcode-container .phone-box::before {
	content: "";
	position: absolute;
	left: 0vmin;
	top: 0vmin;
	width: 100%;
	height: 100%;
	border-radius: 1.75vmin;
	background: rgba(0, 0, 0, 0.15);
	box-shadow: 1vmin 1vmin 3vmin rgba(0, 0, 0, 0.25);
}
.qrcode-container .phone-box .phone {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	padding: 4.6% 6.9% 4.6% 5.4%;
	background: url(../img/eigth-phone.png) center center / 100% 100% no-repeat;
}
.qrcode-container .phone-box .phone::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 1;
	width: 5.25vmin;
	height: 0.75vmin;
	background: url(../img/eigth-phone-fringe.png) center center / 100% 100% no-repeat;
}
.qrcode-container .phone-box .pic {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius:1vmin 1vmin 0.75vmin 0.75vmin;
	overflow: hidden;
}
.qrcode-container .phone-box .pic img {
	position: absolute;
	width: auto;
	min-width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.qrcode-container .qrcode {
	width: 20vmin;
	margin-right: 2.5vmin;
	display: flex;
	justify-content: left;
	align-items: center;
}
.qrcode-container .qrcode img {
	width: 10vmin;
	height: 10vmin;
	box-shadow: 0.25vmin 0.25vmin 0.75vmin rgba(85, 179, 138, 0.38);
	margin-right: 1.75vmin;
}
.qrcode-container .qrcode p{
	line-height: 2.5vmin;
	font-size: 1.5vmin;
	color: #166d47;
}
@media screen and (orientation:portrait) {
	/* #mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(8){
		width: 180vmin; 
	} */
	.eighthBox {
		width: calc(180vmin + 1px); /* 1898px; */
	}
	.eighthBox .slogan-box {
		height: 11.25vmin;
		margin-bottom: 1.25vmin;
	}
	.bullet-box-container {
		width: 90%;
		height: 22.25vmin;
	}
	.qrcode-container{
		width: 90%;
		height: 26vmin;
		margin-top: 7vmin;
		padding-left: 84vmin;
		justify-content: center;
	}
	.qrcode-container .topic-box {
		width: 80vmin;
		padding: 0 2.5vmin;
	}
	.qrcode-container .topic-box h1,
	.qrcode-container .topic-box h2 {
		width: 64vmin;
	}
	.qrcode-container .topic-box h1 {
		height: 4.8vmin;
		line-height: 4.8vmin;
		font-size: 4vmin;
	}
	.qrcode-container .topic-box h1 img {
		width: 4vmin;
	}
	.qrcode-container .topic-box h2 {
		height: 6vmin;
		line-height: 6vmin;
		font-size: 3.6vmin;
	}
	.qrcode-container .phone-box{
		left: -2vmin;
		top: -8vmin;
		width: 20vmin;
		height: 40vmin;
	}
	.qrcode-container .qrcode {
		width: 20vmin;
		margin-right: 2.5vmin;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	.qrcode-container .qrcode img {
		width: 16vmin;
		height: 16vmin;
		box-shadow: 0.25vmin 0.25vmin 0.75vmin rgba(85, 179, 138, 0.38);
		margin-right: 1.75vmin;
	}
	.qrcode-container .qrcode p{
		width: 100%;
		height: 6vmin;
		line-height: 6vmin;
		font-size: 3.2vmin;
	}
	.qrcode-container .qrcode p span {
		display: none;
	}
}

/* ---- xxFourthBox Style ---- */
#mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(4){
	width: 133.33vmin; 
	z-index: 60;
}
.xxFourthBox {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: calc(133.33vmin + 2px); /* 11602px; */
	background:
	url(../img/xx-fourth-bg.jpg) left top / 100% 100% no-repeat;
	z-index: 7;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.xxFourthBox .work {
	width: 12vmin;
	bottom: 4.75vmin;
	right: 51.5vmin;
}
.xxFourthBox .tree {
	width: 11.5vmin;
	bottom: 6.5vmin;
	right: 35vmin;
}
.xxFourthBox .man {
	width: 8vmin;
	bottom: 4.75vmin;
	right: 12vmin;
}
.xxFourthBox .woman {
	width: 7.75vmin;
	bottom: 4vmin;
	right: 1.5vmin;
}
.xxFourthBox .windmill-left-left {
	width: 13.25vmin;
	height: 20.5vmin;
	left: 16.5vmin;
	bottom: 6.5vmin;
}
.xxFourthBox .windmill-left-right {
	width: 8vmin;
	height: 12.25vmin;
	left: 22.25vmin;
	bottom: 6.5vmin;
}
.xxFourthBox .windmill-left-right .leaf {
	animation-duration: 3s;
}
.xxFourthBox .slogan-box {
	width: 100%;
	line-height: 0;
	text-align: center;
	height: auto;
	margin-bottom: 3.25vmin;
	animation: bounceOut 0.5s linear forwards;
	opacity: 0;
}
.swiper-slide-active .xxFourthBox .slogan-box {
	animation: bounceIn 2s ease-in-out forwards;
}
.xxFourthBox .slogan-box img {
	height: auto;
	width: 70%;
	max-width: 1200px;
}
.xxFourthBox .island {
	position: absolute;
	left: 0;
	bottom: -0.25vmin;
	width: 57.75vmin;
}
.xxFourthBox .c-baby {
	position: absolute;
	left: 12.5vmin;
	top: -1.25vmin;
	width: 26.25vmin;
}
.spokesman-layout {
	width: 75%;
	margin: 0 auto;
	max-width: 1200px;
}
.spokesman-video-list {
	margin-bottom: 4.5vmin;
}
.spokesman-video-list li {
	width: 48.5%;
	float: left;
	position: relative;
	/* padding:0 1.75vmin 0 25vmin; */
	padding:0 0 0 23.25vmin;
	/* background: #45a179; */
	border-radius: 0.75vmin;
	overflow: hidden;
	min-height: 15.25vmin;
	opacity: 0;
	transition: 1s ease-in-out;
}
.spokesman-video-list li:nth-of-type(2n+1) {
	transform: translate(-50%, -50%);
	animation: top-left-out 0.5s ease-in-out forwards;
}
.spokesman-video-list li:nth-of-type(2n) {
	transform: translate(50%, -50%);
	animation: top-right-out 0.5s ease-in-out forwards;
}
.swiper-slide-active .spokesman-video-list li:nth-of-type(2n+1) {
	animation: top-left-in 1s ease-in-out forwards;
	animation-delay: 0.5s;
}
.swiper-slide-active .spokesman-video-list li:nth-of-type(2n) {
	animation: top-right-in 1s ease-in-out forwards;
	animation-delay: 0.5s;
}
.spokesman-video-list li:nth-of-type(2n) {
	float: right;
}
.spokesman-video-list li .pic {
	position: absolute;
	top: 0;
	left: 0;
	width: 23.25vmin;
	height: 100%;
	overflow: hidden;
	border-radius: 0.75vmin 0 0 0.75vmin;
}
.spokesman-video-list li .pic img{
	position: absolute;
	width: auto;
	min-width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.spokesman-video-list li .pic::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	margin: -2.75vmin auto 0;
	width: 5.5vmin;
	height: 5.5vmin;
	background: url(../img/icon-play.png) center center / 100% 100% no-repeat;
	z-index: 1;
}
.spokesman-video-list li .con{
	position: relative;
	min-height: 100%;
	width: 100%;
	padding:  1.5vmin 1.75vmin 1.75vmin;
	background: #45a179;
	border-radius: 0 0.75vmin 0.75vmin 0;
}
.spokesman-video-list li h1 {
	height: 2.75vmin;
	line-height: 2.75vmin;
	font-size: 2.25vmin;
	color: #fff;
	margin-bottom: 1.25vmin;
}
.spokesman-video-list li h1 span {
	display: inline-block;
	margin-left: 1.25vmin;
	font-size: 1.5vmin;
	font-weight: normal;
}
.spokesman-video-list li .con p {
	height: 8.25vmin;
	line-height: 2.75vmin;
	position: relative;
	padding: 0 2.5vmin;
	font-size: 1.5vmin;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.spokesman-video-list li .con p::before,
.spokesman-video-list li .con p::after {
	content: "";
	position: absolute;
	width: 1.5vmin;
	height: 1.25vmin;
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.spokesman-video-list li .con p::before {
	top: 0.5vmin;
	left: 0;
	background-image: url(../img/quote-left.png);
}
.spokesman-video-list li .con p::after {
	right: 0;
	bottom: 0.5vmin;
	background-image: url(../img/quote-right.png);
}
.spokesman-swiper-container {
	position: relative;
	padding: 0 4.75vmin;
	opacity: 0;
	transform: translate(0, 50%);
	animation: bottom-out 0.5s ease-in-out forwards;
}
.swiper-slide-active .spokesman-swiper-container {
	animation: bottom-in 1s ease-in-out forwards;
	animation-delay: 0.5s;
}
.spokesman-swiper .swiper-slide {
	padding: 0 1vmin;
}
.spokesman-swiper .swiper-slide .pic {
	width: 100%;
	height: auto;
	line-height: 0;
	overflow: hidden;
	border-radius: 50%;
	border: 0.75vmin solid #ededed;
	background: #ededed;
	margin-bottom: 2.5vmin;
	transition: .3s ease-in-out;
}
.spokesman-swiper .swiper-slide:hover .pic {
	border-color: #45a179;
}
.spokesman-swiper .swiper-slide .pic img {
	width: 100%;
	height: auto;
}
.spokesman-swiper .swiper-slide .con {
	height: 7.75vmin;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	background: #ededed;
	position: relative;
	padding: 0.5vmin;
	transition: .3s ease-in-out;
}
.spokesman-swiper .swiper-slide:hover .con {
	background: #45a179;
}
.spokesman-swiper .swiper-slide .con::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-1.25vmin + 1px);
	width: 0;
	height: 0;
	margin: 0 auto;
	border-left: 0.75vmin solid transparent;
	border-right: 0.75vmin solid transparent;
	border-bottom: 1.25vmin solid #ededed;
	transition: .3s ease-in-out;
}
.spokesman-swiper .swiper-slide:hover .con::before {
	border-bottom: 1.25vmin solid #45a179;
}
.spokesman-swiper .swiper-slide .con h2 {
	width: 100%;
	height: 3.25vmin;
	line-height: 3.25vmin;
	font-size: 2.25vmin;
	color: #333;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: .3s ease-in-out;
}
.spokesman-swiper .swiper-slide .con h2 a{
	color: #333;
	transition: .3s ease-in-out;
}
.spokesman-swiper .swiper-slide .con p {
	width: 100%;
	height: 2.25vmin;
	line-height: 2.25vmin;
	font-size: 1.5vmin;
	color: #333;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: .3s ease-in-out;
}
.spokesman-swiper .swiper-slide:hover .con h2,
.spokesman-swiper .swiper-slide:hover .con h2 a,
.spokesman-swiper .swiper-slide:hover .con p {
	color: #fff;
}
.spokesman-next,
.spokesman-prev {
	position: absolute;
	top: 8.25vmin;
	width: 2.5vmin;
	height: 4.5vmin;
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}
.spokesman-prev {
	left: 0;
	background-image: url(../img/swiper-green-prev.png);
}
.spokesman-next {
	right: 0;
	background-image: url(../img/swiper-green-next.png);
}
@media screen and (orientation:portrait) {
	.xxFourthBox .slogan-box {
		transform: scale(1.15);
		margin-bottom: 4vmin;
	}
	.video-container {
		transform: scale(1.15);
	}
}

/* ---- xxFifthBox Style ---- */
#mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(5){
	width: 133.33vmin; /* 1737px; */
	z-index: 20;
}
.xxFifthBox {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: calc(133.33vmin + 1px); /* 1737px; */
	background:
	url(../img/xx-fifth-bg.jpg) left top / 100% 100% no-repeat;
	z-index: 3;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}

.xxFifthBox .windmill-right-left {
	width: 7.75vmin;
	height: 12.25vmin;
	right: 38.2vmin;
	bottom: 6.75vmin;
}
.xxFifthBox .windmill-right-right {
	width: 6.75vmin;
	height: 10.5vmin;
	right: 35vmin;
	bottom: 7.75vmin;
}
.xxFifthBox .windmill-right-right .leaf {
	animation-duration: 3s;
}
.xxFifthBox .charging {
	width: 47.5vmin;
	right: 0vmin;
	bottom: 3.75vmin;
}
.xxFifthBox .car-red {
	width: 7.5vmin;
	left: 34vmin;
	bottom: 6.75vmin;
}
.xxFifthBox .car-yellow {
	width: 7vmin;
	left: 71.25vmin;
	bottom: 2vmin;
}
.xxFifthBox .slogan-box {
	width: 100%;
	line-height: 0;
	text-align: center;
	height: 10.25vmin;
	margin-bottom: 2vmin;
	animation: bounceOut 0.5s linear forwards;
	opacity: 0;
}
.swiper-slide-active .xxFifthBox .slogan-box {
	animation: bounceIn 2s ease-in-out forwards;
}
.xxFifthBox .slogan-box img {
	height: 100%;
	width: auto;
}
.media-pic-container {
	width: 75%;
	max-width: 1200px;
	position: relative;
	z-index: 1;
	opacity: 0;
	transform: translate(0, -50%);
	animation: top-out 1s ease-in-out forwards;
}
.swiper-slide-active .media-pic-container {
	animation: top-in 1s ease-in-out forwards;
	animation-delay: 0.5s;
}
.media-pic-container li {
	float: left;
	width: 47.8%;
	background: #fff;
	padding: 1.25vmin 0 1.75vmin;
	margin-bottom: 2.5vmin;
}
.media-pic-container li:nth-last-of-type(1),
.media-pic-container li:nth-last-of-type(2) {
	margin-bottom: 0;
}
.media-pic-container li:nth-of-type(2n) {
	float: right;
}
.media-pic-container li .title-box {
	position: relative;
	height: 3.25vmin;
	margin-bottom: 1.25vmin;
}
.media-pic-container li .title-box h1 {
	position: absolute;
	width: 100%;
	top: 0;
	left: -1.5vmin;
	height: 3.25vmin;
	line-height: 0;
	background: #e5e5e5;
	font-size: 1.75vmin;
	color: #333;
	font-weight: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.media-pic-container li .title-box h1 label {
	display: inline-block;
	height: 3.25vmin;
	line-height: 3.25vmin;
	background: #45a179;
	color: #fff;
	font-size: 1.75vmin;
	padding: 0 1.5vmin;
	margin-right: 0.75vmin;
	font-weight: bold;
}
.media-pic-container li .title-box h1 a {
	line-height: 3.25vmin;
}
.media-pic-container li .pic {
	float: left;
	width: 24.9%;
	height: 7.5vmin;
	margin-left: 3.5%;
	overflow: hidden;
	position: relative;
}
.media-pic-container li .pic img {
	position: absolute;
	width: auto;
	min-width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.media-pic-container li .con {
	float: right;
	margin-right: 3.5%;
	width: 64.5%;
	min-height: 7.5vmin;
	display: flex;
	justify-content: left;
	align-items: center;
	line-height: 200%;
	font-size: 1.25vmin;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.media-pic-container li .con a {
	color: #45a179;
	display: inline-block;
}
.media-news-list {
	margin-top: 2.5vmin;
	width: 101.25vmin;
	opacity: 0;
	transform: translate(0, 50%);
	animation: bottom-out 1s ease-in-out forwards;
}
.swiper-slide-active .media-news-list {
	animation: bottom-in 1s ease-in-out forwards;
	animation-delay: 0.5s;
}
.media-news-list li {
	width: 49%;
	float: left;
	height: 3.15vmin;
	line-height: 3.25vmin;
	padding-left: 2vmin;
	font-size: 1.75vmin;
	color: #333;
	position: relative;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.media-news-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -0.4vmin;
	width: 0.75vmin;
	height: 0.75vmin;
	border-radius: 50%;
	background: #42ae83;
}
.media-news-list li:nth-of-type(2n) {
	float: right;
}
@media screen and (orientation:portrait) {
	/* #mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(5){
		width: 200vmin; 
		z-index: 10;
	}
	.sixthBox {
		width: calc(200vmin + 1px);
	} */
	.media-pic-container li .title-box {

		height: 6vmin;
		margin-bottom: 2.5vmin;
	}
	.media-pic-container li .title-box h1 {
		height: 6vmin;
		font-size: 4vmin;
		left: -4vmin;
	}
	.media-pic-container li .title-box h1 label {
		height: 6vmin;
		line-height:6vmin;
		font-size: 4vmin;
	}
	.media-pic-container li .title-box h1 a {
		line-height: 6vmin;
	}
	.media-pic-container li .pic {
		width: 33%;
		height: 15vmin;
	}
	.media-pic-container li .con {
		width: 56%;
		margin-top: 2.5vmin;
		height: 10vmin;
		display: block;
		overflow: hidden;
		line-height: 4.8vmin;
		font-size: 3.6vmin;
		overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	}
	.media-pic-container li .con a {
		color: #45a179;
	}
	.media-news-list {
		display: none;
	}
}
/* ---- xxSixthBox Style ---- */
#mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(6){
	width: 133.33vmin; /* 1737px; */
	z-index: 20;
}
.xxSixthBox {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: calc(133.33vmin + 1px); /* 1737px; */
	background:
	url(../img/xx-six-bg.jpg) left top / 100% 100% no-repeat;
	z-index: 3;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.xxSixthBox .man {
	width: 8vmin;
	bottom: 4.75vmin;
	left: 20vmin;
}
.xxSixthBox .woman {
	width: 7.75vmin;
	bottom: 4vmin;
	left: 31.5vmin;
}
.xxSixthBox .riding{
	width: 13vmin;
	left: 99.25vmin;
	bottom: 4.5vmin;
}
.xxSixthBox .tree{
	width: 13.25vmin;
	right: -1.5vmin;
	bottom: 6.75vmin;
}
.xxSixthBox .slogan-box {
	width: 100%;
	line-height: 0;
	text-align: center;
	height: 9.25vmin;
	margin-bottom: 0.75vmin;
	animation: bounceOut 0.5s linear forwards;
	opacity: 0;
}
.swiper-slide-active .xxSixthBox .slogan-box {
	animation: bounceIn 2s ease-in-out forwards;
}
.xxSixthBox .slogan-box img {
	height: 100%;
	width: auto;
}
.xxSixthBox .propose-box {
	width: 100%;
	height: 49.5vmin;
	text-align: center;
	line-height: 0;
	opacity: 0;
	transform: translate(0, 50%);
	animation: bottom-out 1s ease-in-out forwards;
}
.swiper-slide-active .propose-box {
	animation: bottom-in 1s ease-in-out forwards;
	animation-delay: 0.5s;
}
.xxSixthBox .propose-box img {
	height: 100%;
	width: auto;
}
/* ---- seventhBox Style ---- */
#mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(7){
	width: 133.33vmin; 
	z-index: 15;
}
.xxSeventhBox {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: calc(133.33vmin + 1px); 
	background:
	url(../img/xx-seventh-bg.jpg) left top / 100% 100% no-repeat;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.xxSeventhBox .waste-sorting {
	width: 20.75vmin;
	right: -2vmin;
	bottom: 2.25vmin;
}
.xxSeventhBox .planting-trees {
	width: 12vmin;
	left: 30vmin;
	bottom: 2.25vmin;
}
.xxSeventhBox .tree {
	width: 12vmin;
	right: 20.75vmin;
	bottom: 3.25vmin;
}
.xxSeventhBox .slogan-box {
	width: 100%;
	line-height: 0;
	text-align: center;
	height: 9.25vmin;
	margin-bottom: 2.5vmin;
	animation: bounceOut 0.5s linear forwards;
	opacity: 0;
}
.swiper-slide-active .xxSeventhBox .slogan-box {
	animation: bounceIn 2s ease-in-out forwards;
}
.xxSeventhBox .slogan-box img {
	height: 100%;
	width: auto;
}
.painting-activity-container {
	width: 75%;
	max-width: 1200px;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	margin-bottom: 4.25vmin;
}
.painting-activity-container .pic-box {
	height: 30vmin;
	width: 45.75vmin;
	position: relative;
	overflow: hidden;
	opacity: 0;
	transform: translate(-50%, 0);
	animation: left-out 1s ease-in-out forwards;
}
.swiper-slide-active .painting-activity-container .pic-box {
	animation: left-in 1s ease-in-out forwards;
	animation-delay: 0.5s;
}
.painting-activity-container .pic-box img {
	position: absolute;
	width: auto;
	min-width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.painting-activity-container .pic-box p {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	border-top: 1px solid rgba(68, 160, 120, 0.9);
	background: rgba(68, 160, 120, 0.7);
	text-align: center;
	padding: 0 1vmin;
	height: calc(4.5vmin + 1px);
	line-height: 4.5vmin;
	font-size: 1.75vmin;
	color: #fff;
}
.painting-activity-container .introduce-box {
	width: calc(100% - 45.75vmin);
	/* margin-top: 3vmin; */
	background: #44a078;
	padding: 3.75vmin 3.25vmin 4vmin;
	position: relative;
	opacity: 0;
	transform: translate(50%, 0);
	animation: right-out 1s ease-in-out forwards;
}
.swiper-slide-active .painting-activity-container .introduce-box {
	animation: right-in 1s ease-in-out forwards;
	animation-delay: 0.5s;
}
.painting-activity-container .introduce-box h1.title {
	position: absolute;
	left: 2.75vmin;
	top: -1.25vmin;
	height: 3.25vmin;
	border-radius: 0.5vmin;
	line-height: 3.25vmin;
	padding: 0 1.5vmin;
	font-size: 1.75vmin;
	color: #44a078;
	background: #fce744;
}
.painting-activity-container .introduce-box h1.title::after {
	content: "";
	position: absolute;
	left: 1.75vmin;
	top: 100%;
	width: 0;
	height: 0;
	border-left: 0.75vmin solid transparent;
	border-right: 0.75vmin solid transparent;
	border-top: 1vmin solid #fce744;
}
.painting-activity-container .introduce-box .con {
	line-height: 3vmin;
	height: 12vmin;
	font-size: 1.5vmin;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}
.painting-swiper-container {
	position: relative;
	width: 75%;
	max-width: 1200px;
	padding: 0 4.5vmin;
	opacity: 0;
	transform: translate(0, 50%);
	animation: bottom-out 0.5s ease-in-out forwards;
}
.swiper-slide-active .painting-swiper-container {
	animation: bottom-in 1s ease-in-out forwards;
	animation-delay: 0.5s;
}
.painting-swiper .swiper-slide {
	padding: 0 0.75vmin;
}
.painting-swiper .swiper-slide .pic {
	width: 100%;
	height: 11.75vmin;
	line-height: 0;
	position: relative;
	overflow: hidden;
	background: #ededed;
	transition: .3s ease-in-out;
}
.painting-swiper .swiper-slide .pic img {
	position: absolute;
	width: auto;
	min-width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.painting-next,
.painting-prev {
	position: absolute;
	top: 50%;
	margin-top: -2.25vmin;
	width: 2.5vmin;
	height: 4.5vmin;
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}
.painting-prev {
	left: 0;
	background-image: url(../img/swiper-green-prev.png);
}
.painting-next {
	right: 0;
	background-image: url(../img/swiper-green-next.png);
}
/* ---- seventhBox Style ---- */
#mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(8){
	width: 133.33vmin; 
	z-index: 10;
}
.xxEighthBox {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: calc(133.33vmin + 1px); 
	background:
	url(../img/xx-eighth-bg.jpg) left top / 100% 100% no-repeat;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.xxEighthBox .windmill-left-left {
	width: 13vmin;
	height: 20.5vmin;
	left: 20.5vmin;
	bottom: 5.4vmin;
}
.xxEighthBox .windmill-left-right {
	width: 8vmin;
	height: 12.25vmin;
	left: 26vmin;
	bottom: 5.8vmin;
}
.xxEighthBox .windmill-left-right .leaf {
	animation-duration: 3s;
}
.xxEighthBox .windmill-right-left {
	width: 13vmin;
	height: 20.5vmin;
	right: 1vmin;
	bottom: 0vmin;
}
.xxEighthBox .windmill-right-right {
	width: 8vmin;
	height: 12.25vmin;
	right: -1.5vmin;
	bottom: 0vmin;
}
.xxEighthBox .windmill-right-right .leaf {
	animation-duration: 3s;
}
.xxEighthBox .car-yellow {
	position: absolute;
	width: 9.5vmin;
	left: 55.5vmin;
	bottom: 2.75vmin;
	transform: scaleX(-1);
}
.xxEighthBox .car-yellow img {
	width: 100%;
	height: auto;
	transform: scaleX(-1);
}
.xxEighthBox .slogan-box {
	width: 100%;
	line-height: 0;
	text-align: center;
	height: 9.25vmin;
	margin-bottom: 4.5vmin;
	animation: bounceOut 0.5s linear forwards;
	opacity: 0;
}
.xxEighthBox .slogan-box img {
	height: 100%;
	width: auto;
}
.swiper-slide-active .xxEighthBox .slogan-box {
	animation: bounceIn 2s ease-in-out forwards;
}
.xx-poster-swiper-container {
	width: 75%;
	max-width: 1200px;
	position: relative;
	padding: 0 5vmin;
	opacity: 0;
	transform: translate(0, 50%);
	animation: bottom-out 0.5s ease-in-out forwards;
}
.swiper-slide-active .xx-poster-swiper-container {
	animation: bottom-in 1s ease-in-out forwards;
	animation-delay: 0.5s;
}
.xx-poster-swiper-container  .xx-poster-swiper {
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 2;
}
.xx-poster-swiper-container  .swiper-slide {
	position: relative;
	overflow: hidden;
	line-height: 0;
}
.xx-poster-swiper-container  .swiper-slide img {
	width: 100%;
	height: auto;
}
.xx-poster-pagination {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4.25vmin;
	bottom: -5vmin;
	line-height: 0;
	text-align: center;
}
.xx-poster-pagination .swiper-pagination-bullet {
	display: inline-block;
	height: 4.25vmin;
	width: auto;
	border-radius: 0.5vmin;
	line-height: 4.25vmin;
	padding: 0 2.25vmin;
	background: #45a179;
	margin: 0 1.5vmin;
	font-size: 2.25vmin;
	color: #fff;
	opacity: 1;
}
.xx-poster-pagination .swiper-pagination-bullet-active{
	background: #ffba00;
	font-weight: bold;
}
.xx-poster-next,
.xx-poster-prev {
	position: absolute;
	top: 50%;
	margin-top: -2.25vmin;
	width: 2.5vmin;
	height: 4.5vmin;
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}
.xx-poster-prev {
	left: 0;
	background-image: url(../img/swiper-green-prev.png);
}
.xx-poster-next {
	right: 0;
	background-image: url(../img/swiper-green-next.png);
}
/* ---- seventhBox Style ---- */
#mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(9){
	width: 133.33vmin; 
	z-index: 10;
}
.xxNinthBox {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: calc(133.33vmin + 1px); 
	background:
	url(../img/xx-ninth-bg.jpg) left top / 100% 100% no-repeat;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.xxNinthBox .building {
	width: 21vmin;
	right: -4.25vmin;
	bottom: 4vmin;
}
.xxNinthBox .grass {
	width: 32vmin;
	right: -10vmin;
	bottom: 3.25vmin;
}
.xxNinthBox .slogan-box {
	width: 100%;
	line-height: 0;
	text-align: center;
	height: 9.25vmin;
	margin-bottom: 5.5vmin;
	animation: bounceOut 0.5s linear forwards;
	opacity: 0;
}
.xxNinthBox .slogan-box img {
	height: 100%;
	width: auto;
}
.swiper-slide-active .xxNinthBox .slogan-box {
	animation: bounceIn 2s ease-in-out forwards;
}
.xx-video-container {
	height: 26.5vmin;
	position: relative;
	width: 75%;
	max-width: 1200px;
	padding-left: 41.25vmin;
}
.xx-video-container .island {
	position: absolute;
	left: 10.75vmin;
	bottom: -2.25vmin;
	width: 41.25vmin;
	height: auto;
	opacity: 0;
	transform: translate(-50%, 0);
	animation: left-out 1s ease-in-out forwards;
}
.xx-video-container .c-baby {
	position: absolute;
	left: 19.5vmin;
	top: -1.5vmin;
	width: 18.75vmin;
	height: auto;
	opacity: 0;
	transform: translate(-50%, 0);
	animation: left-out 1s ease-in-out forwards;
}
.swiper-slide-active .xx-video-container .island {
	animation: left-in 1s ease-in-out forwards;
	animation-delay: 0.5s;
}
.swiper-slide-active .xx-video-container .c-baby  {
	animation: left-in 1s ease-in-out forwards;
	animation-delay: 0.5s;
}
.xx-video-container .video-box {
	width: 46.75vmin;
	position: relative;
	opacity: 0;
	transform: translate(50%, 0);
	animation: right-out 1s ease-in-out forwards;
}
.swiper-slide-active .xx-video-container .video-box  {
	animation: right-in 1s ease-in-out forwards;
	animation-delay: 0.5s;
}
.xx-video-container .video-box .video {
	width: 100%;
	height: 26.5vmin;
	border: 0.75vmin solid #45a179;
	border-radius: 3vmin;
	background: #000000;
	position: relative;
	z-index: 2;
}
.xx-video-container .video-box::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: -1.25vmin;
	width: 95.3%;
	height: 100%;
	border-radius: 2.75vmin;
	background: rgba(112, 200, 162, 0.81);
}
.xx-video-container .video-box .video-js {
	width: 100%;
	height: 100%;
	position: relative;
}
.xx-video-container .video-box video{
	position: absolute;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: fill;
	border-radius: 2.25vmin;
}
.short-video-list {
	margin-top: 4.75vmin;
	width: 75%;
	max-width: 100%;
	opacity: 0;
	transform: translate(0, 50%);
	animation: bottom-out 0.5s ease-in-out forwards;
}
.swiper-slide-active .short-video-list {
	animation: bottom-in 1s ease-in-out forwards;
	animation-delay: 0.5s;
}
.short-video-list li {
	float: left;
	width: 22.5%;
	height: 14.25vmin;
	margin-right: 3.33%;
	position: relative;
	overflow: hidden;
}
.short-video-list li:nth-of-type(4n) {
	margin-right: 0;
}
.short-video-list li img {
	position: absolute;
	width: auto;
	min-width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.short-video-list li p {
	position: absolute;
	bottom: 0;
	width: 100%;
	left: 0;
	height: 3vmin;
	padding: 0 0.75vmin 0 3.75vmin;
	background: rgba(0, 0, 0, 0.5);
	font-size: 1.5vmin;
	line-height: 3vmin;
	text-align: center;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.short-video-list li p::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 3vmin;
	height: 3vmin;
	
	background: url(../img/icon-play-s.png)	center center / auto 44.5% #05975d no-repeat;
}
@media screen and (orientation:portrait) {
	.xx-video-container {
		transform: scale(1.3);
		margin-bottom: 6vmin;
	}
	.short-video-list {
		transform: scale(1.2);
	}
}
/* ---- xxTenthBox Style ---- */
#mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(10){
	width: 133.33vmin; 
	z-index: 8;
}
.xxTenthBox {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: calc(133.33vmin + 1px); 
	background:
	url(../img/xx-tenth-bg.jpg) left top / 100% 100% no-repeat;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.xxTenthBox .slogan-box {
	width: 100%;
	line-height: 0;
	text-align: center;
	height: 9.25vmin;
	margin-bottom: 4.75vmin;
	animation: bounceOut 0.5s linear forwards;
	opacity: 0;
}
.xxTenthBox .slogan-box img {
	height: 100%;
	width: auto;
}
.swiper-slide-active .xxTenthBox .slogan-box {
	animation: bounceIn 2s ease-in-out forwards;
}
.xxTenthBox .pylon {
	width: 28.75vmin;
	right: -12.5vmin;
	bottom: 3.75vmin;
}
.xxTenthBox .solar-energy {
	width: 40.75vmin;
	right: 16.5vmin;
	bottom: 3.5vmin;
}
.various-ideas-container {
	width: 75%;
	max-width: 1200px;
}
.various-ideas-box {
	float: left;
	width: 48.33%;
	background: #ffffff;
	transform: translateZ(0);
	padding-bottom: 1.75vmin;
	opacity: 0;
	transform: translate(-50%, 0);
	animation: left-out 0.5s ease-in-out forwards;
}
.swiper-slide-active .various-ideas-box {
	animation: left-in 1s ease-in-out forwards;
	animation-delay: 0.5s;
}
.various-ideas-box input[type="radio"] {
	position: absolute;
	opacity: 0;
}

.various-ideas-box label {
	position: relative;
	display: block;
	height: 4vmin;
	line-height: 3.75vmin;
	border-top: 0.25vmin solid #f6f6f8;
	background: #f6f6f8;
	padding: 0 8.25vmin 0 4.75vmin;
	font-size: 1.75vmin;
	color: #333;
	cursor: pointer;
	transition: .3s ease-in-out;
	margin-top: 1.75vmin;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.various-ideas-box label[for*='1'] {
	margin-top: 0;
}
.various-ideas-box label span {
	position: absolute;
	top: 0;
	left: 2.5vmin;
	font-size: 2vmin;
	font-weight: bold;
	color: #449f77;
	font-style: italic;
	transition: .3s ease-in-out;
	
}
.various-ideas-box #toggle1:checked~label[for*='1'],
.various-ideas-box #toggle2:checked~label[for*='2'],
.various-ideas-box #toggle3:checked~label[for*='3'],
.various-ideas-box #toggle4:checked~label[for*='4'] {
	border-color: #fce744;
	background: #449f77;
	color: #fff;
}
.various-ideas-box #toggle1:checked~label[for*='1'] span,
.various-ideas-box #toggle2:checked~label[for*='2'] span,
.various-ideas-box #toggle3:checked~label[for*='3'] span,
.various-ideas-box #toggle4:checked~label[for*='4'] span {
	color: #fff;
}
.various-ideas-box label:after {
	content: 'չ��';
	position: absolute;
	top: 0px;
	right: 1.5vmin;
	padding-right: 2vmin;
	transition: .3s ease-in-out;
	background: url(../img/icon-arrow-down.png) right center / auto 0.75vmin no-repeat;
	font-size: 1.25vmin;
	color: #666;
	opacity: 1;
}

.various-ideas-box section {
	height: 0;
	transition: .3s all;
	overflow: hidden;
	padding: 0vmin 3vmin 0;
	font-size: 1.33vmin;
	line-height: 3vmin;
	transition: .3s ease-in-out;
	position: relative;
}
.various-ideas-box section a.detail {
	position: absolute;
	bottom: 0;
	right: 3vmin;
	padding-left: 4vmin;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 100%);
}
.various-ideas-box #toggle1:checked~label[for*='1']:after,
.various-ideas-box #toggle2:checked~label[for*='2']:after,
.various-ideas-box #toggle3:checked~label[for*='3']:after,
.various-ideas-box #toggle4:checked~label[for*='4']:after {
	opacity: 0;
}

.various-ideas-box #toggle1:checked~#content1,
.various-ideas-box #toggle2:checked~#content2,
.various-ideas-box #toggle3:checked~#content3,
.various-ideas-box #toggle4:checked~#content4 {
	padding-top: 1vmin;
	height: 10vmin;
}
.various-ideas-list {
	float: right;
	width: 48.25%;
	max-width: 100%;
	opacity: 0;
	transform: translate(50%, 0);
	animation: right-out 0.5s ease-in-out forwards;
}
.swiper-slide-active .various-ideas-list {
	animation: right-in 1s ease-in-out forwards;
	animation-delay: 0.5s;
}
.various-ideas-list li {
	float: left;
	width: 46.7%;
	height: 14.5vmin;
	position: relative;
	overflow: hidden;
	margin-bottom: 4vmin;
}
.various-ideas-list li:nth-of-type(2n) {
	float: right;
}
.various-ideas-list li:nth-last-of-type(2),
.various-ideas-list li:nth-last-of-type(1) {
	margin-bottom: 0;
}
.various-ideas-list li img {
	position: absolute;
	width: auto;
	min-width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.various-ideas-list li p {
	position: absolute;
	bottom: 0;
	width: 100%;
	left: 0;
	height: 3vmin;
	padding: 0 0.75vmin 0 3.75vmin;
	background: rgba(0, 0, 0, 0.5);
	font-size: 1.5vmin;
	line-height: 3vmin;
	text-align: center;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.various-ideas-list li p::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 3vmin;
	height: 3vmin;
	
	background: url(../img/icon-play-s.png)	center center / auto 44.5% #05975d no-repeat;
}
/* ---- xxEleventhBox Style ---- */
#mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(11){
	width: 133.33vmin; 
	z-index: 6;
}
.xxEleventhBox {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: calc(133.33vmin + 1px); 
	background:
	url(../img/xx-eleventh-bg.jpg) left top / 100% 100% no-repeat;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.xxEleventhBox .slogan-box {
	width: 100%;
	line-height: 0;
	text-align: center;
	height: 9.25vmin;
	margin-bottom: 2.75vmin;
	animation: bounceOut 0.5s linear forwards;
	opacity: 0;
}
.xxEleventhBox .slogan-box img {
	height: 100%;
	width: auto;
}
.swiper-slide-active .xxEleventhBox .slogan-box {
	animation: bounceIn 2s ease-in-out forwards;
}
.xxEleventhBox .building {
	width: 34.75vmin;
	right: 18vmin;
	bottom: 0vmin;
}
.xxEleventhBox .windmill-left-left {
	width: 13.25vmin;
	height: 20.5vmin;
	right: 10vmin;
	bottom: 2vmin;
}
.xxEleventhBox .windmill-left-right {
	width: 8vmin;
	height: 12.25vmin;
	right: 6vmin;
	bottom: 3vmin;
}
.xxEleventhBox .windmill-left-right .leaf {
	animation-duration: 3s;
}
.xxEleventhBox .windmill-midd {
	bottom: 0.75vmin;
	right: -7.5vmin;
	width: 24.5vmin;
	height: 38vmin;
}
.xxEleventhBox .windmill-midd .leaf {
	animation-duration: 2s;
}
/* ---- xxEleventhBox Style ---- */
#mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(12){
	width: 160vmin; 
	z-index: 4;
}
.xxTwelfthBox {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: calc(160vmin + 1px); 
	background:
	url(../img/xx-twelfth-bg.jpg) left top / 100% 100% no-repeat;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
.xxTwelfthBox .slogan-box {
	width: 100%;
	line-height: 0;
	text-align: center;
	height: 11vmin;
	margin-bottom: 2.25vmin;
	animation: bounceOut 0.5s linear forwards;
	opacity: 0;
}
.xxTwelfthBox .slogan-box img {
	height: 100%;
	width: auto;
}
.swiper-slide-active .xxTwelfthBox .slogan-box {
	animation: bounceIn 2s ease-in-out forwards;
}
.xxTwelfthBox .big-building {
	width: 32.75vmin;
	right: 4.25vmin;
	bottom: 8.5vmin;
}
.xxTwelfthBox .small-building {
	width: 25.75vmin;
	right: -0.75vmin;
	bottom: 6.75vmin;
}
.about-container {
	width: 57.5%;
	max-width: 1200px;
	padding: 2.5vmin 8.75vmin 3vmin 3.75vmin;
	background: url(../img/about-container.png) center top / 100% auto no-repeat;
	opacity: 0;
	transform: translate(0, 50%);
	animation: bottom-out 0.5s ease-in-out forwards;
}
.swiper-slide-active .about-container {
	width: 70%;
	animation: bottom-in 1s ease-in-out forwards;
	animation-delay: 0.5s;
}
.activity-introduction {
	float: left;
	width: 53.8%;
}
.activity-introduction h1 {
	height: 5vmin;
	position: relative;
	margin-bottom: 1vmin;
}
.activity-introduction h1 span {
	position: absolute;
	top: 0;
	left: -7.5vmin;
	height: 5vmin;
	line-height: 5vmin;
	padding: 0 4.25vmin;
	border-radius: 1.5vmin 0 1.5vmin 0;
	background: #44a078;
	font-size: 2.5vmin;
	color: #fff;
}
.activity-introduction .con {
	margin-bottom: 1vmin;
}
.activity-introduction .con p.time {
	line-height: 3.75vmin;
	font-size: 1.75vmin;
	color: #333333;
	font-weight: bold;
}
.activity-introduction .con p.cooper {
	line-height: 2;
	font-size: 1.67vmin;
	color: #333;
	position: relative; 
	padding-left: 5em;
}
.activity-introduction .con p.cooper label {
	position: absolute;
	width: 5rem;
	left: 0;
	top: 0;
	color: #44a078;
	font-weight: bold;
}
.media-list {
	float: right;
	width: 40%;
}
.media-list h1 {
	height: 4vmin;
	line-height: 4vmin;
	font-size: 1.67vmin;
	color: #44a078;
	font-weight: bold;
	margin-bottom: 1vmin;
}
.media-list ul {
	overflow-y: auto;
	height: 33.25vmin;
}
.media-list ul li {
	width: 28.57%;
	float: left;
	margin-right: 4.76%;
	margin-bottom: 0.75vmin;
	line-height: 0;
}
.media-list ul li a {
	display: flex;
	height: 4vmin;
	background: #ffffff;
	width: 100%;
	padding: 0.25vmin 0.5vmin;
	display: flex;
	align-items: center;
	justify-content: center;
}
.media-list ul li img {
	height: auto;
	width: auto;
	max-width: 100%;
	max-height: 100%;
}
@media screen and (orientation:portrait) {
	#mainSwiper>.swiper-wrapper>.swiper-slide:nth-of-type(12){
		width: 90vmax; 
		z-index: 4;
	}
	.xxTwelfthBox {
		width: calc(90vmax + 1px); 
	}
}
/*  */
@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(.3)
	}
	50% {
		opacity: 1;
		transform: scale(1.05)
	}
	70% {
		transform: scale(.9)
	}
	100% {
		opacity: 1;
		transform: scale(1)
	}
}
@-webkit-keyframes bounceOut {
	0% {
		opacity: 1;
		transform: scale(1)
	}
	25% {
		transform: scale(.95)
	}
	50% {
		
		transform: scale(1.1)
	}
	100% {
		opacity: 0;
		transform: scale(.3)
	}
}
@keyframes top-left-in {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}
@keyframes top-left-out {
	0% {
		opacity: 1;
		transform: translate(0, 0);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -50%);
	}
}
@keyframes top-right-in {
	0% {
		opacity: 0;
		transform: translate(50%, -50%);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}
@keyframes top-right-out {
	0% {
		opacity: 1;
		transform: translate(0, 0);
	}
	100% {
		opacity: 0;
		transform: translate(50%, -50%);
	}
}
@keyframes bottom-in {
	0% {
		opacity: 0;
		transform: translate(0, 50%);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}
@keyframes bottom-out {
	0% {
		opacity: 1;
		transform: translate(0, 0);
	}
	100% {
		opacity: 0;
		transform: translate(0, 50%);
	}
}
@keyframes top-in {
	0% {
		opacity: 0;
		transform: translate(0, -50%);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}
@keyframes top-out {
	0% {
		opacity: 1;
		transform: translate(0, 0);
	}
	100% {
		opacity: 0;
		transform: translate(0, -50%);
	}
}
@keyframes left-in {
	0% {
		opacity: 0;
		transform: translate(-50%, 0);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}
@keyframes left-out {
	0% {
		opacity: 1;
		transform: translate(0, 0);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, 0);
	}
}
@keyframes right-in {
	0% {
		opacity: 0;
		transform: translate(50%, 0);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}
@keyframes right-out {
	0% {
		opacity: 1;
		transform: translate(0, 0);
	}
	100% {
		opacity: 0;
		transform: translate(50%, 0);
	}
}<!--ecms sync check [sync_thread_id="a68f6e271be0d23e820cf6e61402aa0b" sync_date="2024-03-02 09:34:07" check_sum="a68f6e271be0d23e820cf6e61402aa0b  signature="#$enorth_signature_value$#"]-->