@charset "utf-8";
@font-face {
	font-family:EXTRABOLD;
	src: url(GILROYEXTRABOLD.TTF);
}
@font-face {
	font-family:LIGHT;
	src: url(GILROYLIGHT.TTF);
}
*,::before,::after{
	margin: 0;
	padding:0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	    -webkit-touch-callout: none;
}
::-webkit-scrollbar{width:0;}
html{
	font-size:5vw;
}
html,body{
	background:#dcf5f8;
	-webkit-overflow-scrolling: touch;
	font-family:LIGHT;
}
body.no_scroll{
	overflow:hidden;
}
#webgl_wrap{
	position: fixed;
	width:100%;
	height: 100%;
	left: 0;
	top:0;
	opacity: 0;
	transition: opacity .3s ease-out;
	pointer-events: none;
	cursor: pointer;
}
#webgl_wrap.show{
	transition: opacity .3s .5s ease-out;
	opacity: 1;
	pointer-events: initial;
}
.loading_wrap{
	position: fixed;
	width:100%;
	height: 100%;
	left: 0;
	top:0;
	background-color: #fcfcfc;
	z-index: 9;
}
.load_percent,.load_txt{
	position: fixed;
	font-size: .3rem;
	bottom: .7rem;
	left: 1rem;
	z-index: 99;
}
.load_txt{
	left:auto;
	right:1rem;
}
.loading_wrap .bg{
	position: absolute;
	width:100%;
	height: 100%;
	left: 0;
	top:0;
}
.loading_wrap .bg img{
	opacity: 0;
	width:100%;
	height: auto;
	position: absolute;
	top:50%;
	transform: translateY(-50%);
}
.loading_wrap .mask{
	position: absolute;
	left: 0;
	top:0;
	width:100%;
	height: 100%;
	/* background:url(../img/loading/bg.png?202209291036) no-repeat center;
	background-size:100% auto; */
	transform-origin: center center;
	pointer-events: none;
	opacity: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
.loading_wrap .mask img:nth-child(1){
	width:100%;
}
.loading_wrap .mask img:nth-child(2){
	position: absolute;
	left:50%;
	top:50%;
	width:100%;
	transform:translate3d(-49.7%,-50.1%,0) scale(.2);
}
.loading_wrap .mask.close{
	animation: scale_opacity 1s forwards ease-in;
}
@keyframes scale_opacity{
	0%{
		opacity: 1;
		transform: scale(1);
	}
	90%{
		opacity: 1;
		transform: scale(10);
	}
	100%{
		opacity: 0;
		transform: scale(20);
	}
}
/* .loading_wrap .mask.close img:nth-child(2){
	animation: scale_opacity2 1s forwards ease-in;
} */
@keyframes scale_opacity2{
	0%{
		opacity: 1;
		transform:translate3d(-49.7%,-50.1%,0) scale(.2);
	}
	90%{
		opacity: 1;
		transform:translate3d(-49.7%,-50.1%,0) scale(2);
	}
	100%{
		opacity: 0;
		transform:translate3d(-49.7%,-50.1%,0) scale(4);
	}
}
.loading_wrap span{
	display: none;
	position: absolute;
	right: .8rem;
	top:.8rem;
	width: .64rem;
	height: .64rem;
	border-radius: 100%;
	background:url(../images/public/close.png?202209291036) no-repeat center #004C7C;
	background-size:.14rem .14rem;
	cursor: pointer;
}
.header_wrap{
	padding-left: 1.6rem;
	padding-right: 1.6rem;
	position: fixed;
	left: 0;
	top:0;
	width:100%;
}
.header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 1.5rem;
	border-bottom: 1px solid rgba(120, 154, 158, .4);
}
.logo{
	width:2.68rem;
}
.menu{
	display: flex;
	align-items: center;
	font-size: .22rem;
	font-weight: bold;
}
.menu a{
	display: block;
	margin-left: .8rem;
	padding-left: .34rem;
	margin-right: .1rem;
	position: relative;
	cursor: pointer;
	text-decoration: none;
	color: #004C7C;
}
.menu a::before{
	content: '';
	display: block;
	width:.14rem;
	height: .14rem;
	background: url(../images/public/point.png?202209291036);
	background-size: 100% 100%;
	position: absolute;
	left:0;
	top:.1rem;
	transition: all .3s .3s;
	z-index: 1;
}
.menu a.cur::before,.menu a:hover::before{
	transition: all .3s;
	top:.3rem;
}
.menu a >span{
	display: block;
	width:0%;
	height: 1px;
	background-color: none;
	position: absolute;
	left:.12rem;
	bottom:-.11rem;
	transition: all .3s;
}
.menu a >span>span{
	display: block;
	width:0%;
	height: 1px;
	background-color: #004C7C;
	transition: all .3s;
}
.menu a.cur >span,.menu a:hover >span{
	transition: all .3s .3s;
	width:100%;
}
.footer_wrap{
	padding-left: 1.6rem;
	padding-right: 1.6rem;
	position: fixed;
	left: 0;
	bottom:0;
	width:100%;
	display: flex;
	align-items: center;
	color: #789A9E;
	font-size: .3rem;
	padding-bottom: .8rem;
	line-height: .4rem;
}
.num_wrap{
	position: relative;
	height: .4rem;
}
#num_list{
	display: flex;
	flex-direction: column;
	transition: all .3s;
	color: #004C7C;
	font-weight: bold;
	padding-right: .06rem;
}
#num_list span{
	opacity: 0;
	transition: all .3s;
}
#num_list.cur1{
	margin-top: 0;
}
#num_list.cur1 span:nth-child(1){
	opacity: 1;
}
#num_list.cur12{
	margin-top: -.4rem;
}
#num_list.cur12 span:nth-child(2){
	opacity: 1;
}
#num_list.cur2{
	margin-top: -.8rem;
}
#num_list.cur2 span:nth-child(3){
	opacity: 1;
}
#num_list.cur3{
	margin-top:  -1.2rem;
}
#num_list.cur3 span:nth-child(4){
	opacity: 1;
}
#num_list.cur4{
	margin-top:  -1.6rem;
}
#num_list.cur4 span:nth-child(5){
	opacity: 1;
}
#num_list.cur5{
	margin-top:  -2rem;
}
#num_list.cur5 span:nth-child(6){
	opacity: 1;
}

.page{
	height: 300vh;
	position: relative;
	pointer-events:none;
}
.page3{
	height: 100vh;
}
.page12{
	height: 200vh;
}
.page.show{
	pointer-events:initial;
}
.page.page4.show{
	pointer-events:none;
}
.page1 .bg,.page1 .bg_loop{
	position: fixed;
	height: 100vh;
	top:0;
	right:0;
	transition: opacity .3s cubic-bezier(.445,.05,.55,.95),transform 1s cubic-bezier(.19,1,.22,1);
	animation: left_right 1s infinite alternate ease-in-out;
}
.page1 .bg{
	visibility: hidden;
}
.page1 .bg img,.page1 .bg_loop img{
	display: block;
	width:auto;
	height: 100%;
	position: absolute;
	top:0;
	right:0;
}
.page1.show .bg{
	opacity: 1;
}
.page1 video{
	position: fixed;
	height: 100vh;
	bottom:0;
	right:0;
	transition: opacity .3s cubic-bezier(.445,.05,.55,.95);
	opacity: 0;
}
.page1.show video{
	opacity: 1;
}
.page12 video{
	position: fixed;
	height: 73vh;
	bottom:0;
	left:0;
	transition: opacity .3s cubic-bezier(.445,.05,.55,.95);
	opacity: 0;
}
.page12.show video{
	opacity: 1;
}
.page1 .con,.page2 .con,.page3 .con,.page4 .con,.page12 .con,.page12 .con12{
	position: fixed;
	top:50%;
	transform: translateY(-50%);
	left:1.6rem;
	color: #333333;
	font-size: .22rem;
	line-height: .28rem;
}
.page12 .con{
	left:auto;
	right:1.6rem;
}
.page12 .con12{
	top:15vh;
	transition: opacity .3s cubic-bezier(.445,.05,.55,.95),transform 1s cubic-bezier(.19,1,.22,1);
	opacity: 0;
	transform: translateY(1rem);
	transition-delay: .14s;
}
.page1 .con p:nth-child(2),.page12 .con p:nth-child(1),.page12 .con12{
	color: #004C7C;
	font-size: .64rem;
	line-height: .66rem;
	padding: .41rem 0 .48rem;
	font-family:EXTRABOLD;
}
.page1 .con p,.page12 .con p{
	transition: opacity .3s cubic-bezier(.445,.05,.55,.95),transform 1s cubic-bezier(.19,1,.22,1);
	opacity: 0;
	transform: translateY(1rem);
}
.page12 .con p:nth-child(1){
	transition-delay: .07s;
}
.page1[data-direction]:not(.show) .con p,.page12[data-direction]:not(.show) .con p,.page12[data-direction]:not(.show) .con12{
	opacity: 0;
	transform: translateY(-1rem);
}
.page1[data-direction]:not(.show) .con p:nth-child(2),.page12[data-direction]:not(.show) .con p:nth-child(1){
	transition-delay: .07s;
}
.page1[data-direction]:not(.show) .con p:nth-child(3),.page12[data-direction]:not(.show) .con p:nth-child(2){
	transition-delay: .14s;
}
.page1:not([data-direction]).show .con p,.page12:not([data-direction]).show .con p,.page12:not([data-direction]).show .con12{
	opacity: 1;
	transform: translateY(0);
	transition-delay: .28s;
}
.page1:not([data-direction]).show .con p:nth-child(2),.page12:not([data-direction]).show .con p:nth-child(1){
	transition-delay: .42s;
}
.page1:not([data-direction]).show .con p:nth-child(3),.page12:not([data-direction]).show .con p:nth-child(2){
	transition-delay: .56s;
}
.page1[data-direction].show .con p,.page12[data-direction].show .con p,.page12[data-direction].show .con12{
	opacity: 1;
	transform: translateY(0);
	transition-delay: .56s;
}
.page1[data-direction].show .con p:nth-child(2),.page12[data-direction].show .con p:nth-child(1){
	transition-delay: .42s;
}
.page1[data-direction].show .con p:nth-child(3),.page12[data-direction].show .con p:nth-child(2){
	transition-delay: .28s;
}

.page2 .bg{
	position: fixed;
	height: 100vh;
	top:0;
	right:0;
	transition: opacity .3s cubic-bezier(.445,.05,.55,.95);
	opacity: 0;
	animation: left_right 1s infinite alternate ease-in-out;
}
@keyframes left_right{
	from{transform: translateX(0);}
	to{transform: translateX(6px);}
}
.page2 .bg img{
	height: 100%;
	position: absolute;
	right: 0;
	top:0;
	transition: transform .3s ease-out;
}
.page2.show .bg{
	opacity: 1;
}
.page2 .bg img.bg1{
	transform: translate(35%,-35%);
	opacity: .5;
}
.page2 .bg img.bg4{
	transform: translate(-40%,40%);
	opacity: .5;
}
.page2 .bg23{
	opacity: 0;
	transition: opacity .3s ease-out;
}
.page2 .bg img.bg2{
	opacity: 0;
}
.page2 .bg img.bg3{
	opacity:.5;
}
.page2.show .bg img.bg2{
	animation: opacity1 1.5s infinite alternate linear;
}
.page2.show .bg img.bg3{
	animation: opacity2 1.5s infinite alternate linear;
}
@keyframes opacity1{
	from{opacity: 0;}
	to{opacity: 1;}
}
@keyframes opacity2{
	from{opacity: .5;}
	to{opacity: 1;}
}

.page2 .con >p{
	color: #004C7C;
	font-size: .64rem;
	line-height: .66rem;
	padding-bottom:1rem;
	font-family:EXTRABOLD;
	transition: opacity .3s cubic-bezier(.445,.05,.55,.95),transform 1s cubic-bezier(.19,1,.22,1);
	opacity: 0;
	transform: translateY(1rem);
	transition-delay: .07s;
}
.page2[data-direction]:not(.show) .con >p{
	opacity: 0;
	transform: translateY(-1rem);
}
.page2:not([data-direction]).show .con >p{
	opacity: 1;
	transform: translateY(0);
	transition-delay: .28s;
}
.page2[data-direction].show .con >p{
	opacity: 1;
	transform: translateY(0);
	transition-delay: .42s;
}

.pic_wrap{
	transition: opacity .3s cubic-bezier(.445,.05,.55,.95),transform 1s cubic-bezier(.19,1,.22,1);
	opacity: 0;
	transform: translateY(1rem);
}
.page2[data-direction]:not(.show) .con .pic_wrap{
	opacity: 0;
	transform: translateY(-1rem);
	transition-delay: .14s;
}
.page2:not([data-direction]).show .con .pic_wrap{
	opacity: 1;
	transform: translateY(0);
	transition-delay: .42s;
}
.page2[data-direction].show .con .pic_wrap{
	opacity: 1;
	transform: translateY(0);
	transition-delay: .28s;
}


.pic_scroll{
	position: relative;
	display: flex;
	align-items: center;
	width:16rem;
}
.btn_right{
	display: flex;
	width:.64rem;
	height: .64rem;
	background: #004C7C;
	border-radius: 100%;
	justify-content: center;
	align-items: center;
	margin-left: .16rem;
	cursor: pointer;
}
.btn_right img{
	width:.4rem;
	height: .19rem;
}
.btn_left img{
	transform:scaleX(-1);
}
.pic_list{
	position: relative;
	width:3rem;
	height: 4rem;
	transition: width 1s cubic-bezier(.445,.05,.55,.95);
	overflow: hidden;
}
.pic_item{
	cursor: pointer;
	position: absolute;
	right:0;
	top:0;
	overflow: hidden;
	width:2.9rem;
	border-radius: .08rem .08rem 0 0;
	opacity: .1;
	transition: opacity .6s cubic-bezier(.445,.05,.55,.95),right 1s cubic-bezier(.19,1,.22,1);
}
.pic_item >div{
	height: 1.7rem;
	background: #004C7C;
	border-radius: 0 0 .08rem .08rem;
	color: #fff;
	font-size: .18rem;
	line-height: .24rem;
	padding-left: .39rem;
	padding-right: .39rem;
}
.pic_item >div>p:first-child{
	font-size: .28rem;
	line-height: .66rem;
	font-family:EXTRABOLD;
}
.pic_item >div.img_wrap{
	height: 2.3rem;
	width:2.9rem;
	background: none;
	border-radius: 0;
	padding-left:0;
	padding-right:0;
	overflow: hidden;
}
.pic_item img{
	display: block;
	height: 2.3rem;
	transition: transform 1s ease-out;
}
.pic_item:hover img{
	transform: scale(1.1);
}
.pic_list.show{
	width:15.22rem;
}
.pic_list.show .pic_item{
	opacity: 1;
}
.pic_list .pic_item:nth-child(1){
	z-index: 5;
	right: auto;
	left: 0;
	opacity: 1;
}
.pic_list .pic_item:nth-child(2){
	z-index: 4;
	transition: opacity 1s .25s cubic-bezier(.445,.05,.55,.95),right .75s .25s linear;
}
.pic_list .pic_item:nth-child(3){
	z-index: 3;
	transition: opacity .75s .5s cubic-bezier(.445,.05,.55,.95),right .5s .5s linear;
}
.pic_list .pic_item:nth-child(4){
	z-index: 2;
	transition: opacity .5s .75s cubic-bezier(.445,.05,.55,.95),right .25s .75s linear;
}
.pic_list .pic_item:nth-child(5){
	z-index: 1;
	transition: opacity .25s 1s cubic-bezier(.445,.05,.55,.95);
}

.pic_list.show .pic_item:nth-child(2){
	transition: opacity .6s cubic-bezier(.445,.05,.55,.95),right 1s cubic-bezier(.19,1,.22,1);
	right:9.24rem;
}
.pic_list.show .pic_item:nth-child(3){
	transition: opacity .6s cubic-bezier(.445,.05,.55,.95),right 1s cubic-bezier(.19,1,.22,1);
	right:6.16rem;
}
.pic_list.show .pic_item:nth-child(4){
	transition: opacity .6s cubic-bezier(.445,.05,.55,.95),right 1s cubic-bezier(.19,1,.22,1);
	right:3.08rem;
}
.pic_list.show .pic_item:nth-child(5){
	transition: opacity .6s cubic-bezier(.445,.05,.55,.95),right 1s cubic-bezier(.19,1,.22,1);
	right:0;
}

.pic_item_box> span{
	display: block;
	position: absolute;
	left:50%;
	margin-left: -.24rem;
	bottom:-.78rem;
	width: .48rem;
	height: .48rem;
	border-radius: 100%;
	background:url(../images/public/close2.png?202209291036) no-repeat center #fff;
	background-size:.14rem .13rem;
	cursor: pointer;
}
.pic_item_con{
	position: fixed;
	left:0;
	top:0;
	width:100%;
	height: 100%;
	background-color: rgba(120, 154, 158, .8);
	display: none;
}
.pic_item_box{
	position: absolute;
	left:50%;
	top: 50%;
	width: 13.9rem;
	height: 5.03rem;
	margin-left: -6.95rem;
	margin-top: -2.515rem;
	background: #FFFFFF;
	border-radius: .08rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.pic_item_box .left{
	width:3.7rem;
	margin-left: 1rem;
}
.pic_item_box .left p{
	font-size: .22rem;
	line-height: .32rem;
	color: #333;
}
.pic_item_box .left p:nth-child(1){
	font-size: .58rem;
	line-height: .58rem;
	font-family:EXTRABOLD;
	color: #004C7C;
	padding-bottom: .6rem;
}
.pic_item_box .left p:nth-child(2){
	font-family:EXTRABOLD;
	font-size: .28rem;
	color: #004C7C;
	padding-bottom: .3rem;
}
.pic_item_box .right{
	width:7rem;
	height: 3.67rem;
	margin-right: 1.4rem;
	position: relative;
}
.pic_item_box .right img{
	width:7rem;
	height: auto;
}
.scroll_overflow{
	width:7rem;
	height: 3.67rem;
	overflow:hidden;
}
.scroll_wrap{
	width:8.4rem;
	height: 3.67rem;
	overflow: hidden;
	overflow-y: scroll;
}
.page3 .con >p{
	color: #004C7C;
	font-size: .64rem;
	line-height: .66rem;
	padding-bottom:.25rem;
	font-family:EXTRABOLD;
	transition: opacity .3s cubic-bezier(.445,.05,.55,.95),transform 1s cubic-bezier(.19,1,.22,1);
	opacity: 0;
	transform: translateY(1rem);
	transition-delay: .07s;
}
.page3[data-direction]:not(.show) .con >p{
	opacity: 0;
	transform: translateY(-1rem);
}
.page3:not([data-direction]).show .con >p{
	opacity: 1;
	transform: translateY(0);
	transition-delay: .28s;
}
.page3[data-direction].show .con >p{
	opacity: 1;
	transform: translateY(0);
	transition-delay: .42s;
}

.table_scroll{
	width:14.65rem;
	margin-left: .68rem;
	transition: opacity .3s cubic-bezier(.445,.05,.55,.95),transform 1s cubic-bezier(.19,1,.22,1);
	opacity: 0;
	transform: translateY(1rem);
}
.table_scroll1{
	width:14.65rem;
	height: 50vh;
	overflow-y: scroll;
	position: relative;
}
.page3[data-direction]:not(.show) .con .table_scroll{
	opacity: 0;
	transform: translateY(-1rem);
	transition-delay: .14s;
}
.page3:not([data-direction]).show .con .table_scroll{
	opacity: 1;
	transform: translateY(0);
	transition-delay: .42s;
}
.page3[data-direction].show .con .table_scroll{
	opacity: 1;
	transform: translateY(0);
	transition-delay: .28s;
}

.table_wrap >div.table_th,.table_wrap div.table_tr{
	height: .71rem;
	color: #333;
	font-size: .18rem;
	line-height: .32rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px dashed rgba(120, 154, 159, .3);
}
.table_wrap >div.table_th{
	height: 1rem;
	border-bottom: 1px dashed rgba(120, 154, 159, 1);
	font-size: .22rem;
	font-weight: bold;
}
.table_wrap >div.table_th em{
	font-style: normal;
	font-weight: normal;
}
.table_wrap >div>p,.table_wrap div.table_tr >p{
	padding-left: .3rem;
	width:1.5rem;
}
.table_wrap >div>p:nth-child(2),.table_wrap div.table_tr >p:nth-child(2){
	width:2.5rem;
}
.table_wrap >div>p:nth-child(3),.table_wrap div.table_tr >p:nth-child(3){
	width:5.6rem;
}
.table_wrap >div>p:nth-child(4),.table_wrap div.table_tr >p:nth-child(4){
	width:2.8rem;
}
.table_wrap >div>p:nth-child(5),.table_wrap div.table_tr >p:nth-child(5){
	padding-left: 0;
	width:1rem;
}
.table_wrap >div.table_th>p:nth-child(3),.table_wrap >div.table_th>p:nth-child(4){
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.table_wrap >div.table_th>p:nth-child(3) span,.table_wrap >div.table_th>p:nth-child(4) span{
	padding-right: .3rem;
}
.table_wrap img{
	width:.3rem;
	height: .3rem;
	animation: rotate1 5s infinite linear;
}
@keyframes rotate1{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}
.table_wrap div.table_tr >p>span{
	display: block;
	width: 5.31rem;
	height: .26rem;
	background: rgba(0,76,124,0.1);
	border-radius: .13rem;
}
.table_wrap div.table_tr >p>span>span{
	display: block;
	width: 0%;
	height: .26rem;
}
.table_wrap div.table_tr >p>span>span>span{
	display: block;
	width: 0%;
	height: .26rem;
	background: #004C7C;
	border-radius: .13rem;
	transition: transform .3s ease-out;
}
.table_wrap div.table_tr >p>span.type2{
	width:3.71rem;
}
.table_wrap div.table_tr >p>span.type3{
	width:2.69rem;
}
.page3 .table_wrap div.table_tr >p>span>span>span{
	transition: width 1s ease-out;
	width:0%;
}
.page3:not([data-direction]).show .table_wrap div.table_tr >p>span>span>span{
	transition: width 1s 1s ease-out;
	width:100%;
}
.page3[data-direction].show .table_wrap div.table_tr >p>span>span>span{
	transition: width 1s ease-out;
	width:100%;
}
.page3[data-direction] .table_wrap div.table_tr >p>span>span>span{
	width:100%;
}


.page4 .con >p{
	color: #004C7C;
	font-size: .64rem;
	line-height: .66rem;
	padding-bottom:5rem;
	font-family:EXTRABOLD;
	transition: opacity .3s cubic-bezier(.445,.05,.55,.95),transform 1s cubic-bezier(.19,1,.22,1);
	opacity: 0;
	transform: translateY(1rem);
	transition-delay: .07s;
}
.page4:not([data-direction]).show .con >p{
	opacity: 1;
	transform: translateY(0);
	transition-delay: .28s;
}
#earth_control{
	position: fixed;
	width:14rem;
	height: 14rem;
	background-color: rgba(0,0,0,0);
	left:50%;
	top:50%;
	margin-left: -7rem;
	margin-top: -7rem;
	pointer-events: initial;
	cursor: pointer;
}
.local_content_wrap{
	position: fixed;
	left:50%;
	top:50%;
	display: none;
	pointer-events: none;
}
.local_content_wrap>span{
	position: absolute;
	display: block;
	width: .28rem;
	height: .28rem;
	border-radius: 100%;
	left:-.14rem;
	top:-.14rem;
	cursor: pointer;
	background: url(../images/public/close.png?202209291036) no-repeat center #004C7C;
	background-size: .11rem .11rem;
	pointer-events: initial;
}
.loacl_content{
	position: absolute;
	width: 7.61rem;
	background: rgba(255,255,255,.96);
	border-radius: .08rem;
	padding: .8rem .6rem;
	font-size: .2rem;
	color: #333333;
	left:.28rem;
	top:-1rem;
	display: none;
}
.loacl_content .tits{
	font-size: .44rem;
	color: #004C7C;
	font-family:EXTRABOLD;
	padding-bottom: .2rem;
}
.loacl_content .tit{
	font-size: .28rem;
	color: #004C7C;
	font-family:EXTRABOLD;
	padding-bottom: .1rem;
	padding-top: .3rem;
}

.mobile_menu,.btn_open_menu,.local_tit_wrap{
	display: none;
}

/* News Page Styles */
.page5 video{
	position: fixed;
	height: 100vh;
	bottom:0;
	left:0;
	right:0;
	margin:0 auto;
	transition: opacity .3s cubic-bezier(.445,.05,.55,.95);
	opacity: 0;
}
.page5.show video{
	opacity: 1;
}

.page5 .con{
	position: fixed;
	top:10vh;
	left: 0;
	right: 0;
	color: #333333;
	font-family:EXTRABOLD;
	color: #004C7C;
	transition: opacity .3s cubic-bezier(.445,.05,.55,.95),transform 1s cubic-bezier(.19,1,.22,1);
	opacity: 0;
	transform: translateY(1rem);
}

.page5.show .con{
	opacity: 1;
	transform: translateY(0);
	transition-delay: .28s;
}

.page5[data-direction]:not(.show) .con{
	opacity: 0;
	transform: translateY(-1rem);
}

.news_list_wrap{
	position: relative;
	top: 10vh;
	color: #333333;
	height: 80vh;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-behavior: smooth;
	width: 980px;
	margin: 0 auto;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.news_list_wrap::-webkit-scrollbar {
	width: 4px;
}

/* Track */
.news_list_wrap::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.1);
}

/* Handle */
.news_list_wrap::-webkit-scrollbar-thumb {
	background: rgba(0, 76, 124, 0.5);
	border-radius: 2px;
}

/* Handle on hover */
.news_list_wrap::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 76, 124, 0.7);
}

.news_list{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
	margin: 10px;
	max-width: 100%;
	box-sizing: border-box;
}

.news_item{
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	transition: all .3s ease;
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.news_item:hover{
	transform: translateY(-8px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.news_item_img{
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
	object-fit: cover;
	border-radius: 12px 12px 0 0;
	transition: transform .3s ease;
	display: block;
}

.news_item:hover .news_item_img{
	transform: scale(1.05);
}

.news_item_content{
	padding: 18px;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	text-align: left;
}

.news_item_date,
.news_item_title{
	width: 100%;
	box-sizing: border-box;
}

.news_item_date{
	font-size: 12px;
	color: #6e6e73;
	font-family: REGULAR;
	margin-top: 10px;
	order: 2;
}

.news_item_title{
	font-size: 16px;
	color: #1d1d1f;
	font-weight: 600;
	line-height: 24px;
	font-family: SEMIBOLD;
	transition: color .3s ease;
	order: 1;
	margin: 0;
}

.news_item:hover .news_item_title{
	color: #004C7C;
}

/* News Modal Styles */
.news_modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(120, 154, 158, .8);
}

.news_modal_content {
    background-color: #ffffff;
    margin: 7.8% auto;
    padding: 40px;
    border-radius: 12px;
    width: 980px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.news_modal_close {
    color: #aaa;
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.news_modal_close:hover,
.news_modal_close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

#modalTitle {
    font-size: 24px;
    color: #1d1d1f;
    margin-bottom: 20px;
    font-family: SEMIBOLD;
}

#modalContent {
    font-size: 16px;
    color: #6e6e73;
    line-height: 1.6;
    font-family: REGULAR;
}

/* News List Scrollbar */
.news_list_wrap::-webkit-scrollbar{
	width: 6px;
}

.news_list_wrap::-webkit-scrollbar-track{
	background: rgba(255, 255, 255, 0.1);
	border-radius: 3px;
}

.news_list_wrap::-webkit-scrollbar-thumb{
	background: rgba(0, 76, 124, 0.5);
	border-radius: 3px;
}

.news_list_wrap::-webkit-scrollbar-thumb:hover{
	background: rgba(0, 76, 124, 0.7);
}

.bar_wrap{
	position: absolute;
	width: .04rem;
	height: 3.68rem;
	background: rgba(120, 154, 158, .2);
	border-radius: .02rem;
	top:0;
	right:-0.3rem;
}
.bar_wrap span{
	display: block;
	position: absolute;
	left:0;
	top:0;
	width: .04rem;
	height: .74rem;
	background: #004C7C;
	border-radius: .02rem;
	transition: transform .3s linear;
}

.bar_wrap3{
	position: fixed;
	width: .04rem;
	height: 50vh;
	background: rgba(120, 154, 158, .2);
	border-radius: .02rem;
	top:1rem;
	right:-.2rem;
}
.bar_wrap3 span{
	display: block;
	position: absolute;
	left:0;
	top:0;
	width: .04rem;
	height: 10vh;
	background: #004C7C;
	border-radius: .02rem;
	transition: transform .3s linear;
}
.icon_list{
	position: fixed;
	left:0;
	bottom:0;
	height: 73vh;
	transition: opacity .3s cubic-bezier(.445,.05,.55,.95);
	opacity: 0;
	pointer-events: none;
}
.icon_list.show{
	transition: opacity .6s cubic-bezier(.445,.05,.55,.95);
	opacity:1;
	pointer-events: initial;
}
.icon_list>div{
	position: absolute;
	left:2.03rem;
	top:.8rem;
	font-size: .22rem;
	color: #004C7C;
	display: flex;
	align-items: center;
	cursor: pointer;
}
.icon_list>div:nth-child(2){
	left:1.38rem;
	top:1.63rem;
}
.icon_list>div:nth-child(3){
	left:1.71rem;
	top:3.07rem;
}
.icon_list>div:nth-child(4){
	left:1.9rem;
	top:4.59rem;
}
.icon_list>div:nth-child(5){
	left:9.37rem;
	top:.56rem;
}
.icon_list>div:nth-child(6){
	left:9.71rem;
	top:1.9rem;
}
.icon_list>div:nth-child(7){
	left:9.76rem;
	top:3.48rem;
}
.icon_list>div:nth-child(8){
	left:10.36rem;
	top:4.85rem;
}
.icon_list>div >div{
	position: relative;
	width: .32rem;
	height: .32rem;
}
.icon_list>div p{
	padding:0 .21rem;
	height: .8rem;
	line-height: .8rem;
	background: rgba(255,255,255,0.92);
	border-radius: .08rem;
	white-space: nowrap;
	opacity: 0;
	transition: opacity .3s cubic-bezier(.445,.05,.55,.95);
}
.icon_list>div p span{
	font-size: .36rem;
	font-weight: bold;
	font-family:EXTRABOLD;
}
.icon_list>div:hover p{
	opacity: 1;
}
.icon_list>div:hover >div >div.circle{
	display: none;
}

.icon_list>div >div >div{
	position: absolute;
	left:0;
	top:0;
	width: .32rem;
	height: .32rem;
	background: #B0D2D6;
	border: .02rem solid #82A8AC;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: .24rem;
	font-weight: bold;
	font-family:EXTRABOLD;
}
.icon_list>div >div >div.circle{
	width: .32rem;
	height: .32rem;
	background: none;
	border:none;
}
.icon_list>div >div >div.circle::before,.icon_list>div >div >div.circle::after{
	content: '';
	display: block;
	position: absolute;
	left:0;
	top:0;
	width: .32rem;
	height: .32rem;
	border-radius: 50%;
	background: rgba(176, 210, 214, 1);
	border:none;
	animation: kuosan 2s infinite linear;
}
.icon_list>div >div >div.circle::before{
	animation-delay: 1s;
}
@keyframes kuosan{
	0%{
		transform: scale(1);
		opacity: 1;
	}
	100%{
		transform: scale(2);
		opacity: 0;
	}
}


.icon_list2{
	position: fixed;
	top:27vh;
	left:6rem;
	margin-top: .8rem;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s cubic-bezier(.445,.05,.55,.95);
	padding: .5rem .45rem;
	background: rgba(255,255,255,0.92);
	border-radius: 8px;
}
.icon_list2 p{
	font-size: .22rem;
	color: #004C7C;
	line-height: .4rem;
	white-space: nowrap;
}
.icon_list2 p span{
	font-size: .36rem;
	font-weight: bold;
	font-family:EXTRABOLD;
}
.icon_list2.show{
	opacity: 1;
}


.scroll{
	width:7rem;
}






@media only screen and (max-width: 767px){
	.table_scroll1{
		width:auto;
		height: auto;
		overflow-y: initial;
		position: relative;
	}
	.bar_wrap3{
		display: none;
	}
	html{
		font-size:12vw;
	}
	.header_wrap{
		padding: 0 .6rem;
	}
	.header{
		border: none;
		height: auto;
		padding-top: .54rem;
	}
	.menu{
		position: fixed;
		left:0;
		top:0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100vw;
	}
	.menu p{
		display: none;
	}
	.menu a{
		width:20vw;
		margin: 0;
		padding: 0;
	}
	.menu a::before{display: none;}
	.menu a >span{
		bottom: 0;
		top:0;
		height: .05rem;
	}
	.menu a >span>span{
		height: .05rem;
	}
	.page1 .bg, .page1 .bg_loop,.page1 .bg, .page1 .bg{
		right:-70vw;
	}
	.page2 .bg{
		right:-50vw;
	}
	.page1 .con, .page2 .con, .page3 .con, .page4 .con{
		left:.6rem;
	}
	.footer_wrap{
		padding-left:.6rem;
	}
	.btn_right{display: none;}
	.pic_item{
		position: relative;
		opacity: 1!important;
		margin-right: .5rem;
		margin-bottom: .5rem;
	}
	.pic_wrap{
		width:8rem;
		height: 9rem;
		overflow: hidden;
	}
	.pic_list{
		display: flex;
		flex-wrap: wrap;
		height: auto;
		width:8rem;
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	.pic_item_box{
		flex-direction: column;
		height: 10rem;
		width: 6rem;
		margin-top: -5rem;
		margin-left: -3rem;
	}
	.pic_item_box .left{
		margin-left: 0;
		margin-top: 1rem;
	}
	.pic_item_box .right{
		margin-right: 0;
		margin-bottom: 1rem;
		width:5rem;
	}
	.pic_item_box .right img{
		width:4.9rem;
	}
	.scroll_overflow{
		width:5rem;
	}
	.table_wrap >div.table_th{display: none;}
	.table_wrap div.table_tr{
		display: flex;
		flex-direction: column;
		height: auto;
		align-items: flex-start;
		padding: .1rem;
	}
	.table_scroll{
		margin-top: .6rem;
		margin-left: 0;
		width:7rem;
		height: 10rem;
		overflow: hidden;
	}
	.table_wrap{
		width:7rem;
		height: auto;
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	.table_wrap >div>p,.table_wrap >div>p:nth-child(5),.table_wrap div.table_tr>p,.table_wrap div.table_tr>p:nth-child(5){
		padding: .1rem;
	}
	.table_wrap >div>p:nth-child(2),.table_wrap >div>p:nth-child(4),.table_wrap div.table_tr>p:nth-child(2),.table_wrap div.table_tr>p:nth-child(4){
		width:auto;
	}
	.table_wrap >div>p:nth-child(5),.table_wrap div.table_tr>p:nth-child(5){
		width:100%;
		display: flex;
		justify-content: flex-end;
	}
	.local_content_wrap{
		left: 0;
		top:auto;
		bottom:0;
		width:100%;
		pointer-events: initial;
	}
	.page4 .con{
		transform: translate(0,0);
		top:2rem;
	}
	.loacl_content{
		position: relative;
		width:100%;
		bottom:0;
		top:auto;
		left: 0;
	}
	.mobile_menu{
		display: block;
		pointer-events: none;
		position: fixed;
		width:100%;
		height: 100%;
		left:0;
		top:0;
		background-color: rgba(224, 249, 252, 1);
		user-select:none;
		opacity: 0;
		transition: opacity .3s ease-in-out;
	}
	.mobile_menu.show{
		pointer-events: initial;
		opacity: 1;
	}
	.mobile_menu .logo{
		position: absolute;
		left:.6rem;
		top:.54rem;
	}
	.btn_close_menu,.btn_open_menu{
		display: block;
		width: .64rem;
		height: .64rem;
		border-radius: 100%;
		background: url(../images/public/close.png?202209291036) no-repeat center #004C7C;
		background-size: .14rem .14rem;
		position: fixed;
		top:.54rem;
		right:.6rem;
	}
	.btn_open_menu{
		background-image: url(../images/public/menu.png?202209291036);
		background-size: .32rem .32rem;
	}
	.menu_list{
		position: absolute;
		left:.6rem;
		top:50%;
		transform: translate(0,-50%);
	}
	.menu_list a{
		display: flex;
		font-size: .5rem;
		color: #789A9F;
		text-decoration: none;
		font-family:EXTRABOLD;
		align-items: center;
		margin: .3rem 0;
	}
	.menu_list span{
		font-size: .24rem;
		padding-right: .4rem;
		display: flex;
		padding-top: .1rem;
	}
	.menu_footer{
		position: absolute;
		bottom:1.3rem;
		left:50%;
		transform: translate(-50%,0);
		text-align: center;
		font-size: .22rem;
		color: #004C7C;
	}
	.menu_footer img{
		width:2.14rem;
		margin-bottom: .1rem;
	}
	.menu_list a.cur{
		color: #004C7C;
	}
	.loading_wrap span{
		right: 0.6rem;
		top: 0.54rem;
	}
	.page1 .con{
		transform: translateY(0);
		top:auto;
		bottom:3rem;
	}
	
	.page.page4.show{
		pointer-events: initial;
	}
	.page4>span{
		display: none;
		position: fixed;
		left:50%;
		top:50%;
		background-color: rgba(0,0,0,0);
		width:1rem;
		height: 1rem;
		transform: translate(-50%,-50%);
	}
	.local_content_wrap>span{
		width: 0.5rem;
		height: 0.5rem;
		left: auto;
		top: .4rem;
		right:.4rem;
		z-index: 9;
	}
	.local_tit_wrap{
		position: fixed;
		width:100%;
		justify-content: space-around;
		align-items: center;
		left:0;
		bottom:1rem;
		font-family:EXTRABOLD;
		font-size: .32rem;
		color: #004C7C;
	}
	.local_tit_wrap span.cur{
		font-weight: bolder;
	}
	.footer_wrap{
		display: none;
	}
	.bar_wrap{
		right:-.05rem;
	}
	#webgl_wrap.show{
		pointer-events: none;
	}
	
	.page3{
		height: 300vh;
	}
	.page4{
		height: 200vh;
	}
	.page12.show video{
		display: none;
	}
	.page12 .con{
		left:.6rem;
		right:auto;
		top:2rem;
		transform: translateY(0);
	}
	.page12 .con12{
		top:50%;
		left:.6rem;
		margin-top: -1.5rem;
	}

	.icon_list{
		top:50%;
		bottom:auto;
		width:100%;
		background: url(../images/public/tree.png) no-repeat;
		background-size: 100% auto;
	}
	.icon_list.show{
		transition: opacity .6s .6s cubic-bezier(.445,.05,.55,.95);
		pointer-events: none;
	}
	.icon_list>div >div{
		display: none;
	}
	.icon_list>div p{
		opacity: 1;
	}
	.icon_list>div:nth-child(1){
		left:1.1rem;
		top:0;
	}
	.icon_list>div:nth-child(2){
		left:1.1rem;
		top:1.1rem;
	}
	.icon_list>div:nth-child(3){
		left:1.1rem;
		top:2.2rem;
	}
	.icon_list>div:nth-child(4){
		left:1.1rem;
		top:3.3rem;
	}
	.icon_list>div:nth-child(5){
		left:auto;
		right:1.1rem;
		top:0;
	}
	.icon_list>div:nth-child(6){
		left:auto;
		right:1.1rem;
		top:1.1rem;
	}
	.icon_list>div:nth-child(7){
		left:auto;
		right:1.1rem;
		top:2.2rem;
	}
	.icon_list>div:nth-child(8){
		left:auto;
		right:1.1rem;
		top:3.3rem;
	}
	
	.icon_list2.show{
		display: none;
	}
	/* .page12 .con p:last-child{
		font-size: .3rem;
		line-height: .4rem;
	} */
	.page2 .con >p{
		padding-right: .6rem;
	}
	.scroll{
		width:4.9rem;
	}
}