/* 公共开始 ----------------------------------------------------- */

/* NOTE: 字体需要抽出 by Tony */
@font-face {
	font-family: ALPH-B;
	src: url(../fonts/Alibaba-PuHuiTi-Bold.otf)
}

@font-face {
	font-family: ALPH-H;
	src: url(../fonts/Alibaba-PuHuiTi-Heavy.otf)
}

@font-face {
	font-family: ALPH-L;
	src: url(../fonts/AlibabaPuHuiTi-2-45-Light.ttf)
}

@font-face {
	font-family: ALPH-M;
	src: url(../fonts/Alibaba-PuHuiTi-Medium.otf)
}

@font-face {
	font-family: ALPH-R;
	src: url(../fonts/Alibaba-PuHuiTi-Regular.otf)
}

/* @font-face{font-family:HYZiKuTangYiShanKaiW;src:url(../fonts/HYZiKuTangYiShanKaiW.ttf)} */
@font-face {
	font-family: Slideqiuhong;
	src: url(../fonts/YanShiQiuHongKai.ttf)
}

/* 单独控制的想要的双引号 by Tony */
.quotes {
	font-family: arial;
}

body {
	color: #3d4c63;
	background: #fff;
	font: 14px/1.5 ALPH-L, sans-serif !important;
	outline: 0;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}

input,
select,
textarea {
	font-size: 12px;
	color: #444;
	font-family: ALPH-L, sans-serif !important;
	outline: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box
}


/* 公共结束 ----------------------------------------------------- */


*,
:after,
:before {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	outline: 0 !important;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
time,
tt,
u,
ul,
var,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline
}

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

ol,
ul {
	list-style: none
}

blockquote,
q {
	quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
	content: ""
}

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

a {
	color: #333;
	text-decoration: none
}

a:hover {
	color: inherit
}

img {
	max-width: 100%;
	border: none
}

em,
i {
	font-style: normal
}

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

button,
input[type=button],
input[type=reset],
input[type=submit],
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none
}

button,
input[type=button],
input[type=reset],
input[type=submit] {
	cursor: pointer
}

input[type=password]:focus,
input[type=tel]:focus,
input[type=text]:focus {
	background: #fff;
	border: 1px solid #bbb
}

.false:focus {
	border: 2px solid #ff1531;
	background: #fff
}

::-webkit-input-placeholder {
	color: #999
}

::-moz-placeholder {
	color: #999
}

:-ms-input-placeholder {
	color: #999
}

::-ms-clear,
::-ms-reveal {
	display: none
}

.fix {
	*zoom: 1
}

.fix:after,
.fix:before {
	display: block;
	content: "";
	height: 0;
	clear: both
}

.c {
	clear: both
}

.col-l,
.l {
	float: left
}

.col-r,
.r {
	float: right
}

.ani {
	-ms-transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s
}

.unselect {
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	user-select: none
}

.wp {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto
}

.h50 {
	height: 50px;
	clear: both;
	overflow: hidden
}

.h100 {
	height: 100px;
	clear: both;
	overflow: hidden
}

.paddingLeft {
	padding-left: 12.03vh
}

body {
	height: 100vh;
	position: relative
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 12.03vh;
	background-color: #ede7db;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10
}

.header .header-body .header-home {
	text-align: center;
	font-size: 0;
	margin-bottom: 50px
}

.swiper-nav {
	height: 376px;
	overflow: hidden
}

.swiper-nav .slide a {
	display: block;
	text-align: center
}

.swiper-nav {
	display: block;
	width: 12.03vh
}

.swiper-nav a {
	display: block;
	text-align: center;
	font-size: 26px;
	text-align: center
}

.swiper-nav .swiper-slide {
	height: auto !important;
	margin: 11px 0;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center
}

.swiper-nav .swiper-slide p {
	line-height: 1.1;
	display: inline-block;
	width: 100%;
	vertical-align: middle
}

.swiper-nav .swiper-slide.on p {
	color: #ede7db
}

.swiper-nav .swiper-slide a {
	padding: 8px 0;
	display: block;
	padding: 1.851vh 0.925vh;
	letter-spacing: 0.462vh;
	text-align: center
}

.swiper-nav .swiper-slide.on a {
	color: #fff;
	background: url(../images/fzbx/snv-on.jpg) no-repeat;
	background-size: 100% 100%;
	box-shadow: 0 0 0.925vh rgb(0 0 0 / 50%);
}

.header .button-next {
	width: 2.777vh;
	height: 2.5vh;
	position: absolute;
	top: 10%;
	left: 50%;
	color: rgb(91, 91, 91);
	transform: translateX(-50%);
	background: url(../images/fzbx/topbtn.jpg) 0% 0% / 100% 100% no-repeat;
}

.header .button-prev {
	width: 2.777vh;
	height: 2.5vh;
	position: absolute;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	background: url(../images/fzbx/topbtn.jpg) 0% 0% / 100% 100% no-repeat;
	top: auto;
	bottom: 10%;
	transform: translateX(-50%) rotateZ(180deg);
	color: rgb(91, 91, 91);
}

.cs-pop2 .text p {
	text-indent: 2em;
	text-align: justify;
}

.swiper-main {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;
	left: 12.03vh;
	background-color: #eee
}

.swiper-scroll .swiper-slide {
	height: 100vh;
	position: relative;
	display: flex;
	justify-content: left;
	width: auto;
	background-size: 100% 100%;
	background-repeat: no-repeat
}

.g-infos01 {
	width: 765px;
	background-image: url(../images/zrhj/zp4.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp4.png) 1x, url(../images/zrhj/zp4@2x.png) 2x);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 100vh;
	padding: 0 180px;
	padding-top: 75px;
	position: relative;
	z-index: 3
}

.g-infos01 .title {
	color: #fff;
	font-size: 60px;
	line-height: 1.1;
	text-align: right;
	margin-bottom: 50px
}

.g-infos01 .title .title_body {
	display: inline-block;
	padding-left: 20px;
	border-left: 2px solid #fff
}

.g-infos01 .infos {
	font-size: 25px;
	color: #e4dad7;
	line-height: 1.71;
	text-align: justify
}

.g-infos01::before {
	position: absolute;
	content: '';
	width: 346px;
	height: 202px;
	display: none;
	background-image: url(../images/zrhj/zp7.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp7.png) 1x, url(../images/zrhj/zp7@2x.png) 2x);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	top: 86px;
	left: -180px
}

.g-infos01 .icloud2 {
	position: absolute;
	content: '';
	width: 346px;
	height: 202px;
	background-image: url(../images/zrhj/zp7.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp7.png) 1x, url(../images/zrhj/zp7@2x.png) 2x);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	top: 86px;
	left: -180px
}

.pubcliScroll::-webkit-scrollbar {
	width: 5px;
	background: #fff;
	background: 0 0
}

.pubcliScroll::-webkit-scrollbar-thumb {
	background: #89c7bc;
	border-radius: 10px
}

.natural-content2 {
	height: 100vh;
	position: relative;
	z-index: 2;
	background-image: url(../images/zrhj/zp8.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp8.png) 1x, url(../images/zrhj/zp8@2x.png) 2x);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	margin-left: -90px;
	padding: 40px 240px 0;
	padding-right: 310px
}

.ul-natural1 {
	margin: 0 -25px
}

.ul-natural1 li {
	float: left;
	width: 50%;
	padding: 0 25px
}

.ul-natural1 li .title {
	width: 241px;
	height: 76px;
	line-height: 60px;
	padding-left: 60px;
	background: url(../images/zrhj/zp6.png) center no-repeat;
	background-size: cover;
	font-size: 36px;
	color: #344f35;
	cursor: pointer;
	position: relative
}

.jumpPoint:after {
	content: '';
	position: absolute;
	top: 80%;
	left: 100%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	background-color: rgba(255, 255, 255, .5);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 1px solid #fff
}

.jumpPoint:before {
	content: '';
	position: absolute;
	top: 80%;
	left: 100%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: 1px solid #fff;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	animation: jump2 1s ease-out infinite;
	-moz-animation: jump2 1s ease-out infinite;
	-webkit-animation: jump2 1s ease-out infinite;
	-o-animation: jump2 1s ease-out infinite
}

.ul-natural1 li .title:after,
.ul-natural1 li .title:before {
	left: 60%;
	top: 60%
}

.jumpPoint.yd:after,
.jumpPoint.yd:before {
	left: 0
}

.natural-content2-body {
	width: 800px
}

.ul-natural1 li .pic {
	position: relative;
	padding-top: 63.24%;
	box-shadow: 0 3px 5px #4a5d41
}

.ul-natural1 li .pic img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%
}

.ul-natural1 li .border {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: url(../images/zrhj/zp9.png) center no-repeat;
	background-size: cover
}

.rock-group {
	width: 815px;
	height: 400px;
	background-image: url(../images/zrhj/zp10.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp10.png) 1x, url(../images/zrhj/zp10@2x.png) 2x);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: 63px
}

.ul-rock {
	padding-top: 50px
}

.ul-rock li {
	float: left;
	width: 33%;
	margin-bottom: 30px
}

.ul-rock li .icon {
	font-size: 0;
	text-align: center
}

.ul-rock li .icon img {
	transition: .3s;
	width: 70%;
	display: block;
	margin: 0 auto
}

.ul-rock li:first-child .icon img {
	position: relative;
	left: 30px
}

.ul-rock li:nth-child(4) .icon img {
	position: relative;
	left: 30px
}

.ul-rock li .icon img:hover {
	transform: scale(1.1)
}

.ul-rock li p {
	width: auto;
	height: 35px;
	line-height: 35px;
	background-color: #273825;
	color: #fff;
	padding: 0 20px;
	display: inline-block;
	font-size: 20px;
	margin-left: 45px;
	white-space: nowrap;
	position: relative;
	top: -30px
}

.ul-rock li:nth-child(4) p,
.ul-rock li:nth-child(5) p,
.ul-rock li:nth-child(6) p {
	margin-left: 20px
}

.ul-rock li:nth-child(6) p {
	margin-left: 0
}

.rock-group {
	position: relative
}

.rock-group .icloud {
	position: absolute;
	content: '';
	background-image: url(../images/zrhj/zp11.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp11.png) 1x, url(../images/zrhj/zp11@2x.png) 2x);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 388px;
	height: 175px;
	left: 120%;
	top: 190px;
	transform: scale(.8);
	z-index: 5
}

.swiper-scroll .swiper-slide.climate {
	background-image: url(../images/zrhj/zp17.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp17.png) 1x, url(../images/zrhj/zp17@2x.png) 2x);
	background-size: 120% 100%;
	background-repeat: no-repeat;
	background-position: 100% center
}

.g-infos02 {
	width: 516px;
	height: 95%;
	background-image: url(../images/zrhj/zp12.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp12.png) 1x, url(../images/zrhj/zp12@2x.png) 2x);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	padding: 70px 80px 0;
	perspective: 950;
	-webkit-perspective: 950;
	position: relative
}

.g-infos02-weather {
	height: 110%
}

.g-infos02 .txt {
	transform-origin: 50% 0;
	transform-style: preserve-3d;
	transform: rotateY(-15deg) rotateX(-2deg) rotateZ(1deg) skew(0deg, 0deg);
	position: relative;
	left: -25px
}

.g-infos02 h3 {
	color: #fff;
	font-size: 50px;
	font-weight: 400;
	margin-bottom: 60px
}

.g-infos02 .info {
	color: #e4dad7;
	font-size: 26px;
	line-height: 1.71;
	text-align: justify;
	text-indent: 2em
}

.g-infos02 {
	position: relative;
	margin-left: 196px;
	z-index: 3
}

.g-infos02 .cloud-hr1 {
	position: absolute;
	width: 346px;
	height: 132px;
	background-image: url(../images/zrhj/zp13.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp13.png) 1x, url(../images/zrhj/zp13@2x.png) 2x);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	top: 0;
	left: 80%
}

.beijing-wearher-pan {
	padding-left: 160px;
	padding-right: 240px;
	height: calc(100vh - 100px);
	position: relative;
	z-index: 2;
	width: 1400px
}

.beijing-wearher {
	width: 1000px;
	height: 837px;
	position: relative;
	margin-top: 0
}

.water-info-pan {
	height: calc(100vh - 150px);
	display: flex;
	justify-content: left;
	padding-right: 139px;
	background-image: url(../images/zrhj/zp17.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp17.png) 1x, url(../images/zrhj/zp17@2x.png) 2x);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center
}

.beijing-wearher span {
	position: absolute;
	border-radius: 50%;
	font-size: 0;
	background-color: #e4dad7;
	text-align: center;
	box-shadow: 1px 2px 20px 0 rgba(52, 52, 52, .46);
	pointer-events: auto
}

.beijing-wearher span em {
	display: inline-block;
	vertical-align: middle;
	line-height: 1.1;
	font-size: 20px
}

.beijing-wearher span.s1 {
	top: 30%;
	right: 19%;
	width: 100px;
	height: 100px;
	line-height: 100px
}

.beijing-wearher span.s2 {
	top: 10%;
	right: 10%;
	width: 75px;
	height: 75px;
	line-height: 75px
}

.beijing-wearher span.s3 {
	top: 55%;
	right: 16.5%;
	width: 110px;
	height: 110px;
	line-height: 110px
}

.beijing-wearher span.s4 {
	top: 40%;
	right: -5%;
	width: 110px;
	height: 110px;
	line-height: 110px
}

.beijing-wearher span.s5 {
	bottom: 14%;
	right: 28%;
	width: 80px;
	height: 80px;
	line-height: 80px
}

.beijing-wearher span.s6 {
	bottom: 10%;
	right: 9%;
	width: 110px;
	height: 110px;
	line-height: 110px
}

.hill.hill-hr {
	left: auto;
	right: 0
}

.islangs {
	width: 460px;
	margin: 0 0;
	padding-top: 40px;
	position: relative
}

.islangs .pic-txt {
	display: block;
	width: 100%;
	position: absolute;
	bottom: 150px;
	left: 0
}

.islangs .pic-txt::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	z-index: 1;
	content: '';
	background: #536d4f
}

.islangs .pic-txt p {
	font-size: 32px;
	color: #fff;
	margin-bottom: 50px;
	text-align: center
}

.islangs .pic-txt .line {
	padding-top: 37.95%;
	background-image: url(../images/zrhj/zp50.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp50.png) 1x, url(../images/zrhj/zp50@2x.png) 2x);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center
}

.islangs img {
	display: block;
	width: 100%;
	position: relative;
	z-index: 2
}

.water-pic {
	position: relative;
	font-size: 0;
	margin-left: 40px;
	margin-right: 140px;
	margin-top: 40px
}

.water-pic img {
	display: block
}

.water-pic-cbh {
	display: flex;
	justify-content: space-between
}

.water-pic-cbh img {
	display: block;
	width: 48%
}

.ul-water {
	position: absolute;
	top: 0;
	right: -100px
}

.ul-water li {
	margin-bottom: 30px
}

.ul-water li a {
	display: block;
	width: 168px;
	height: 64px;
	line-height: 64px;
	text-align: center;
	font-size: 26px;
	color: #3f6247;
	background-image: url(../images/zrhj/zp20.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp20.png) 1x, url(../images/zrhj/zp20@2x.png) 2x);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center
}

.turang-info {
	margin-left: 140px;
	margin-right: 340px;
	transform: scale(.9);
	margin-top: 40px
}

.strone-glass {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-left: 100px;
	z-index: 4
}

.strone-glass img {
	display: block;
	width: 80%
}

.shadow {
	height: 100vh;
	width: 330px
}

.shadow img {
	display: block;
	width: 100%;
	height: 100%
}

.g-infos02-v2 {
	margin-left: 0
}

.ul-pics {
	display: flex;
	justify-content: left;
	margin-left: 300px;
	margin-top: 60px
}

.ul-pics li {
	margin-right: 180px;
	width: 420px
}

.ul-pics li .pic {
	position: relative;
	padding-top: 136.53%;
	box-shadow: 20px 20px 20px 5px rgba(0, 0, 0, .3)
}

.ul-pics li .pic img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	display: block;
	width: 100%
}

.ul-pics li .pic .border {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%
}

.ul-pics li .pic p {
	position: absolute;
	bottom: 20px;
	left: 0;
	width: 100%;
	text-align: left;
	padding: 0 25px;
	color: #fff;
	font-size: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

#WebGL-output canvas {
	background: 0 0 !important
}

.pages-left-title h3 {
	color: #fff;
	font-size: 96px;
	line-height: 1.1;
	margin-left: 90px
}

#WebGL-output {
	height: 100vh
}

.video-button {
	width: 510px;
	margin-right: 180px;
	margin-top: 90px
}

.video-button a {
	display: block;
	width: 230px;
	height: 64px;
	float: left;
	margin-right: 50px;
	margin-bottom: 23px;
	text-align: center;
	line-height: 64px;
	font-size: 30px;
	color: #3f6247;
	background-image: url(../images/zrhj/zp26.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp26.png) 1x, url(../images/zrhj/zp26@2x.png) 2x);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center
}

.video-button a:nth-child(2n) {
	margin-right: 0
}

.bottom-line {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 150px;
	z-index: 1;
	background-image: url(../images/zrhj/bottom_bg.jpg);
	background-repeat: repeat-x
}

.bottom-line.bottom-line-n1 {
	width: 130%
}

.bottom-line.bottom-line-n2 {
	left: -40px;
	width: 120%
}

.pics-bottom {
	position: absolute;
	bottom: 0;
	left: 400px;
	width: 90%;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	z-index: 3
}

.pics-bottom .pic {
	position: relative
}

.pics-bottom .pic p {
	position: absolute;
	bottom: 240px;
	left: 15%;
	font-size: 24px;
	color: #fff;
	cursor: pointer
}

.pics-bottom .pic p:After {
	content: '';
	position: absolute;
	top: 80%;
	left: 100%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	background-color: rgba(255, 255, 255, .5);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 1px solid #fff
}

.pics-bottom .pic p:before {
	content: '';
	position: absolute;
	top: 80%;
	left: 100%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: 1px solid #fff;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	animation: jump2 1s ease-out infinite;
	-moz-animation: jump2 1s ease-out infinite;
	-webkit-animation: jump2 1s ease-out infinite;
	-o-animation: jump2 1s ease-out infinite
}

@keyframes jump2 {
	from {
		width: 20px;
		height: 20px;
		opacity: 1
	}

	to {
		width: 40px;
		height: 40px;
		opacity: 0
	}
}

@-moz-keyframes jump2 {
	from {
		width: 20px;
		height: 20px;
		opacity: 1
	}

	to {
		width: 40px;
		height: 40px;
		opacity: 0
	}
}

@-webkit-keyframes jump2 {
	from {
		width: 20px;
		height: 20px;
		opacity: 1
	}

	to {
		width: 40px;
		height: 40px;
		opacity: 0
	}
}

@-o-keyframes jump2 {
	from {
		width: 20px;
		height: 20px;
		opacity: 1
	}

	to {
		width: 40px;
		height: 40px;
		opacity: 0
	}
}

.animal-botany {
	height: calc(100vh - 50px);
	padding-left: 220px;
	display: flex;
	justify-content: left;
	position: relative;
	z-index: 3;
	background-image: url(../images/zrhj/zp32.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp32.png) 1x, url(../images/zrhj/zp32@2x.png) 2x);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center
}

.pic-txt-grop1 {
	width: 910px;
	position: relative;
	margin-left: 130px;
	height: 750px;
	margin-right: 230px;
	margin-top: 80px
}

.pic-txt-grop1 .pic {
	position: absolute;
	width: 340px;
	box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, .3)
}

.pic-txt-grop1 .pic-wrap,
.pic-txt-grop2 .pic-wrap {
	box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, .3)
}

.pic-txt-grop1 .pic img {
	display: block;
	width: 100%
}

.pic-txt-grop1 .pic1 {
	top: 0;
	left: 0;
	width: 340px
}

.pic-txt-grop1 .pic2 {
	top: 320px;
	left: 0;
	width: 340px
}

.pic-txt-grop1 .pic3 {
	bottom: 0;
	left: 0;
	width: 340px
}

.pic-txt-grop1 .pic4 {
	width: 250px;
	left: 350px
}

.pic-txt-grop1 .pic5 {
	right: 0;
	width: 295px;
	top: 0
}

.pic-txt-grop1 .pic6 {
	right: 0;
	width: 295px;
	top: 170px
}

.pic-txt-grop1 .pic p {
	color: #fff;
	position: absolute;
	bottom: 5px;
	right: 0;
	font-size: 20px;
	right: 5px
}

.pic-txt-grop1 .txt {
	position: absolute;
	bottom: 60px;
	right: 40px;
	width: 430px;
	font-size: 26px;
	color: #e4dad7;
	text-align: justify;
	text-indent: 2em
}

.animal-botany2 {
	height: calc(100vh - 100px);
	position: relative;
	z-index: 3;
	margin-right: 245px;
	background-image: url(../images/zrhj/zp14.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp14.png) 1x, url(../images/zrhj/zp14@2x.png) 2x);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center
}

.pic-txt-grop2 {
	position: relative;
	width: 940px;
	height: 765px;
	margin: 50px 370px 0 197px
}

.pic-txt-grop2 .pic {
	position: absolute;
	box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, .3)
}

.pic-txt-grop2 .pic img {
	display: block;
	width: 100%
}

.pic-txt-grop2 .pic1 {
	top: 0;
	left: 0;
	width: 327px
}

.pic-txt-grop2 .pic2 {
	top: 190px;
	left: 0;
	width: 327px
}

.pic-txt-grop2 .pic3 {
	bottom: 0;
	left: 0;
	width: 327px
}

.pic-txt-grop2 .pic4 {
	top: 0;
	left: 335px;
	width: 327px
}

.pic-txt-grop2 .pic5 {
	bottom: 0;
	left: 335px;
	width: 255px
}

.pic-txt-grop2 .pic6 {
	top: 0;
	right: 0;
	width: 256px
}

.pic-txt-grop2 .pic p {
	color: #fff;
	position: absolute;
	bottom: 5px;
	right: 0;
	font-size: 20px;
	right: 5px
}

.pic-txt-grop2 .txt {
	position: absolute;
	bottom: 100px;
	right: 0;
	width: 325px;
	font-size: 24px;
	color: #e4dad7;
	text-align: justify;
	text-indent: 2em
}

.hill-nature {
	left: -650px
}

.cloud-turang {
	position: absolute;
	top: 120px;
	right: -130px;
	z-index: 5
}

.cloud-zhibei {
	position: absolute;
	top: 120px;
	right: -130px;
	z-index: 5
}

.hill.hill-beijing {
	left: auto;
	right: -900px
}

.resources_content1 {
	height: 100vh;
	position: relative;
	background-image: url(../images/zrhj/zp39.png);
	height: 100vh;
	background-image: -webkit-image-set(url(../images/zrhj/zp39.png) 1x, url(../images/zrhj/zp39@2x.png) 2x);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center
}

.resources_content1 .title {
	position: absolute;
	top: 0;
	width: 175px;
	height: 465px;
	background-image: url(../images/zrhj/zp40.png);
	height: 100vh;
	background-image: -webkit-image-set(url(../images/zrhj/zp40.png) 1x, url(../images/zrhj/zp40@2x.png) 2x);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center
}

.resources-infos-txt {
	width: 873px;
	height: 873px;
	position: relative;
	font-size: 30px;
	padding: 160px;
	color: #fff;
	margin-left: 530px;
	margin-right: 330px;
	background-image: url(../images/zrhj/zp41.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp41.png) 1x, url(../images/zrhj/zp41@2x.png) 2x);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	text-indent: 2em
}

.resources-infos-txt-p {
	position: absolute;
	top: 42%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-width: 570px;
	width: 100%;
	text-align: justify
}

.resources-infos-txt>img {
	position: absolute;
	top: 43%;
	right: -170px;
	display: block;
	width: 224px
}

.resources-infos-stone {
	position: absolute;
	bottom: 140px;
	left: -40%;
	display: flex;
	width: 1416px;
	height: 102px;
	display: flex;
	justify-content: space-around;
	background-image: url(../images/zrhj/zp43.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp43.png) 1x, url(../images/zrhj/zp43@2x.png) 2x);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center
}

.resources-infos-stone .item-stone {
	position: relative;
	margin-top: -45px
}

.resources-infos-stone .pic {
	width: 170px;
	height: 120px
}

.resources-infos-stone .pic img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-ms-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out
}

.resources-infos-stone .pic:hover img {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1)
}

.resources-infos-stone .item-stone p {
	position: absolute;
	bottom: 28px;
	left: -20px;
	background: #2f422c;
	color: #e4dad7;
	padding: 0 7px;
	text-align: center;
	text-indent: 0;
	width: 125px;
	height: 40px;
	line-height: 40px
}

.item-natural.first {
	margin-left: 150px
}

.item-natural {
	width: 410px;
	height: 95vh;
	padding: 50px 30px 100px;
	overflow-y: auto;
	padding-bottom: 100px;
	margin-right: 50px;
	background-image: url(../images/zrhj/zp44.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp44.png) 1x, url(../images/zrhj/zp44@2x.png) 2x);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	perspective: 900;
	-webkit-perspective: 900
}

.item-natural .txt-pic {
	height: 100%;
	overflow-y: auto;
	padding-right: 10px;
	transform-origin: -1% 44%;
	transform-style: preserve-3d;
	transform: rotateY(-23deg) rotateX(0) rotateZ(0) skew(0deg, 0deg)
}

.item-natural p {
	font-size: 24px;
	color: #557255;
	margin-bottom: 30px
}

.item-natural .pic {
	margin-bottom: 20px;
	position: relative
}

.item-natural .pic img {
	display: block;
	width: 100%
}

.item-natural .pic span {
	position: absolute;
	bottom: 10px;
	right: 10px;
	font-size: 20px;
	color: #fff
}

.pic-txt-water {
	width: 1000px;
	position: relative;
	margin-right: 200px
}

.pic-txt-water img {
	display: block;
	margin: 0 auto
}

.pic-txt-water .txt {
	position: absolute;
	font-size: 28px;
	color: #e4dad7;
	padding-bottom: 10px;
	width: 300px;
	cursor: pointer;
	background-image: url(../images/zrhj/zp45.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp45.png) 1x, url(../images/zrhj/zp45@2x.png) 2x);
	background-size: auto 3px;
	background-repeat: repeat-x;
	background-position: bottom left
}

.pic-txt-water .txt.tl {
	text-align: left
}

.pic-txt-water .txt.tr {
	text-align: right
}

.pic-txt-water .txt.txt1 {
	top: 30%;
	left: 10%
}

.pic-txt-water .txt.txt2 {
	bottom: 15%;
	left: 0
}

.pic-txt-water .txt.txt3 {
	top: 15%;
	right: 0
}

.pic-txt-water .txt.txt4 {
	top: 45%;
	right: -10%
}

.pic-txt-water .txt.txt5 {
	bottom: 20%;
	right: 5%
}

.pop-dzdm {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	display: none
}

.pop-dzdm .pop-dzdm-body {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1074px;
	height: 453px;
	padding: 80px;
	background-image: url(../images/zrhj/zp46.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp46.png) 1x, url(../images/zrhj/zp46@2x.png) 2x);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}

.pop-dzdm .txt {
	font-size: 30px;
	color: #20311d;
	line-height: 1.4;
	padding-right: 20px
}

.video-pop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none
}

.video-pop .video-pop-body {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1000px;
	padding: 15px;
	background-color: #6d8363;
	z-index: 5;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}

.video-pop .video-pop-body .close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 74px;
	height: 74px;
	z-index: 5;
	background-image: url(../images/zrhj/zp49.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp49.png) 1x, url(../images/zrhj/zp49@2x.png) 2x);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center
}

.video-pop .video-pop-body video {
	display: block;
	width: 100%;
	height: 100%
}

.g-infos02 .cloud-animal {
	position: absolute;
	bottom: 10%;
	left: 70%;
	width: 300px
}

.circle-small {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute;
	top: 106px;
	left: 151px;
	width: 637px;
	height: 637px;
	animation: roll2 30s linear infinite alternate;
	-moz-animation: roll2 30s linear infinite alternate;
	-webkit-animation: roll2 30s linear infinite alternate;
	-o-animation: roll2 30s linear infinite alternate;
	border: 4px solid #e4dad7;
	box-shadow: 1px 2px 1px 0 rgba(52, 52, 52, .46);
	pointer-events: none
}

.beijing-wearher .circle-small span.s1 {
	top: 20%;
	right: -3%
}

.beijing-wearher .circle-small span.s3 {
	top: 51%;
	right: -7.4%
}

.beijing-wearher .circle-small span.s5 {
	top: 80%;
	right: 10.5%
}

.beijing-wearher .circle-small span.s1,
.beijing-wearher .circle-small span.s3,
.beijing-wearher .circle-small span.s5 {
	animation: roll 30s linear infinite alternate;
	-moz-animation: roll 30s linear infinite alternate;
	-webkit-animation: roll 30s linear infinite alternate;
	-o-animation: roll 30s linear infinite alternate
}

.circle-big {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute;
	top: 3px;
	left: 195px;
	width: 768px;
	height: 768px;
	animation: roll 30s linear infinite alternate;
	-moz-animation: roll 30s linear infinite alternate;
	-webkit-animation: roll 30s linear infinite alternate;
	-o-animation: roll 30s linear infinite alternate;
	border: 4px solid #e4dad7;
	box-shadow: 1px 2px 1px 0 rgba(52, 52, 52, .46);
	pointer-events: none
}

.beijing-wearher .circle-big span.s2 {
	top: 10%;
	right: 9%
}

.beijing-wearher .circle-big span.s4 {
	top: 41%;
	right: -7%
}

.beijing-wearher .circle-big span.s6 {
	bottom: 8%;
	right: 7%
}

.beijing-wearher .circle-big span.s2,
.beijing-wearher .circle-big span.s4,
.beijing-wearher .circle-big span.s6 {
	animation: roll2 30s linear infinite alternate;
	-moz-animation: roll2 30s linear infinite alternate;
	-webkit-animation: roll2 30s linear infinite alternate;
	-o-animation: roll2 30s linear infinite alternate
}

.weather-map {
	position: absolute;
	top: 30px;
	left: 100px;
	width: 600px
}

@keyframes roll {
	from {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(30deg);
		-moz-transform: rotate(30deg);
		-ms-transform: rotate(30deg);
		-o-transform: rotate(30deg);
		transform: rotate(30deg)
	}
}

@-moz-keyframes roll {
	from {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(30deg);
		-moz-transform: rotate(30deg);
		-ms-transform: rotate(30deg);
		-o-transform: rotate(30deg);
		transform: rotate(30deg)
	}
}

@-webkit-keyframes roll {
	from {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(30deg);
		-moz-transform: rotate(30deg);
		-ms-transform: rotate(30deg);
		-o-transform: rotate(30deg);
		transform: rotate(30deg)
	}
}

@-o-keyframes roll {
	from {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(30deg);
		-moz-transform: rotate(30deg);
		-ms-transform: rotate(30deg);
		-o-transform: rotate(30deg);
		transform: rotate(30deg)
	}
}

@keyframes roll2 {
	from {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(-30deg);
		-moz-transform: rotate(-30deg);
		-ms-transform: rotate(-30deg);
		-o-transform: rotate(-30deg);
		transform: rotate(-30deg)
	}
}

@-moz-keyframes roll2 {
	from {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(-30deg);
		-moz-transform: rotate(-30deg);
		-ms-transform: rotate(-30deg);
		-o-transform: rotate(-30deg);
		transform: rotate(-30deg)
	}
}

@-webkit-keyframes roll2 {
	from {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(-30deg);
		-moz-transform: rotate(-30deg);
		-ms-transform: rotate(-30deg);
		-o-transform: rotate(-30deg);
		transform: rotate(-30deg)
	}
}

@-o-keyframes roll2 {
	from {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(-30deg);
		-moz-transform: rotate(-30deg);
		-ms-transform: rotate(-30deg);
		-o-transform: rotate(-30deg);
		transform: rotate(-30deg)
	}
}

.map-warp {
	position: relative;
	z-index: 100
}

.map-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size: 18px;
	color: #fff;
	text-align: center
}

@media only screen and (max-height:799px) {
	.g-infos02 .info {
		font-size: 26px
	}

	.ul-pics li {
		margin-right: 80px;
		width: 350px
	}

	.pic-txt-grop2 {
		margin-top: -50px
	}

	.pic-txt-grop1 {
		margin-top: -30px
	}

	.beijing-wearher {
		margin-top: -50px
	}
}

@media only screen and (max-height:799px) {
	.pages-left-title h3 {
		font-size: 58px;
		padding-left: 40px
	}

	.video-button a {
		width: 180px;
		height: 50px;
		line-height: 50px;
		margin-right: 10px;
		margin-bottom: 10px;
		font-size: 18px
	}

	.g-infos01::before {
		width: 173px;
		height: 101px
	}

	/*#WebGL-output canvas{width:80vw!important;height:90vh!important}*/
	.g-infos01 {
		width: 600px;
		padding: 50px 120px
	}

	.bottom-line {
		height: 100px
	}

	.beijing-wearher-pan,
	.water-info-pan {
		height: calc(100vh - 100px)
	}

	.islangs .pic-txt {
		bottom: 100px
	}

	.g-infos01 .title {
		font-size: 30px;
		padding-right: 20px
	}

	.g-infos01 .infos {
		height: calc(100vh - 100px)
	}

	.natural-content2 {
		padding: 10px 50px 0
	}

	.ul-natural1 {
		margin: 0 -10px
	}

	.ul-natural1 li {
		padding: 0 10px
	}

	.rock-group {
		width: 800px;
		background-size: 100% 100%
	}

	.ul-natural1 li .title {
		width: 200px;
		height: 60px;
		line-height: 50px;
		font-size: 18px
	}

	.g-infos02 {
		margin-left: 90px
	}

	.rock-group::after {
		width: 194px;
		height: 88px
	}

	.pages-left-title h3 {
		font-size: 38px;
		padding-left: 30px;
		margin-left: 30px
	}

	.g-infos01 .infos {
		font-size: 20px
	}

	.g-infos02 {
		width: 300px;
		padding: 30px 30px 0
	}

	.g-infos02 h3 {
		font-size: 24px;
		margin-bottom: 15px
	}

	.g-infos02 .info {
		font-size: 20px
	}

	.g-infos02 .cloud-hr1 {
		width: 173px;
		height: 66px
	}

	.ul-water li {
		margin-bottom: 10px
	}

	.beijing-wearher {
		margin-top: 0
	}

	.islangs {
		width: 360px
	}

	.turang-info {
		width: 600px;
		margin-left: 50px;
		margin-right: 50px
	}

	.pics-bottom img {
		display: block;
		max-width: 450px
	}

	.ul-pics li {
		width: 240px;
		margin-right: 50px
	}

	.animal-botany {
		padding-left: 0
	}

	.ul-pics {
		margin-left: 100px
	}

	.pic-txt-grop1 {
		margin-left: 0
	}

	.pic-txt-grop2 {
		margin: 20px 50px 0;
		transform: scale(.8)
	}

	.g-infos01 {
		background-size: 100% 100%
	}

	.resources-infos {
		padding-top: 50px
	}

	.resources-infos-txt {
		width: 700px;
		height: 700px;
		padding: 90px;
		font-size: 20px;
		bottom: 20px;
		padding-top: 160px
	}

	.resources-infos-stone {
		width: 850px;
		height: 71px
	}

	.resources-infos-stone .pic {
		width: 140px
	}

	.item-natural {
		width: 400px
	}

	.item-natural p {
		font-size: 20px;
		padding: 0 20px 30px
	}

	.g-infos01 .icloud2 {
		width: 160px;
		height: 94px
	}
}

@media only screen and (max-width:1439px) {
	.pic-txt-grop1 {
		zoom: .7;
		margin-right: 70px
	}

	.pic-txt-grop2 {
		zoom: .7
	}

	.resources-infos-txt {
		width: 500px;
		height: 500px;
		font-size: 16px;
		padding-top: 90px
	}

	.resources-infos-stone {
		bottom: 100px
	}

	.resources-infos {
		padding-top: 100px
	}

	.ul-water {
		right: -100px
	}

	.g-infos01 .infos {
		font-size: 20px
	}

	.pop-dzdm .txt {
		font-size: 20px
	}
}

@media only screen and (max-width:999px) {
	#WebGL-output canvas {
		width: 530px !important;
		height: 330px !important
	}

	.beijing-wearher-pan,
	.water-info-pan {
		height: calc(100vh - 50px)
	}

	.islangs .pic-txt {
		bottom: 50px
	}

	.islangs .pic-txt p {
		font-size: 16px;
		margin-bottom: 20px
	}

	.animal-botany2 {
		height: calc(100vh - 50px);
		margin-right: 50px
	}

	.bottom-line {
		height: 50px
	}

	.video-button a {
		width: 100px;
		height: 27px;
		line-height: 27px;
		font-size: 14px;
		margin-right: 5px;
		margin-bottom: 5px
	}

	.video-button {
		margin-right: 10px;
		width: 315px
	}

	.natural-content2-body {
		width: 360px
	}

	.g-infos01 .title {
		font-size: 16px
	}

	.ul-natural1 li .title {
		width: 100px;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		padding-left: 20px
	}

	.g-infos01::before {
		top: auto;
		bottom: 70px;
		top: auto
	}

	.g-infos02 h3 {
		font-size: 16px
	}

	.g-infos02 .info {
		font-size: 14px
	}

	.beijing-wearher {
		margin: 0 40px
	}

	.islangs {
		width: 180px
	}

	.turang-info {
		width: 400px;
		margin: 0 40px 0
	}

	.strone-glass img {
		width: 70%;
		margin: 0 auto
	}

	.pics-bottom img {
		max-width: 350px
	}

	.ul-pics {
		margin-right: 20px
	}

	.ul-pics li {
		width: 150px;
		margin-right: 15px
	}

	.ul-pics li .pic p {
		bottom: 10px;
		font-size: 14px
	}

	.pic-txt-grop1 {
		width: 400px;
		height: 290px;
		margin-top: 20px
	}

	.pic-txt-grop1 .pic1,
	.pic-txt-grop1 .pic2,
	.pic-txt-grop1 .pic3 {
		width: 150px
	}

	.item-natural p {
		font-size: 16px;
		padding: 0 10px 10px;
		margin-bottom: 10px
	}

	.item-natural {
		width: 220px;
		margin-right: 20px;
		padding: 15px
	}

	.item-natural.first {
		margin-left: 40px
	}

	.resources-infos {
		padding-top: 50px
	}

	.resources-infos-txt>img {
		width: 160px
	}

	.pop-dzdm .pop-dzdm-body {
		width: 80%;
		height: 240px
	}

	.pop-dzdm .txt {
		font-size: 16px
	}

	.video-pop .video-pop-body {
		width: 70%;
		padding: 8
	}

	.video-pop .video-pop-body .close {
		width: 35px;
		height: 35px
	}

	.pics-bottom .pic p {
		bottom: 10%
	}
}

@media only screen and (max-width:959px) {
	.resources-infos-txt {
		margin-left: 190px
	}

	.resources-infos-txt {
		width: 300px;
		height: 300px;
		padding: 50px 40px 20px
	}

	.resources-infos-stone {
		bottom: 10px;
		left: -120px
	}

	.resources-infos-txt>img {
		width: 120px
	}

	.g-infos02 {
		width: 240px;
		margin-left: 50px
	}

	.item-natural p {
		font-size: 14px
	}

	.item-natural .pic span {
		font-size: 12px
	}

	.pop-dzdm .txt {
		font-size: 14px
	}

	.pop-dzdm .pop-dzdm-body {
		padding: 30px
	}

	.pop-dzdm .txt {
		padding-top: 10px
	}

	.animal-botany .g-infos02-v2,
	.g-infos02-weather {
		height: 110%
	}

	.water-info-pan {
		padding-right: 40px
	}
}

.body_index {
	overflow: hidden;
	background: #ba4f50
}

.home_map {
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-position: center
}

.home_map .box {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 65.73%;
	text-align: center;
	cursor: pointer;
	z-index: 8
}

.body_index.open .home_map .box img {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1)
}

.home_map .box img {
	display: block;
	width: 100%;
	-webkit-transform: scale(.7);
	-moz-transform: scale(.7);
	-ms-transform: scale(.7);
	-o-transform: scale(.7);
	transform: scale(.7);
	-webkit-transition: transform 3s;
	-moz-transition: transform 3s;
	-ms-transition: transform 3s;
	-o-transition: transform 3s;
	transition: transform 3s
}

.home_map .box .tit {
	color: #fff;
	text-align: center;
	font-size: 38px;
	font-weight: 700;
	position: absolute;
	z-index: 2;
	opacity: 0;
	line-height: 1.2;
	left: 50%;
	top: calc(100% + 20px);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}

.home_map .box .tit p {
	white-space: nowrap;
}

.home_map .box .pos {
	width: 70px;
	height: 70px;
	position: absolute;
	left: 49.2%;
	top: 34.5%;
	z-index: 2;
	opacity: 0
}

.home_map .box .pos i {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../images/zrhj/los.png);
	background-image: -webkit-image-set(url(../images/zrhj/los.png) 1x, url(../images/zrhj/los@2x.png) 2x);
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	z-index: 2
}

.body_index.open .home_map .box .pos {
	opacity: 1;
	-webkit-transition: all 1s ease-out 2s;
	-moz-transition: all 1s ease-out 2s;
	-ms-transition: all 1s ease-out 2s;
	-o-transition: all 1s ease-out 2s;
	transition: all 1s ease-out 2s
}

.body_index.open .home_map .box .pos:after {
	content: '';
	width: 30px;
	height: 10px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 1px solid #fff;
	position: absolute;
	bottom: -20px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 1;
	animation: wave 2s linear 1s infinite;
	-moz-animation: wave 2s linear 1s infinite;
	-webkit-animation: wave 2s linear 1s infinite;
	-o-animation: wave 2s linear 1s infinite;
	opacity: 0
}

.body_index.open .home_map .box .pos:before {
	content: '';
	width: 0;
	height: 0;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 1px solid #fff;
	position: absolute;
	bottom: -20px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 1;
	animation: wave 2s linear infinite;
	-moz-animation: wave 2s linear infinite;
	-webkit-animation: wave 2s linear infinite;
	-o-animation: wave 2s linear infinite;
	opacity: 0
}

@keyframes wave {
	from {
		width: 0;
		height: 0;
		opacity: 1
	}

	to {
		width: 50px;
		height: 20px;
		opacity: 0
	}
}

@-moz-keyframes wave {
	from {
		width: 0;
		height: 0;
		opacity: 1
	}

	to {
		width: 50px;
		height: 20px;
		opacity: 0
	}
}

@-webkit-keyframes wave {
	from {
		width: 0;
		height: 0;
		opacity: 1
	}

	to {
		width: 50px;
		height: 20px;
		opacity: 0
	}
}

@-o-keyframes wave {
	from {
		width: 0;
		height: 0;
		opacity: 1
	}

	to {
		width: 50px;
		height: 20px;
		opacity: 0
	}
}

.body_index.open .home_map .box .tit {
	opacity: 1;
	-webkit-transition: all 1s ease-out 3s;
	-moz-transition: all 1s ease-out 3s;
	-ms-transition: all 1s ease-out 3s;
	-o-transition: all 1s ease-out 3s;
	transition: all 1s ease-out 3s;
}

.door {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: center bottom;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	height: 100vh;
	-webkit-transition: all 3s;
	-moz-transition: all 6s;
	-ms-transition: all 6s;
	-o-transition: all 6s;
	transition: all 6s;
	transform-origin: 52% 70%;
	z-index: 100
}

.door .box {
	position: absolute;
	left: 42.3%;
	bottom: 1.2%;
	width: 18.125%;
	height: 56.56%
}

.door .box .left,
.door .box .right {
	position: absolute;
	width: 50%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-transition: all 3s;
	-moz-transition: all 3s;
	-ms-transition: all 3s;
	-o-transition: all 3s;
	transition: all 3s
}

.door .box .left {
	width: 48.85%;
	transform-origin: 0 0;
	background-position: center right;
}

.door .box .right {
	width: 51.15%;
	right: 0;
	transform-origin: 100% 0;
	background-position: center left;
}

body.open .door .box .left {
	transform: rotateY(90deg)
}

body.open .door .box .right {
	transform: rotateY(90deg)
}

.door .box .pointer {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	left: 50%;
	margin-left: -35px;
	bottom: 44%;
	position: absolute;
	display: none
}

.door .box .pointer:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	background-color: rgba(255, 255, 255, .5);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 2px solid #fff
}

.door .box .pointer:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border: 1px solid #fff;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: jump 1s ease-out infinite;
	-moz-animation: jump 1s ease-out infinite;
	-webkit-animation: jump 1s ease-out infinite;
	-o-animation: jump 1s ease-out infinite
}

@keyframes jump {
	from {
		width: 50px;
		height: 50px
	}

	to {
		width: 100%;
		height: 100%
	}
}

@-moz-keyframes jump {
	from {
		width: 50px;
		height: 50px
	}

	to {
		width: 100%;
		height: 100%
	}
}

@-webkit-keyframes jump {
	from {
		width: 50px;
		height: 50px
	}

	to {
		width: 100%;
		height: 100%
	}
}

@-o-keyframes jump {
	from {
		width: 50px;
		height: 50px
	}

	to {
		width: 100%;
		height: 100%
	}
}

body.open .door.close {
	opacity: 0
}

body.open .door {
	-webkit-transform: scale(8);
	-moz-transform: scale(8);
	-ms-transform: scale(8);
	-o-transform: scale(8);
	transform: scale(8)
}

body.open .snowfall-flakes {
	display: none
}

.main {
	position: relative
}

.bottom_bg {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 229px;
	background: url(../images/zrhj/bottom_bg.jpg) repeat-x
}

.hill {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 70.46875vw;
	height: 18.8vh;
	background: url(../images/zrhj/hill1.png) no-repeat center;
	-webkit-background-size: 70.46875vw 18.8vh;
	background-size: 70.46875vw 18.8vh;
	z-index: 10
}

.cloud {
	position: absolute;
	width: 346px;
	height: 211px;
	background-image: url(../images/zrhj/cloud1.png);
	background-image: -webkit-image-set(url(../images/zrhj/cloud1.png) 1x, url(../images/zrhj/cloud1@2x.png) 2x);
	background-position: right center;
	background-repeat: no-repeat
}

.cloud2 {
	position: absolute;
	width: 220px;
	height: 103px;
	background: url(../images/zrhj/cloud2.png) no-repeat center
}

.environment_box1 {
	position: relative;
	width: 340px
}

.environment_box1:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 39px;
	height: 102px;
	z-index: 2
}

.environment_box2 {
	position: relative;
	padding-right: 200px;
	margin-right: 200px;
	margin-bottom: 60px
}

.environment_box2:after,
.environment_box3:after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: -35px;
	width: 35px;
	background: url(../images/zrhj/z_kuang.png) no-repeat center/100% 100%
}

.environment_box3:after {
	bottom: -100px
}

.environment_box2 .pic {
	position: absolute
}

.environment_box2 .pic img {
	display: block
}

.environment_box2 .pic1 {
	top: 0;
	left: 0;
	width: 1344px
}

.environment_box2 .pic1 img {
	position: relative;
	left: -35px
}

.environment_box2 .pic2 {
	height: 46.945%;
	bottom: -35px;
	right: 0;
	display: flex;
	justify-content: flex-end
}

.environment_box2 .pic2 img {
	max-height: 100%;
	display: block
}

.environment_list {
	position: relative;
	z-index: 2;
	display: flex;
	padding-left: 170px
}

.environment_list li {
	position: relative;
	margin-right: 90px
}

.environment_list li:before {
	content: '';
	position: absolute;
	top: 150px;
	left: -35px;
	width: 173px;
	height: 420px;
	background: url(../images/zrhj/z_line.png) no-repeat bottom center
}

.environment_list .li1 {
	top: 200px;
	width: 360px
}

.environment_list .li1:before {
	height: 437px
}

.environment_list .li2 {
	top: 180px;
	width: 480px
}

.environment_list .li3 {
	width: 480px;
	margin-right: 225px
}

.environment_list .li4 {
	top: 150px;
	width: 1030px
}

.environment_list .tit {
	position: relative;
	top: 30px;
	left: -90px;
	font-size: 38px;
	color: #e4dad7;
	width: 140px;
	height: 140px;
	line-height: 140px;
	background-image: url(../images/zrhj/z-yuan.png);
	background-image: -webkit-image-set(url(../images/zrhj/z-yuan.png) 1x, url(../images/zrhj/z-yuan@2x.png) 2x);
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	text-align: center
}

.environment_list .li4 .tit {
	width: 500px;
	height: 178px;
	line-height: 178px;
	background-image: url(../images/zrhj/z_tuoyuan.png)
}

.environment_list .li4:before {
	top: 140px;
	height: 302px
}

.environment_list .con {
	text-indent: 2em;
	font-size: 24px;
	line-height: 1.2;
	color: #fff;
	letter-spacing: 3px;
	text-align: justify
}

.environment_list .li4 .con {
	padding: 90px 0 0;
	color: #e4dad7
}

.parallax-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 130%;
	height: 100%;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center
}

.environment_box2 {
	background: url(../images/zrhj/bg2.jpg) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	margin-left: -86px
}

.environment_box2 .cloud {
	top: 90px;
	right: 165px
}

.environment_box3 .map {
	position: relative;
	width: 75vw;
	height: auto;
	margin-top: 30px
}

.environment_box3 .map a {
	position: absolute;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 0
}

.environment_box3 .map .circle-small2 a {
	width: 110px;
	height: 110px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-color: #e4dad6;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #506f51;
	font-size: 26px;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
	text-align: center;
	pointer-events: auto
}

.environment_box3 .map .circle-big2 a {
	width: 120px;
	height: 120px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-color: #e4dad6;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #506f51;
	font-size: 26px;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
	text-align: center;
	pointer-events: auto
}

.environment_box3 .map .circle-small2 {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-radius: 50%;
	pointer-events: none;
	z-index: 3;
	animation: roll4 30s linear infinite;
	-moz-animation: roll4 30s linear infinite;
	-webkit-animation: roll4 30s linear infinite;
	-o-animation: roll4 30s linear infinite
}

.environment_box3 .map a.a1 {
	right: 17%;
	top: -1%
}

/* .environment_box3 .map a.a2{right:-7%;top:31%} */
.environment_box3 .map a.a2 {
	right: -4%;
	top: 26%
}

/* .environment_box3 .map a.a3{right:0;top:68%} */
.environment_box3 .map a.a3 {
	right: -3%;
	top: 60%
}

.environment_box3 .map a.a8 {
	right: 20%;
	top: 86%;
}

.environment_box3 .map a.a8,
.environment_box3 .map a.a1,
.environment_box3 .map a.a2,
.environment_box3 .map a.a3 {
	animation: roll3 30s linear infinite;
	-moz-animation: roll3 30s linear infinite;
	-webkit-animation: roll3 30s linear infinite;
	-o-animation: roll3 30s linear infinite
}

.environment_box3 .map .circle-big2 {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	animation: roll3 30s linear infinite;
	-moz-animation: roll3 30s linear infinite;
	-webkit-animation: roll3 30s linear infinite;
	-o-animation: roll3 30s linear infinite;
	border-radius: 50%;
	border: 6px solid #e4dad7;
	box-shadow: 0 0 10px 0 rgba(24, 47, 20, .5)
}

.environment_box3 .map a.a4,
.environment_box3 .map a.a5,
.environment_box3 .map a.a6,
.environment_box3 .map a.a7 {
	animation: roll4 30s linear infinite;
	-moz-animation: roll4 30s linear infinite;
	-webkit-animation: roll4 30s linear infinite;
	-o-animation: roll4 30s linear infinite
}

.environment_box3 .map a.a4 {
	right: 14%;
	top: 4%
}

.environment_box3 .map a.a5 {
	right: 0;
	top: 20%
}

.environment_box3 .map a.a6 {
	right: -5%;
	top: 41%
}

.environment_box3 .map a.a7 {
	right: -3%;
	top: 60%
}

@keyframes roll3 {
	from {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(-30deg);
		-moz-transform: rotate(-30deg);
		-ms-transform: rotate(-30deg);
		-o-transform: rotate(-30deg);
		transform: rotate(-30deg)
	}
}

@-moz-keyframes roll3 {
	from {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(-30deg);
		-moz-transform: rotate(-30deg);
		-ms-transform: rotate(-30deg);
		-o-transform: rotate(-30deg);
		transform: rotate(-30deg)
	}
}

@-webkit-keyframes roll3 {
	from {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(-30deg);
		-moz-transform: rotate(-30deg);
		-ms-transform: rotate(-30deg);
		-o-transform: rotate(-30deg);
		transform: rotate(-30deg)
	}
}

@-o-keyframes roll3 {
	from {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(-30deg);
		-moz-transform: rotate(-30deg);
		-ms-transform: rotate(-30deg);
		-o-transform: rotate(-30deg);
		transform: rotate(-30deg)
	}
}

@keyframes roll4 {
	from {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(30deg);
		-moz-transform: rotate(30deg);
		-ms-transform: rotate(30deg);
		-o-transform: rotate(30deg);
		transform: rotate(30deg)
	}
}

@-moz-keyframes roll4 {
	from {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(30deg);
		-moz-transform: rotate(30deg);
		-ms-transform: rotate(30deg);
		-o-transform: rotate(30deg);
		transform: rotate(30deg)
	}
}

@-webkit-keyframes roll4 {
	from {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(30deg);
		-moz-transform: rotate(30deg);
		-ms-transform: rotate(30deg);
		-o-transform: rotate(30deg);
		transform: rotate(30deg)
	}
}

@-o-keyframes roll4 {
	from {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(30deg);
		-moz-transform: rotate(30deg);
		-ms-transform: rotate(30deg);
		-o-transform: rotate(30deg);
		transform: rotate(30deg)
	}
}

.environment_box3 {
	position: relative;
	padding: 0 175px;
	background: url(../images/zrhj/bg2.jpg) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%
}

.environment_box3 .cloud2 {
	bottom: 20px;
	right: 20%
}

.environment_box3 .txt_box {
	position: absolute;
	top: 38%;
	left: 44%;
	width: 23.215%
}

.environment_box3 .txt_box .tit {
	font-size: 50px;
	line-height: 1.2;
	color: #e4dad7;
	margin-bottom: 25px;
	letter-spacing: 10px;
	text-align: right
}

.environment_box3 .txt_box .con {
	font-size: 24px;
	line-height: 40px;
	color: #e4dad7;
	letter-spacing: 2px;
	text-indent: 2em
}

.environment_box4 {
	display: flex;
	position: relative;
	background: url(../images/zrhj/bg2.jpg) no-repeat;
	-webkit-background-size: 50% 100%;
	background-size: 50% 100%;
	margin-left: 9.8vw
}

.environment_box4 .g-infos02 {
	margin-left: 0
}

.environment_box4 .map {
	position: relative;
	width: 1267px;
	margin-right: 145px;
	margin-top: 60px;
	margin-left: 50px
}

.environment_box4 .map a {
	position: absolute;
	width: 390px;
	height: 90px
}

.environment_box4 .map a.a1 {
	top: 2%;
	left: 27%
}

.environment_box4 .map a.a2 {
	top: 19%;
	left: 15%;
	width: 370px
}

.environment_box4 .map a.a3 {
	top: 41.6%;
	left: 6.8%;
	width: 370px
}

.environment_box4 .map a.a4 {
	top: 74%;
	left: .3%;
	width: 400px;
	z-index: 11
}

.environment_box4 .map a:after,
.environment_box4 .map a:before {
	left: 6%
}

.environment_box4 .map img {
	display: block;
	width: 100%
}

.environment_box4 .cloud {
	position: absolute;
	right: 132px;
	bottom: 41px
}

.environment_box4 .pic img {
	display: block;
	margin-bottom: 14px
}

.environment_box4 .txt_box {
	position: absolute;
	top: 36%;
	left: 43%;
	width: 400px
}

.environment_box4 .txt_box .tit {
	font-size: 60px;
	line-height: 1.2;
	color: #e4dad7;
	text-align: right;
	margin-bottom: 60px
}

.environment_box4 .txt_box .desc {
	font-size: 29px;
	line-height: 50px;
	color: #e4dad7;
	letter-spacing: 2px
}

.environment_box4 .cloud2 {
	bottom: 120px;
	right: 460px
}

.forbidden_area {
	display: flex
}

.forbidden_area li {
	position: relative;
	padding: 156px 60px 50px;
	width: 500px;
	min-height: 937px;
	height: 100vh;
	background-image: url(../images/zrhj/z-bg1.jpg);
	background-image: -webkit-image-set(url(../images/zrhj/z-bg1.jpg) 1x, url(../images/zrhj/z-bg1@2x.jpg) 2x);
	background-position: right center;
	background-repeat: no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	margin-right: 2.86vw
}

.forbidden_area .tit {
	position: absolute;
	top: 6.3vh;
	left: -13px;
	font-size: 29px;
	width: 476px;
	height: 77px;
	line-height: 70px;
	background: url(../images/zrhj/z_tit_bg1.png) no-repeat center;
	-webkit-background-size: 476px auto;
	background-size: 476px auto;
	padding-left: 58px;
	color: #fff
}

.forbidden_area .desc {
	font-family: ALPH-R;
	font-size: 29px;
	line-height: 42px;
	color: #20311d;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
	height: 336px;
	margin-bottom: 20px
}

.forbidden_area li:nth-child(4) .desc {
	-webkit-line-clamp: 11;
	height: 462px;
	margin-bottom: 10px
}

.resources_box1 {
	position: relative;
	padding: 180px 130px 0 330px;
	background: url(../images/zrhj/bg2.jpg) no-repeat center;
	margin-bottom: 100px
}

.resources_box1:after,
.resources_box2:after {
	content: '';
	position: absolute;
	top: 0;
	right: -35px;
	width: 35px;
	bottom: 0;
	background: url(../images/zrhj/z_kuang.png) no-repeat bottom center
}

.g-tit2 {
	position: absolute;
	top: 0;
	left: 90px;
	width: 175px;
	height: 465px;
	padding: 55px 0 0 50px;
	background-image: url(../images/zrhj/tit2_bg.png);
	background-image: -webkit-image-set(url(../images/zrhj/tit2_bg.png) 1x, url(../images/zrhj/tit2_bg@2x.png) 2x);
	background-position: right center;
	background-repeat: no-repeat;
	font-size: 60px;
	color: #e4dad7
}

.g-tit2 span {
	display: block;
	width: 30px;
	line-height: 1.2
}

.resources_box1 .chart {
	width: 73vw;
	margin-bottom: 60px
}

.resources_box1 .chart img {
	display: block;
	width: 100%
}

.resources_box1 .txt {
	font-size: 29px;
	color: #e4dad7;
	max-width: 1110px;
	margin: 0 auto;
	text-indent: 2em;
}

.resources_box2 {
	position: relative;
	padding: 80px 157px 0 386px;
	background: url(../images/zrhj/bg2.jpg) no-repeat center;
	margin-bottom: 120px;
	margin-left: 121px
}

.resources_box2 .cloud {
	bottom: 30px;
	left: -216px
}

.resources_box2 .pic_txt {
	width: 60.26vw
}

.resources_box2 .hill {
	bottom: -140px;
	left: 700px
}

.resources_box2 .pic_txt .pic {
	margin-bottom: 50px
}

.resources_box2 .pic img {
	display: block;
	width: 100%
}

.resources_box2 .txt {
	font-size: 29px;
	color: #e4dad7
}

.resources_box2 .txt p {
	text-indent: 2em
}

.resources_box3 {
	position: relative;
	padding: 110px 210px 0
}

.resources_box3 .pic_box {
	display: flex
}

.resources_box3 .pic_box .pic {
	height: 511px;
	margin: 0 10px
}

.resources_box3 .pic_box .pic img {
	display: block;
	height: 100%
}

.resources_box3 .txt_box {
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 1634px;
	height: 633px;
	padding: 170px 230px 0 300px;
	background-image: url(../images/zrhj/z_bg3.png);
	background-image: -webkit-image-set(url(../images/zrhj/z_bg3.png) 1x, url(../images/zrhj/z_bg3@2x.png) 2x);
	background-position: right center;
	background-repeat: no-repeat;
	-webkit-background-size: 1634px auto;
	background-size: 1634px auto
}

.resources_box3 .txt_box .g-tit2 {
	top: 103px
}

.resources_box3 .txt_box .txt {
	font-size: 29px;
	line-height: 50px;
	color: #fff;
	letter-spacing: 2px;
	text-indent: 2em;
}

.resources_box3 .cloud {
	right: 240px;
	bottom: 37px
}

.painted_scroll {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	/* width:1867px; */
	width: 1733px;
	height: 940px;
	margin: 0 auto;
	z-index: 10;
	cursor: pointer
}

.l-pic-index {
	position: absolute;
	left: 822px;
	top: 0;
	z-index: 2;
	width: 47px;
	height: 940px;
	background: url(../images/zrhj/j1.png) no-repeat center
}

.r-pic-index {
	position: absolute;
	right: 822px;
	top: -1px;
	z-index: 2;
	width: 48px;
	height: 940px;
	background: url(../images/zrhj/j4.png) no-repeat center
}

/* .l-bg-index{position:absolute;top:33px;left:50%;z-index:1;width:0;height:882px;background:url(../images/zrhj/j2.jpg) no-repeat right center / auto 100%} */
.l-bg-index {
	position: absolute;
	top: 33px;
	left: 50%;
	z-index: 1;
	width: 0;
	height: 882px;
	background: url(../images/zrhj/j2-2.png) no-repeat right center / auto 100%
}

/* .r-bg-index{position:absolute;top:33px;right:50%;z-index:1;width:0;height:882px;background:url(../images/zrhj/j3.jpg) no-repeat left center / auto 100%} */
.r-bg-index {
	position: absolute;
	top: 33px;
	right: 50%;
	z-index: 1;
	width: 0;
	height: 882px;
	background: url(../images/zrhj/j3-3.png) no-repeat left center / auto 100%
}

.main-index {
	overflow: hidden;
	zoom: 1;
	position: absolute;
	z-index: 5;
	left: 275px;
	right: 275px;
	top: 170px;
	color: #2e2e2e
}

.intro-text {
	font-size: 27px;
	line-height: 1.75
}

.intro-text p {
	text-indent: 2em
}

.painted_scroll .bird {
	position: absolute;
	z-index: 101
}

.painted_scroll .bird img {
	display: block;
	width: 100%
}

.painted_scroll .bird1 {
	top: -1570px;
	right: 0;
	width: 230px;
	height: 157px
}

.painted_scroll .bird2 {
	right: 0;
	top: -2000px;
	width: 198px;
	height: 200px
}

#stars {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none
}

.star {
	display: block;
	width: 1px;
	background: 0 0;
	position: relative;
	opacity: 0;
	animation: star-fall 3s linear infinite;
	-webkit-animation: star-fall 3s linear infinite;
	-moz-animation: star-fall 3s linear infinite
}

.star:after {
	content: '';
	display: block;
	border: 0 solid #fff;
	border-width: 0 90px 2px 90px;
	border-color: transparent transparent transparent rgba(255, 255, 255, 1);
	box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
	transform: rotate(-45deg) translate3d(1px, 3px, 0);
	-webkit-transform: rotate(-45deg) translate3d(1px, 3px, 0);
	-moz-transform: rotate(-45deg) translate3d(1px, 3px, 0);
	transform-origin: 0 100%;
	-webkit-transform-origin: 0 100%;
	-moz-transform-origin: 0 100%
}

#stars .star:nth-child(5),
#stars .star:nth-child(6),
#stars .star:nth-child(7) {
	z-index: 100
}

@keyframes star-fall {
	0% {
		opacity: 0;
		transform: scale(1) translate3d(0, 0, 0);
		-webkit-transform: scale(1) translate3d(0, 0, 0);
		-moz-transform: scale(1) translate3d(0, 0, 0)
	}

	50% {
		opacity: 1;
		transform: scale(1.5) translate3d(-200px, 200px, 0);
		-webkit-transform: scale(1.5) translate3d(-200px, 200px, 0);
		-moz-transform: scale(1.5) translate3d(-200px, 200px, 0)
	}

	100% {
		opacity: 0;
		transform: scale(2) translate3d(-300px, 300px, 0);
		-webkit-transform: scale(2) translate3d(-300px, 300px, 0);
		-moz-transform: scale(2) translate3d(-300px, 300px, 0)
	}
}

.g-infos01 .infos p {
	text-indent: 2em
}

.mobile_tip {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .9);
	z-index: 1000
}

.mobile_tip .box {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}

.mobile_tip .box img {
	display: block;
	margin: 0 auto 10px
}

.mobile_tip .box p {
	text-align: center;
	font-size: 20px;
	color: #fff
}

.swiper_pop {
	overflow: hidden
}

.swiper_pop .swiper-arrow {
	position: absolute;
	top: 50%;
	margin-top: -27px;
	width: 36px;
	height: 54px;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer
}

.swiper_pop .swiper-arrow.swiper-prev {
	left: 30px;
	background-image: url(../images/zrhj/z_prev.png)
}

.swiper_pop .swiper-arrow.swiper-next {
	right: 30px;
	background-image: url(../images/zrhj/z_next.png)
}

.pop-dzdm .txt .tit {
	font-weight: 700
}

.pop-forbidden .pop-dzdm-body {
	width: 1043px;
	height: 521px;
	background: url(../images/zrhj/z_bg4.png) no-repeat center
}

.pop-forbidden .desc {
	font-size: 20px;
	margin-bottom: 10px
}

.pop-forbidden .pic {
	display: flex;
	justify-content: space-between
}

.pop-forbidden .pic img {
	height: 214px
}

.pop-forbidden2 .pop-dzdm-body {
	display: flex;
	align-items: center;
	justify-content: space-between
}

.pop-forbidden2 .pop-dzdm-body .desc {
	font-size: 20px;
	flex: 0 0 50%
}

.pop-forbidden2 .pop-dzdm-body .img {
	flex: 0 0 45%
}

.index-open {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 99999;
	-webkit-transition: all 3s ease-in-out;
	-moz-transition: all 3s ease-in-out;
	-ms-transition: all 3s ease-in-out;
	-o-transition: all 3s ease-in-out;
	transition: all 3s ease-in-out;
	transform-origin: center center
}

.index-open .open-top {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50.5%;
	overflow: hidden;
	-webkit-transition: all 3s ease-in-out;
	-moz-transition: all 3s ease-in-out;
	-ms-transition: all 3s ease-in-out;
	-o-transition: all 3s ease-in-out;
	transition: all 3s ease-in-out
}

.index-open .open-bot {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 50.5%;
	overflow: hidden;
	-webkit-transition: all 3s ease-in-out;
	-moz-transition: all 3s ease-in-out;
	-ms-transition: all 3s ease-in-out;
	-o-transition: all 3s ease-in-out;
	transition: all 3s ease-in-out
}

.index-open .open-top img {
	position: absolute;
	min-width: 100%;
	height: 100%;
	max-width: none;
	bottom: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}

.index-open .open-bot img {

	position: absolute;
	min-width: 100%;
	height: 100%;
	max-width: none;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}

.index-open.split .open-top {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%)
}

.index-open.split .open-bot {
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-ms-transform: translateY(100%);
	-o-transform: translateY(100%);
	transform: translateY(100%)
}

.index-txt {
	position: absolute;
	bottom: 22%;
	height: 316px;
	left: 0;
	width: 100%;
	z-index: 9999
}

.index-txt:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .3);
	opacity: 0;
	-webkit-transition: all 1s ease-in-out 1s;
	-moz-transition: all 1s ease-in-out 1s;
	-ms-transition: all 1s ease-in-out 1s;
	-o-transition: all 1s ease-in-out 1s;
	transition: all 1s ease-in-out 1s;
	z-index: 1
}

.index-txt.show:after {
	opacity: 1;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out
}

.index-txt-con {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-width: 1030px;
	color: #fff;
	font-size: 38px;
	font-family: YanShiQiuHongKai;
	text-indent: 2em;
	width: 100%;
	opacity: 0;
	text-shadow: 0 0 50px #fff;
	-webkit-transition: all 3s ease-out;
	-moz-transition: all 3s ease-out;
	-ms-transition: all 3s ease-out;
	-o-transition: all 3s ease-out;
	transition: all 3s ease-out;
	z-index: 2;
	filter: blur(20px);
	-webkit-font-smoothing: subpixel-antialiased;
	line-height: 1.3
}

.index-txt.show .index-txt-con {
	opacity: 1;
	text-shadow: 0 0 1px #fff;
	filter: blur(0);
	-webkit-transition: all 3s ease-out 1s;
	-moz-transition: all 3s ease-out 1s;
	-ms-transition: all 3s ease-out 1s;
	-o-transition: all 3s ease-out 1s;
	transition: all 3s ease-out 1s
}

.cloud.single {
	top: 30px;
	left: 30px;
	z-index: 10
}

.cloud,
.cloud-animal,
.cloud2,
.resources-infos-txt>img {
	animation: upDown 3s linear infinite alternate;
	-moz-animation: upDown 3s linear infinite alternate;
	-webkit-animation: upDown 3s linear infinite alternate;
	-o-animation: upDown 3s linear infinite alternate
}

.cloud-zhibei,
.icloud,
.icloud2 {
	animation: upDown 3s linear 1.5s infinite alternate;
	-moz-animation: upDown 3s linear 1.5s infinite alternate;
	-webkit-animation: upDown 3s linear 1.5s infinite alternate;
	-o-animation: upDown 3s linear 1.5s infinite alternate;
	z-index: 20
}

.cloud-hr1,
.cloud-turang {
	animation: upDown 3s linear 1s infinite alternate;
	-moz-animation: upDown 3s linear 1s infinite alternate;
	-webkit-animation: upDown 3s linear 1s infinite alternate;
	-o-animation: upDown 3s linear 1s infinite alternate;
	z-index: 20
}

.rock-group .icloud {
	z-index: 20
}

@keyframes upDown {
	from {
		transform: translateY(0)
	}

	to {
		transform: translateY(-40px)
	}
}

@-moz-keyframes upDown {
	from {
		transform: translateY(0)
	}

	to {
		transform: translateY(-40px)
	}
}

@-webkit-keyframes upDown {
	from {
		transform: translateY(0)
	}

	to {
		transform: translateY(-40px)
	}
}

@-o-keyframes upDown {
	from {
		transform: translateY(0)
	}

	to {
		transform: translateY(-40px)
	}
}

.g-infos01 .title .title_body {
	color: #e4dad7;
	border-left: none;
	position: relative;
	font-weight: 700;
	padding-left: 36px
}

.g-infos01 .title .title_body:After {
	content: '';
	position: absolute;
	left: 0;
	width: 4px;
	top: 10px;
	bottom: 10px;
	background-color: #e4dad7
}

.g-infos01 .infos p {
	line-height: 43px;
	letter-spacing: 2px
}

.pages-left-title {
	font-size: 50px;
	color: #000
}

.g-infos01 {
	width: 660px;
	padding: 75px 160px 0
}

.g-infos01 .title {
	font-size: 52px
}

.g-infos01-sp {
	padding-left: 131px;
	padding-right: 131px;
	padding-top: 30px
}

.g-infos01-sp .title {
	margin-bottom: 30px
}

.g-infos02 {
	height: 96vh;
	left:-10vh;
	background: 0 0
}

.title-block {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%
}

.title-block img {
	height: 100%;
	width: auto;
	max-width: none;
	display: block
}

.item-natural {
	position: relative;
	overflow: visible;
	background: 0 0
}

.zrfg-pic {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%
}

.zrfg-pic img {
	display: block;
	height: 100%;
	max-width: none
}

.natural-content2 {
	position: relative;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	background: 0 0;
	z-index: 3
}

.natural-content2:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../images/zrhj/zp8.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp8.png) 1x, url(../images/zrhj/zp8@2x.png) 2x);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center
}

.g-infos01 {
	z-index: 4
}

.islangs .pic-txt::after {
	display: none
}

.bottom-line {
	height: 200px
}

.bottom-line.bottom-line-n2 {
	width: 125%
}

.swiper-scroll .swiper-slide.climate,
.swiper-scroll .swiper-slide.turang {
	background: 0 0;
	position: relative
}

.swiper-scroll .swiper-slide.climate .qh-bg,
.swiper-scroll .swiper-slide.turang .tr-bg {
	position: absolute;
	width: 100%;
	height: calc(100vh - 125px);
	top: 0;
	left: 0;
	background-image: url(../images/zrhj/zp14.png);
	background-image: -webkit-image-set(url(../images/zrhj/zp14.png) 1x, url(../images/zrhj/zp14@2x.png) 2x);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: 100% center;
	z-index: 2
}

.water-info-pan {
	position: relative;
	z-index: 2;
	height: calc(100vh - 125px)
}

.islangs .pic-txt {
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 3;
	width: 120%;
	bottom: 117px
}

.islangs {
	width: 407px
}

.islangs .pic-txt .line {
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transform: scale(.8);
	-moz-transform: scale(.8);
	-ms-transform: scale(.8);
	-o-transform: scale(.8);
	transform: scale(.8)
}

.swiper-scroll .swiper-slide.turang .tr-bg {
	height: calc(100vh - 150px);
	background-image: url(../images/zrhj/tr-bg.png);
	background-image: -webkit-image-set(url(../images/zrhj/tr-bg.png) 1x, url(../images/zrhj/tr-bg@2x.png) 2x)
}

.swiper-scroll .swiper-slide.turang .tr-bg:before {
	content: '';
	position: absolute;
	width: 200px;
	top: 0;
	left: 100%;
	bottom: 50px;
	background: linear-gradient(to right, rgba(24, 47, 20, .5) 0, rgba(24, 47, 20, 0) 100%)
}

.turang-info {
	position: relative;
	z-index: 3
}

.animal-botany2 {
	height: calc(100vh - 172px);
	background-image: url(../images/zrhj/dw-bg.png);
	background-image: -webkit-image-set(url(../images/zrhj/dw-bg.png) 1x, url(../images/zrhj/dw-bg@2x.png) 2x)
}

.pic-txt-grop2 {
	height: 715px;
	width: 750px;
	margin: 40px 150px 0 90px
}

.pic-txt-grop2 .pic1 {
	width: 264px
}

.pic-txt-grop2 .pic2 {
	top: 157px;
	left: 0;
	width: 264px
}

.pic-txt-grop2 .pic3 {
	bottom: 98px;
	left: 0;
	width: 264px
}

.pic-txt-grop2 .pic4 {
	top: 0;
	left: 273px;
	width: 260px
}

.pic-txt-grop2 .pic5 {
	bottom: 98px;
	width: 211px;
	left: 273px
}

.pic-txt-grop2 .pic6 {
	top: 0;
	right: 0;
	width: 207px
}

.pic-txt-grop2 .txt {
	width: 255px;
	line-height: 1.3
}

.animal-botany {
	height: calc(100vh - 145px)
}

.animal-botany2:After {
	content: '';
	width: 200px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: linear-gradient(to right, rgba(24, 47, 20, .8) 0, rgba(24, 47, 20, 0) 100%);
	z-index: -1
}

.animal-botany2:before {
	content: '';
	position: absolute;
	width: 200px;
	top: 0;
	left: 100%;
	bottom: 30px;
	background: linear-gradient(to right, rgba(24, 47, 20, .8) 0, rgba(24, 47, 20, 0) 100%)
}

.pic-txt-grop1 {
	margin-right: 140px;
	margin-top: 80px;
	margin-left: 0;
	width: 820px;
	height: 685px
}

.pic-txt-grop1 .pic1,
.pic-txt-grop1 .pic2,
.pic-txt-grop1 .pic3 {
	width: 305px
}

.pic-txt-grop1 .pic2 {
	top: 295px
}

.pic-txt-grop1 .pic5,
.pic-txt-grop1 .pic6 {
	width: 265px
}

.pic-txt-grop1 .pic6 {
	top: 153px
}

.pic-txt-grop1 .pic4 {
	width: 226px;
	left: 317px
}

.pic-txt-grop1 .txt {
	bottom: 35px;
	right: 70px;
	width: 391px
}

.resources_box1,
.resources_box2,
.resources_box3,
.resources_content1 {
	position: relative;
	z-index: 2
}

.swiper-slide.zrzy {
	margin-right: -75px
}

.resources_box1:after,
.resources_box2:after {
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%
}

.resources_box2 .cloud {
	bottom: 90px
}

.resources_box1 {
	margin-bottom: 81px
}

.resources_box1:before {
	content: '';
	position: absolute;
	width: 200px;
	top: 0;
	left: 100%;
	bottom: 59px;
	background: linear-gradient(to right, rgba(24, 47, 20, .8) 0, rgba(24, 47, 20, 0) 100%)
}

.resources_box2:before {
	content: '';
	position: absolute;
	width: 200px;
	top: 0;
	left: 100%;
	bottom: 59px;
	background: linear-gradient(to right, rgba(24, 47, 20, .8) 0, rgba(24, 47, 20, 0) 100%)
}

.resources_box1:after,
.resources_box2:after {
	right: -34px
}

.resources_box2 {
	margin-bottom: 140px
}

.resources_box2 .pic {
	max-width: 930px
}

.resources_box2 .pic_txt {
	width: auto
}

.resources_box2 .txt {
	max-width: 930px
}

.resources_content1 {
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%
}

.resources_content1:before {
	content: '';
	position: absolute;
	width: 200px;
	top: 0;
	left: 100%;
	bottom: 200px;
	background: linear-gradient(to right, rgba(24, 47, 20, .6) 0, rgba(24, 47, 20, 0) 100%)
}

.resources_content1:after {
	content: '';
	position: absolute;
	width: 150px;
	top: 0;
	right: 100%;
	bottom: 0;
	background: linear-gradient(to left, rgba(24, 47, 20, .3) 0, rgba(24, 47, 20, 0) 100%)
}

.environment_box2,
.environment_box3,
.environment_box4 {
	position: relative;
	z-index: 2
}

.environment_box2:before {
	content: '';
	position: absolute;
	width: 200px;
	top: 0;
	left: 100%;
	bottom: 142px;
	background: linear-gradient(to right, rgba(24, 47, 20, .8) 0, rgba(24, 47, 20, 0) 100%)
}

.environment_box3:before {
	content: '';
	position: absolute;
	width: 200px;
	top: 0;
	left: 100%;
	bottom: 0;
	background: linear-gradient(to right, rgba(24, 47, 20, .8) 0, rgba(24, 47, 20, 0) 100%)
}

.environment_box4 {
	margin-bottom: 70px;
	background-position: 200px center
}

.environment_box4 .hill {
	bottom: -70px
}

.forbidden_area {
	position: relative
}

.forbidden_area:before {
	content: '';
	position: absolute;
	right: 100%;
	top: 0;
	height: 100vh;
	background: linear-gradient(to left, rgba(24, 47, 20, .3) 0, rgba(24, 47, 20, 0) 100%);
	width: 100px
}

.forbidden_area li {
	box-shadow: 0 0 50px 0 rgba(24, 47, 20, .8)
}

.painted_scroll .bird1-warp,
.painted_scroll .bird2-warp {
	position: relative;
	z-index: 101
}

.painted_scroll .bird1-warp.upDown {
	animation: upDown 3s linear infinite alternate;
	-moz-animation: upDown 3s linear infinite alternate;
	-webkit-animation: upDown 3s linear infinite alternate;
	-o-animation: upDown 3s linear infinite alternate
}

.painted_scroll .bird2-warp.upDown {
	animation: upDown 3s linear infinite alternate;
	-moz-animation: upDown 3s linear infinite alternate;
	-webkit-animation: upDown 3s linear infinite alternate;
	-o-animation: upDown 3s linear infinite alternate
}

.header {
	box-shadow: 0 4px 26px 7px rgba(0, 0, 0, .4)
}

.ul-natural1 li .pic {
	box-shadow: none
}

.ul-natural1 li:last-child {
	position: relative;
	left: 17px
}

.beijing-wearher {
	zoom: .9
}

.beijing-wearher-pan {
	padding-top: 80px
}

.beijing-wearher span em {
	color: #21321e
}

.ul-pics li {
	width: 360px
}

.g-tit2 {
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 131px;
	height: 387px;
	font-size: 52px;
	padding: 45px 0 0 38px
}

.resources_box2 .g-tit2 {
	padding-top: 65px
}

.resources_box3 .pic_box .pic {
	height: 444px
}

.resources_box3 .txt_box {
	height: 550px;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	padding-top: 147px
}

.resources_box3 .txt_box .g-tit2 {
	top: 89px
}

.resources_box3 .txt_box .txt {
	font-size: 25px;
	line-height: 43px
}

.resources-infos-txt {
	width: 758px;
	height: 758px;
	position: relative;
	top: 90px
}

.resources-infos-stone {
	width: 1224px;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	bottom: 100px
}

.resources_content1+.hill {
	left: 55%
}

.zrfg .hill {
	left: 50%
}

.environment_box3+.hill {
	left: -22%
}

.environment_box3 {
	display: flex;
	align-items: flex-end
}

.pop-forbidden .desc {
	text-indent: 2em
}

.environment_list .con {
	position: relative;
	top: 30px
}

.environment_list .li1 {
	width: 335px
}

.environment_list .li2 {
	width: 400px
}

.environment_list .li3 {
	width: 420px;
	position: relative;
	top: 30px
}

.environment_list .li1:before,
.environment_list li:before {
	height: 450px
}

.environment_list .li4 {
	width: 860px
}

.pop-dzdm .txt {
	text-indent: 2em;
	font-size: 24px;
	text-align: justify
}

.pop-dzdm .txt p {
	margin-bottom: 10px
}

.water-pic-hp {
	display: flex;
	align-items: center;
	justify-content: space-between
}

.water-pic-hp img {
	display: block;
	width: 100%
}

.pop-dzdm .pop-dzdm-body {
	height: auto
}

.pop-dzdm .swiper_pop.df .txt {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 30px
}

.pop-dzdm .swiper_pop.df .swiper-slide {
	height: auto
}

.wd-pop2 {
	display: flex;
	align-items: center;
	padding: 0 30px;
	height: 100%
}

.wd-pop2 .left {
	flex: 0 0 60%
}

.wd-pop2 .left .tit {
	color: #20311d;
	font-size: 24px;
	margin-bottom: 10px
}

.wd-pop2 .left p {
	color: #20311d;
	font-size: 24px;
	font-weight: lighter;
	text-align: justify;
	text-indent: 2em
}

.wd-pop2 .right {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	margin-left: 20px
}

.wd-pop2 .right img {
	display: block;
	width: 100%
}

.wd-pop3 {
	text-align: center;
	font-size: 24px;
	color: #20311d;
	padding: 0 30px
}

.wd-pop3 .tit1 {
	margin-bottom: 20px
}

.wd-pop3 .txt1 {
	margin: 0 auto 50px;
	max-width: 73%;
	text-align: -webkit-left;
    text-indent: 2em;
}

.wd-pop3 .tit2 {
	margin-bottom: 20px;
    text-align: -webkit-left;
    text-indent: 6em;
}

.wd-pop3 .pic {
	width: 60%;
	margin: 0 auto
}

.wd-pop3 .pic img {
	display: block;
	width: 100%
}

.wd-pop2.sd .left {
	flex: 0 0 35%;
	text-align: justify
}

.wd-pop2.sd .right {
	display: block;
	text-align: center;
	font-size: 24px;
	color: #20311d
}

.wd-pop2.sd .right .tit {
	margin-bottom: 20px
}

.wd-pop2.sd .right img {
	display: block;
	margin: 0 auto;
	max-width: 60%
}

.pop-dzdm-body.sd {
	width: 970px
}

.sj-pop {
	height: 100%;
	display: flex;
	align-items: center;
	color: #20311d
}

.sj-pop .left {
	flex: 0 0 50%;
	font-size: 24px;
	text-indent: 2em;
	text-align: justify;
}

.sj-pop .right p {
	text-align: right;
	font-size: 16px
}

.wd-pop3.qy .pic {
	width: 80%;
	margin: 80px auto 20px
}

.wd-pop2.qy .left {
	flex: 0 0 45%
}

.cs-pop1 .text {
	font-size: 24px;
	color: #20311d;
	margin-bottom: 20px;
	text-indent: 2em;
	text-align: justify
}

.cs-pop1 .text span {
	font-weight: 700
}

.cs-pop1 .pic {
	max-width: 80%;
	margin: 0 auto
}

.cs-pop1 .pic img {
	display: block;
	width: 100%
}

.cs-pop2 {
	font-size: 24px;
	color: #20311d
}

.cs-pop2 .text+.text {
	margin-top: 50px
}

.beijing-wearher span {
	cursor: pointer
}

.title-block {
	pointer-events: none
}

.pop-forbidden .desc {
	color: #20311d;
	font-size: 24px
}

.painted_scroll .bird1,
.painted_scroll .bird2 {
	top: -340px;
	right: -100px
}

.painted_scroll .bird1.move {
	animation: aa 2s cubic-bezier(.42, 0, 1, 1) .5s forwards
}

.painted_scroll .bird1.move img {
	animation: bb 2s cubic-bezier(0, 0, .58, 1) .5s forwards
}

@keyframes aa {
	to {
		transform: translate(-420px, 0)
	}
}

@keyframes bb {
	to {
		transform: translate(0, 380px)
	}
}

.painted_scroll .bird2.move {
	animation: cc 2s cubic-bezier(.42, 0, 1, 1) forwards
}

.painted_scroll .bird2.move img {
	animation: dd 2s cubic-bezier(0, 0, .58, 1) forwards
}

@keyframes cc {
	to {
		transform: translate(-180px, 0)
	}
}

@keyframes dd {
	to {
		transform: translate(0, 280px)
	}
}

.weather-map-warp {
	opacity: 0;
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-ms-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s
}

.circle-big-warp {
	opacity: 0;
	-webkit-transition: opacity .5s .5s;
	-moz-transition: opacity .5s .5s;
	-ms-transition: opacity .5s .5s;
	-o-transition: opacity .5s .5s;
	transition: opacity .5s .5s
}

.circle-small-warp {
	opacity: 0;
	-webkit-transition: opacity .5s 1s;
	-moz-transition: opacity .5s 1s;
	-ms-transition: opacity .5s 1s;
	-o-transition: opacity .5s 1s;
	transition: opacity .5s 1s
}

.beijing-wearher-pan.show .circle-big-warp,
.beijing-wearher-pan.show .circle-small-warp,
.beijing-wearher-pan.show .weather-map-warp {
	opacity: 1
}

.resources-infos-txt {
	opacity: 0;
	-webkit-transform: translateX(100px);
	-moz-transform: translateX(100px);
	-ms-transform: translateX(100px);
	-o-transform: translateX(100px);
	transform: translateX(100px);
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s
}

.resources-infos-stone {
	opacity: 0;
	-webkit-transition: all .5s .5s;
	-moz-transition: all .5s .5s;
	-ms-transition: all .5s .5s;
	-o-transition: all .5s .5s;
	transition: all .5s .5s;
	-webkit-transform: translateX(100px);
	-moz-transform: translateX(100px);
	-ms-transform: translateX(100px);
	-o-transform: translateX(100px);
	transform: translateX(100px)
}

.resources-infos-txt.show {
	opacity: 1;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0)
}

.resources-infos-txt.show .resources-infos-stone {
	opacity: 1;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0)
}

.environment_box2 .pic1 {
	opacity: 0;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s
}

.environment_box2 .pic2 {
	opacity: 0;
	-webkit-transform: translateX(50%);
	-moz-transform: translateX(50%);
	-ms-transform: translateX(50%);
	-o-transform: translateX(50%);
	transform: translateX(50%);
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s
}

.environment_list .tit {
	opacity: 0;
	-webkit-transition: all .5s .5s;
	-moz-transition: all .5s .5s;
	-ms-transition: all .5s .5s;
	-o-transition: all .5s .5s;
	transition: all .5s .5s
}

.environment_list li:before {
	opacity: 0;
	-webkit-transition: all .5s 1s;
	-moz-transition: all .5s 1s;
	-ms-transition: all .5s 1s;
	-o-transition: all .5s 1s;
	transition: all .5s 1s
}

.environment_list .con {
	opacity: 0;
	-webkit-transition: all .5s 1.5s;
	-moz-transition: all .5s 1.5s;
	-ms-transition: all .5s 1.5s;
	-o-transition: all .5s 1.5s;
	transition: all .5s 1.5s
}

.environment_box2.show .environment_list .con,
.environment_box2.show .environment_list .tit,
.environment_box2.show .environment_list li:before,
.environment_box2.show .pic1,
.environment_box2.show .pic2 {
	opacity: 1;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0)
}

.environment_box3 .map {
	width: 1440px;
	height: 916px;
	position: relative
}

.zh-map {
	position: absolute;
	top: 0;
	left: 0;
	width: 770px;
	z-index: 4
}

.circle-small2-warp {
	position: absolute;
	top: 14%;
	left: 28%;
	width: 702px;
	height: 702px;
	border-radius: 50%;
	box-shadow: 0 0 10px 0 rgba(24, 47, 20, .5)
}

.zh-yuan img {
	display: block;
	width: 100%;
	height: 100%
}

.environment_box3 .txt_box {
	z-index: 2
}

.zh-map {
	opacity: 0;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s
}

.circle-big2-warp {
	opacity: 0;
	-webkit-transition: all .5s .5s;
	-moz-transition: all .5s .5s;
	-ms-transition: all .5s .5s;
	-o-transition: all .5s .5s;
	transition: all .5s .5s;
	position: absolute;
	top: 5%;
	left: 17.3%;
	width: 1152px;
	height: 1152px;
	border-radius: 50%
}

.circle-small2-warp {
	background-image: url(../images/zrhj/zh-yuan.png);
	background-image: -webkit-image-set(url(../images/zrhj/zh-yuan.png) 1x, url(../images/zrhj/zh-yuan@2x.png) 2x);
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%
}

.circle-small2-warp,
.environment_box3 .txt_box,
.zh-yuan {
	opacity: 0;
	-webkit-transition: all .5s 1s;
	-moz-transition: all .5s 1s;
	-ms-transition: all .5s 1s;
	-o-transition: all .5s 1s;
	transition: all .5s 1s
}

.environment_box3.show .circle-big2-warp,
.environment_box3.show .circle-small2-warp,
.environment_box3.show .txt_box,
.environment_box3.show .zh-map,
.environment_box3.show .zh-yuan {
	opacity: 1
}

.pop-forbidden .pic img {
	height: 240px
}

.pop-dzdm-body.shuiwen {
	width: 900px
}

.pop-dzdm-body.shuiwen .df {
	display: flex;
	align-items: center;
	justify-content: space-between
}

.pop-dzdm-body.shuiwen .df p {
	flex: 0 0 40%;
	text-align: justify
}

.pop-dzdm-body.shuiwen .df img {
	width: 55%
}

.pic-txt-water img {
	opacity: 0;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s
}

.pic-txt-water .txt {
	opacity: 0;
	-webkit-transition: all .5s .5s;
	-moz-transition: all .5s .5s;
	-ms-transition: all .5s .5s;
	-o-transition: all .5s .5s;
	transition: all .5s .5s
}

.ul-water {
	opacity: 0;
	-webkit-transition: all .5s 1s;
	-moz-transition: all .5s 1s;
	-ms-transition: all .5s 1s;
	-o-transition: all .5s 1s;
	transition: all .5s 1s
}

.water-pic.show .pic-txt-water .txt,
.water-pic.show .pic-txt-water img,
.water-pic.show .ul-water {
	opacity: 1
}

.pages-left-title {
	position: relative;
	z-index: 10;
	height: 100vh
}

.pages-left-title img {
	height: 100%;
	width: auto;
	display: block
}

.natural-content2-body {
	width: 800px;
	height: 776px;
	margin: 0 auto
}

.natural-content2 {
	min-width: 1000px
}

.environment_box2-warp {
	width: 2680px;
	height: 937px
}

.environment_box4 .map {
	height: 807px
}

.water-info {
	width: 1380px;
	height: 812px
}

.hill {
	pointer-events: none
}

/* body.paddingLeft{pointer-events:none} */
body.eventAllow {
	pointer-events: auto
}

@media only screen and (max-height:999px) {
	.forbidden_area .desc {
		font-size: 24px;
		line-height: 36px;
		height: 288px;
		-webkit-line-clamp: 7;
		margin-bottom: 0;
		text-indent: 2em;
		text-align: justify;
	}

	.forbidden_area li:nth-child(4) .desc {
		height: 396px
	}

	.painted_scroll {
		zoom: .9
	}

	.resources_box2 .txt {
		font-size: 26px
	}

	.resources_box2 {
		padding: 50px 150px 0 360px
	}

	.resources_box2 .pic_txt .pic {
		margin-bottom: 30px
	}

	.resources_box3 {
		padding: 60px 200px 0
	}
}

@media only screen and (max-height:899px) {
	.painted_scroll {
		zoom: .7
	}
}

@media only screen and (max-height:799px) {
	.painted_scroll {
		zoom: .6
	}

	.bottom-line {
		height: 100px
	}

	.video-button {
		margin-top: 30px
	}

	.g-infos01 {
		width: 500px;
		padding: 50px 100px 0
	}

	.g-infos01 * {
		zoom: .8
	}

	.natural-content2-body {
		zoom: .7
	}

	.natural-content2 {
		width: calc(100% - 500px)
	}

	.beijing-wearher {
		zoom: .6
	}

	.beijing-wearher-pan {
		padding-top: 30px
	}

	.beijing-wearher-pan {
		width: 800px
	}

	.bottom-line.bottom-line-n2 {
		width: 200%
	}

	.islangs {
		width: 210px
	}

	.islangs .pic-txt p {
		font-size: 20px
	}

	.ul-water {
		top: 50px
	}

	.ul-pics li {
		width: 210px
	}

	.pics-bottom .pic p {
		bottom: 65%;
		left: 10%;
		font-size: 16px
	}

	.resources_box1 {
		padding: 80px 100px 0 300px
	}

	.resources_box1 .chart {
		width: 55vw
	}

	.resources_box1 .txt {
		font-size: 18px;
		width: 600px;
		max-width: none
	}

	.resources_box1 .chart {
		margin: 0 auto 60px
	}

	.resources_box3 .pic_box .pic {
		height: 300px
	}

	.resources-infos-txt.show {
		zoom: .8
	}

	.resources-infos-txt.show {
		zoom: .6;
		top: -80px
	}

	.resources-infos-stone {
		width: 1024px;
		left: -20%
	}

	.resources-infos-stone .item-stone p {
		bottom: 20px
	}

	.item-natural {
		margin-right: 0
	}

	.environment_box2-warp {
		zoom: .7
	}

	.environment_box3 .map {
		zoom: .65
	}

	.environment_box4 .map {
		zoom: .6
	}

	.forbidden_area li {
		zoom: .65;
		height: 1080px
	}

	.resources_box2 .pic {
		max-width: 700px;
		margin: 0 auto 30px
	}

	.resources_box2 .txt {
		font-size: 18px
	}

	.swiper-scroll .swiper-slide.climate .qh-bg,
	.water-info-pan {
		height: calc(100vh - 45px)
	}

	.swiper-scroll .swiper-slide.turang .tr-bg {
		height: calc(100vh - 83px)
	}

	.animal-botany {
		height: calc(100vh - 49px)
	}

	.animal-botany2 {
		height: calc(100vh - 70px)
	}

	.islangs .pic-txt {
		bottom: 43px
	}

	.swiper-scroll .swiper-slide.turang .tr-bg:before {
		bottom: 17px
	}

	.resources_box1 {
		margin-bottom: 16px
	}

	.resources_box1:before {
		bottom: 43px
	}

	.resources_box2 {
		margin-left: 100px;
		margin-bottom: 59px
	}

	.resources_box2:before {
		bottom: 41px
	}

	.resources_box2 .hill {
		bottom: -58px
	}

	.resources_box3 .txt_box {
		zoom: .65
	}

	.resources_content1:before {
		bottom: 100px
	}

	.item-natural.first {
		margin-left: 50px
	}

	.item-natural {
		margin-right: -50px
	}

	.environment_box2 {
		margin-bottom: 20px;
		margin-right: 150px
	}

	.environment_box2:before {
		bottom: 81px
	}

	.cloud,
	.cloud-animal,
	.cloud-zhibei,
	.cloud2,
	.icloud,
	.icloud2,
	.resources-infos-txt>img {
		zoom: .6
	}

	.g-tit2 {
		zoom: .7
	}

	.resources_box3 .txt_box .g-tit2 {
		width: 127px;
		left: 200px
	}

	.swiper-nav {
		height: auto
	}

	.header .button-next {
		margin-bottom: 0
	}

	.header .button-prev {
		margin-top: 0
	}

	.header .header-body .header-home {
		margin-bottom: 0
	}

	.header-body {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		padding: 30px 0
	}

	.g-infos01 .icloud2 {
		zoom: 1.3
	}

	.ul-pics li .pic p {
		font-size: 16px
	}

	.pop-dzdm .pop-dzdm-body {
		max-width: 800px;
		font-size: 18px !important
	}

	.pop-dzdm .pop-dzdm-body * {
		font-size: 18px !important
	}

	.water-info {
		zoom: .7
	}
}

@media only screen and (max-height:400px) {
	.g-infos01 .icloud2 {
		zoom: .6
	}

	.natural-content2-body {
		zoom: .45
	}

	.natural-content2 {
		min-width: 700px;
		padding-left: 200px
	}

	.g-infos01 {
		width: 290px;
		padding: 30px 60px 0
	}

	.g-infos01 .infos p {
		line-height: 32px
	}

	.beijing-wearher {
		zoom: .4
	}

	.beijing-wearher-pan {
		padding-left: 0;
		width: 500px
	}

	.pic-txt-water {
		transform: scale(1)
	}

	.water-info {
		zoom: .35
	}

	.turang-pic {
		margin-top: 30px
	}

	.ul-pics li {
		width: 130px;
		margin-right: 35px
	}

	.ul-pics li .pic p {
		font-size: 12px;
		padding: 5px;
		bottom: 0
	}

	.pics-bottom img {
		max-width: 300px
	}

	.pics-bottom {
		width: 80%
	}

	.pic-txt-grop2 {
		zoom: .45
	}

	.pic-txt-grop1 {
		zoom: .4
	}

	.g-infos01 {
		width: 300px;
		padding: 30px 60px 0
	}

	.cloud,
	.cloud-animal,
	.cloud-zhibei,
	.cloud2,
	.icloud,
	.icloud2,
	.resources-infos-txt>img {
		zoom: .4
	}

	.environment_box1 {
		width: 50px
	}

	.resources_box2 .pic,
	.resources_box2 .txt {
		max-width: 400px
	}

	.g-tit2 {
		zoom: .3
	}

	.resources_box1 .g-tit2 {
		left: 160px
	}

	.resources_box3 .txt_box {
		zoom: .35
	}

	.resources_box3 .txt_box .g-tit2 {
		zoom: .7;
		top: 128px
	}

	.resources-infos-txt,
	.resources-infos-txt.show {
		zoom: .45
	}

	.item-natural.first {
		margin-left: 0
	}

	.environment_box2-warp {
		zoom: .4
	}

	.environment_box2 {
		margin-left: -40px
	}

	.environment_box3 .map {
		zoom: .35
	}

	.environment_box4 .map {
		zoom: .35
	}

	.pop-dzdm .pop-dzdm-body * {
		font-size: 14px !important
	}

	.ul-rock li {
		height: 130px;
		position: relative
	}

	.ul-rock li p {
		position: absolute;
		bottom: 24px;
		top: auto;
		left: 0
	}

	.pop-dzdm .pop-dzdm-body {
		padding: 10px
	}

	.swiper_pop .swiper-arrow {
		width: 30px;
		height: 30px;
		-webkit-background-size: contain;
		background-size: contain;
		margin-top: -15px
	}

	.pop-dzdm .pop-dzdm-body {
		max-width: 80%
	}

	.pop-dzdm .txt {
		padding: 30px
	}

	.swiper_pop .swiper-arrow.swiper-prev {
		left: 10px
	}

	.swiper_pop .swiper-arrow.swiper-next {
		right: 10px
	}

	.wd-pop3 .tit1,
	.wd-pop3 .txt1 {
		margin-bottom: 10px
	}

	.wd-pop3 {
		padding: 30px
	}

	.sj-pop .right p {
		font-size: 12px !important
	}

	.sj-pop {
		padding: 30px
	}

	.wd-pop3.qy .pic {
		margin-top: 30px
	}

	.cs-pop1,
	.cs-pop2 {
		padding: 30px
	}

	.cs-pop2 .text+.text {
		margin-top: 20px
	}

	.pop-forbidden .pic img {
		height: auto;
		width: 48%
	}

	.pop-forbidden .pop-dzdm-body {
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		padding: 30px
	}
}

@media only screen and (max-width:1699px) {
	.g-infos01 .infos {
		font-size: 24px
	}

	.environment_box1 {
		width: 200px
	}

	.resources_box3 .txt_box .txt {
		font-size: 24px;
		line-height: 40px
	}

	.pic-txt-grop1 {
		zoom: .8;
		margin-left: 90px;
	}
}

@media only screen and (max-width:1299px) {
	.painted_scroll {
		zoom: .5
	}
}

@media only screen and (max-width:1199px) {
	.painted_scroll {
		zoom: .5
	}

	.forbidden_area li {
		width: 300px;
		padding: 60px 15px 10px;
		overflow-y: auto
	}

	.forbidden_area .tit {
		font-size: 16px;
		top: 10px;
		width: 280px;
		height: 39px;
		line-height: 36px;
		-webkit-background-size: 280px auto;
		background-size: 280px auto;
		padding-left: 30px
	}

	.forbidden_area .desc {
		font-size: 12px;
		line-height: 18px;
		-webkit-line-clamp: 6;
		height: 108px
	}

	.forbidden_area li:nth-child(4) .desc {
		-webkit-line-clamp: 8;
		height: 144px
	}

	.environment_box4 {
		padding-right: 20px
	}

	.environment_box3 {
		padding-left: 30px
	}

	.environment_box2 {
		margin-right: 30px;
		padding-right: 60px
	}

	.environment_box2 .cloud {
		top: 20px;
		right: 20px
	}
}

@media only screen and (max-width:959px) {
	.painted_scroll {
		zoom: .4
	}

	.header {
		width: 60px
	}

	.paddingLeft {
		padding-left: 60px
	}

	.swiper-nav {
		width: 60px;
		height: auto
	}

	.swiper-main {
		left: 60px
	}

	.swiper-nav a {
		font-size: 16px
	}

	.header .button-prev {
		margin-top: 10px
	}

	.swiper-nav .swiper-slide a {
		padding: 6px 0
	}

	.header .header-body .header-home {
		margin-bottom: 0
	}

	.swiper-nav .swiper-slide {
		margin: 5px 0
	}

	.header .button-next {
		margin-bottom: 10px
	}

	.environment_box1:before {
		width: 20px;
		height: 50px
	}

	.g-infos01 .title {
		font-size: 28px;
		margin-bottom: 30px
	}

	.g-infos01 .infos {
		font-size: 14px;
		height: calc(100vh - 160px)
	}

	.g-infos01::before {
		top: 50px;
		left: -100px;
		width: 173px;
		height: 101px;
		-webkit-background-size: 173px 101px;
		background-size: 173px 101px
	}

	.environment_box1 {
		width: 170px
	}

	.resources_box1 {
		padding: 50px 100px 0 150px;
		margin-bottom: 0
	}

	.resources_box1 .txt {
		font-size: 14px;
		max-width: 580px
	}

	.resources_box1 .chart {
		width: 600px
	}

	.resources_box2 .cloud {
		bottom: auto;
		top: 10px;
		left: -150px
	}

	.resources_box1:after,
	.resources_box2:after {
		width: 18px;
		right: -18px;
		-webkit-background-size: 18px auto;
		background-size: 18px auto
	}

	.resources_box2 {
		margin-left: 60px;
		margin-bottom: 0;
		padding: 10px 50px 0 140px
	}

	.resources_box2 .txt {
		font-size: 14px
	}

	.resources_box2 .pic_txt .pic {
		margin-bottom: 5px
	}

	.resources_box3 .pic_box .pic {
		height: 180px
	}

	.resources_box3 .cloud {
		right: 0;
		bottom: 10px
	}

	.environment_box4 .cloud {
		right: 10px;
		bottom: 10px
	}

	.environment_box3 .cloud2 {
		right: 20px;
		width: 110px;
		height: 52px;
		-webkit-background-size: 110px auto;
		background-size: 110px auto
	}

	.environment_list li:before {
		height: 520px
	}
}

@media only screen and (max-width:767px) {
	.painted_scroll {
		zoom: .3
	}

	.door .box .pointer {
		zoom: .5
	}

	.home_map {
		zoom: .5
	}
}

@media all and (orientation :portrait) {
	.mobile_tip {
		display: block
	}
}


.map-warp:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 888;
}

.map-warp.noAfter:after {
	display: none;
}

.g-infos01 .icloud2 {
	left: 550px;
}

.g-nextpage {
	position: absolute;
	width: 13.88vh;
	right: 4.629vh;
	bottom: 0;
	font-size: 3.703vh;
	font-weight: bold;
	text-align: center;
	border-radius: 0.925vh;
	z-index: 9999;
}

.bgc4 {
	background-color: rgba(95, 97, 96, .8);
}

.a a {
	display: block;
}

.g-nextpage a {
	color: #fff;
}



.open-section {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
}

.pic-zj1 .fffbtn {
	top: 22vh;
	right: 17vh;
	position: absolute;
}

.resources_box1 .chart-wrap {
	height: 30vh;
	position: relative;
}

.resources_box1 .chart {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0;
	height: 0;
	overflow: hidden;
	-webkit-transition: height 1.5s;
	-moz-transition: height 1.5s;
	-ms-transition: height 1.5s;
	-o-transition: height 1.5s;
	transition: height 1.5s;
}

.resources_box1 .chart-con {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 30vh;
	width: 100%;
	background-image: url(../images/zrhj/chart1.png);
	background-image: -webkit-image-set(url(../images/zrhj/chart1.png) 1x, url(../images/zrhj/chart1@2x.png) 2x);
	background-position: bottom center;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
}

.resources_box1 .chart.chart1 {
	height: 30vh;
}


.resources_box3 .pic {
	position: relative;
}

.resources_box3 .chart2 {
	background-image: url(../images/zrhj/chart2-con.png);
	background-image: -webkit-image-set(url(../images/zrhj/chart2-con.png) 1x, url(../images/zrhj/chart2-con@2x.png) 2x);
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 92vh;
	height: 36.5vh;
	z-index: 2;
}

.resources_box3 .chart2-warp {
	position: absolute;
	left: 11vh;
	bottom: 6.4vh;
	width: 0;
	height: 36.5vh;
	z-index: 2;
	-webkit-transition: all 2s;
	-moz-transition: all 2s;
	-ms-transition: all 2s;
	-o-transition: all 2s;
	transition: all 2s;
	overflow: hidden;
}

.resources_box3 .chart2-warp.showChart2 {
	width: 92vh;
}