*{margin: 0;padding: 0;letter-spacing: 1px;}
body,html{width: 100%;height: 100%;background-color: #000028;}
.container{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000028;
}
.header-nav {
    display: inline-flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    height: 100%;
    pointer-events: all;
}


.header-nav>li {
    font-size: 18px;
    height: 100%;
    font-weight: 400;
    color: #fff;
    margin-right: 28px;
    position: static;
    white-space: nowrap;
    display: inline-block;
    position: relative;
	font-family: "sb";
}

.header-nav>li>.link {
    cursor: pointer;
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
    letter-spacing: -.5px;
    transition: color .25s ease 0s;
    border-bottom: 2px solid transparent;
}

.header-nav>li>.link:hover {
    border-color: #0cc;
}

.header-nav>li>.link.router-link-active {
    color: #fff;
    border-color: #0cc;
}

.header-nav>li:first-child .link.router-link-active,.header-nav>li:first-child .link:hover {
    border-color: transparent;
    position: relative;
}

.header-nav>li:first-child .link.router-link-active:before,.header-nav>li:first-child .link:hover:before {
    content: "";
    position: absolute;
    left: 30px;
    right: 0;
    bottom: -2px;
    height: 2px;
    background-color: #0cc;
}

.header-nav>li:last-child .link.router-link-active {
    /* border-color: transparent; */
}

.header-nav .sub-nav {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #000028;
}

.header-nav .sub-nav li {
    display: block;
}

.header-nav .sub-nav li a {
    display: block;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    font-weight: 400;
    padding: 15px 30px 15px 20px;
}

.header-nav .sub-nav li a:hover {
    background: #00183b;
    color: #fff;
}

.link.router-link-active {
    color: #0cc;
}

.nav-row {
    height: 45px;
    /* display: none */
	position: fixed;
	z-index: 100;
	left: 40px;
	top: 30px;
}
.webtitle{
	color: #fff;
	font-family: "sb";
	font-size: 22px;
	height: 37px;
}
button{
	cursor: pointer;
}
.loading_div{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	background-color: #000028;
}
.loading_div .content{
	width: 600px;
	top: 42%;
}
.loading_gif{
	width: 320px;
	margin: 0 auto 0;
}
.loading_word{
	width: 100%;
	text-align: center;
	font-size: 30px;
	color: #29dce5;
	margin-top: 10px;
}
.loading_progress{
	width: 100%;
	height: 5px;
	border-radius: 20px;
	overflow: hidden;
	margin-top: 50px;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, .5);
	position: relative;
}
.progress{
	width: 0%;
	height: 100%;
	
	background-image: linear-gradient(to right, #2cdec9,#29dde4);
}
.alert_div{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
	display: none;
}
.alert_div .content{
	width: 600px;
	height: 400px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -300px;
	margin-top: -200px;
	opacity: 0.8;
}
.alert_div .content img{
	width: 100%;
}
.close_alert_div{
	width: 30px;
	position: absolute;
	top: 19px;
	right: 19px;
	cursor: pointer;
}
.home_main{
	position: absolute;
}
.brand-logo{
    width: 120px;
    height: 44px;
    position: fixed;
    top: 40px;
    right: 40px;
	z-index: 100;
}
.layui-nav-tree{
	position: fixed;
    top: 128px;
    left: 0px;
    z-index: 91;
	max-height: 600px;
	overflow: auto;
}
.layui-nav-tree::-webkit-scrollbar {
	width: 2px;
}
.layui-nav-tree::-webkit-scrollbar-track {
	background-color: #ccccd4;
}

.layui-nav-tree::-webkit-scrollbar-thumb {
	background-color: #66667e;
}
/* 侧边导航 */
.controler {
    z-index: 50;
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 30px;
    height: 140px;
    padding: 10px 5px;
    background-color: #fff;
    font-size: 16px;
    cursor: pointer;
    border-radius: 20px;
}

.controler li {
	margin: 15px 0;
	text-align: center;
}
.controler .icon-phone{
	width: 30px;
    height: 17px;
    background-image: url(../images/phone.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.layui-nav-tree{
	width: 360px;
	background-color: #000028;
	display: none;
}
.layui-nav-bar{
	display: none;
}
.layui-nav .layui-icon{
	display: none;
}
.layui-nav .d_title_icon{
	position: absolute;
    top: 8px;
    right: 8px;
    left: auto!important;
    margin-top: 0;
    font-size: 30px;
    cursor: pointer;
    transition: all .2s;
    -webkit-transition: all .2s;
	color: #fff !important;
}
.two_title .d_title_icon{
	font-size: 25px;
}
.layui-nav-itemed>a .d_title_icon{
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}
.layui-nav-tree .layui-nav-item a{
	height: 50px;
	line-height: 50px;
}
.layui-nav-tree .layui-nav-item>a{
	padding: 0;
}
.d_select{
	position: absolute;
    left: 325px;
    top: 35px;
}
.layui-select-title{
	opacity: 0;
}
.layui-form-select dl{
	background-color: #000028;;
}
.layui-form-select dl dd{
	color: #fff;
}
.layui-form-select dl dd.layui-this{
	background-color: #000028;;
}
.layui-form-select dl dd:hover{
	box-sizing: border-box;
	/* border: 1px solid #00ffb9; */
	background-color: #009688 !important;
	color: #00ffb9;
}
.layui-input-block{
	margin-left: 0;
}
.layui-form-select dl{
	max-height: 380px;
}
.detail_div .layui-form-select dl{
	position: relative;
	top: auto;
}
.detail_div1 .layui-form-select dl{
	position: relative;
	top: auto;
}
/* 一级标题 */
.one_title{
	font-size: 18px;
	padding-left: 24px !important;
	color: #fff !important;
	background-color: #000028 !important;
	box-sizing: border-box;
}
.line_h{
	width: 1.8px;
	height: 20px;
	background: linear-gradient(to right, #00ffb9, #00e6dc);
	position: absolute;
	left: 15px;
	top: 50%;
	margin-top: -10px;
	/* display: none; */
}
.layui-nav-itemed .line_h{
	display: block;
}
/* 二级标题 */
.two_title{
	font-size: 16px;
	padding-left: 24px !important;
	color: #fff !important;
	box-sizing: border-box;
}
.two_title:hover{
	color: #00ffb9;
}
.three_title{
	box-sizing: border-box;
	cursor: pointer;
	font-size: 16px;
	padding-left: 30px !important;
	border-bottom: 1px solid #2b2f4a;
	background-color: rgba(12,40,71,.6);
}
.layui-nav-itemed>.two_title{
	box-sizing: border-box;
	border-top: 1px solid #00ffb9;
	background-color: #002949 !important;
	color: #00ffb9;
}
.two_title:hover{
	box-sizing: border-box;
	border-top: 1px solid #00ffb9;
	background-color: #002949 !important;
	color: #00ffb9;
}
.three_title:hover{
	box-sizing: border-box;
	border: 1px solid #00ffb9;
	background-color: #009688 !important;
	color: #00ffb9;
	
}
.border-bottom{
	background-color: #000028 !important;
	border-bottom: 1px solid #2b2f4a;
}
.layui-this .three_title{
	box-sizing: border-box;
	border: 1px solid #00ffb9;
	background-color: #002949;
	color: #00ffb9;
}
.layui-nav-child{
	padding: 0;
}
.left_meau{
	width: 44px;
    height: 51px;
    line-height: 51px;
    position: fixed;
    top: 30px;
    left: 40px;
    background-color: #000028;
    z-index: 90;
    color: #fff;
    font-size: 30px;
    padding-left: 10px;
}
.home_meau{
	color: #fff;
    font-size: 24px;
    margin-right: 12px;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 49px;
	z-index: 2;
}
.nav-row .close_meau{
	color: #fff;
	font-size: 24px;
	margin-right: 12px;
	cursor: pointer;
	position: absolute;
	left: 0;
	top: 49px;
	z-index: 2;
	display: none;
}
.home_meau:hover{
	color: #0cc;
}
.nav-row .close_meau:hover{
	color: #0cc;
}
.left_meau .icon-Close{
	display: none;
	cursor: pointer;
}
.left_meau .icon-Menu{
	cursor: pointer;
}

/* 
 主页
 */
.unity_box{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
}
.home_div{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: none;
}
.home_div .content{
	width: 16.34rem;
    height: 8.96rem;
    left: 46%;
    top: 52%;
}
@media screen and (max-width:1700px) {
	.home_div .content{
		width: 17.34rem;
	    height: 8.96rem;
	    left: 46%;
	    top: 52%;
	}
}
@media screen and (max-width:1500px) {
	.home_div .content{
		width: 18rem;
	    height: 9.96rem;
	    left: 46%;
	    top: 52%;
	}
}
@media screen and (max-width:1300px) {
	.home_div .content{
		width: 21rem;
		height: 10.96rem;
		left: 47%;
		top: 59%;
	}
	.road4 {
	    height: 3rem;
	    width: 4rem;
	    left: 8.62rem;
	    bottom: 1.3rem;
	}
}
.code{
	position: absolute;
	width: 120px;
	z-index: 100;
	right: 89px;
	bottom: 43px;
	display: none;
}
.code p{
	color: #fff;
	font-size: 14px;
	text-align: center;
	margin-top: 6px;
}
.touch_alert{
	width: 34px;
	position: absolute;
	left: 50%;
	bottom: 10px;
	margin-left: -17px;
	/* animation: 1s touch_alert linear infinite alternate;
	-webkit-animation: 1s touch_alert linear infinite alternate; */
}
.touch_alert_word{
	position: absolute;
	color: #fff;
	bottom: 18px;
	left: 55%;
	transform: translateX(-50%);
}

.touch_alert{
/* 	width: 34px;
	position: absolute;
	right: 118px;
	font-size: 39px;
	bottom: 1rem;
	margin-left: -17px;
	color: #fff;
	animation: 1s touch_alert linear infinite;
	-webkit-animation: 1s touch_alert linear infinite; */
}
/* @keyframes touch_alert{
	0%{transform: translateX(0px);}
	100%{transform: translateX(20px);opacity: 0.1;}
}
@-webkit-keyframes touch_alert{
	0%{-webkit-transform: translateX(0px);}
	100%{-webkit-transform: translateX(20px);opacity: 0.1;}
} */
@keyframes touch_alert{
	0%{transform: translateX(-10px);}
	100%{transform: translateX(10px);}
}
@-webkit-keyframes touch_alert{
	0%{-webkit-transform: translateX(-10px);}
	100%{-webkit-transform: translateX(10px);}
}
.raod_name{	
	position: absolute;	
	cursor: pointer;
}
.raod_name p{
	display: inline-block;
	font-size: 35px;
	color: #fff;
	height: 0.6rem;
	line-height: 0.6rem;
	border-bottom: 2px solid #008edd;
}
.road1{	
	left: 1.6rem;
    top: 4.26rem;
    width: 6rem;
    height: 3rem;
}
.road2{
	height: 3rem;
    width: 5rem;
    right: 2.2rem;
    top: 1.65rem;
}
.road2 p{
	position: absolute;
    top: 0.5rem;
    right: -0.5rem;
}
.road3{
	height: 2rem;
	width: 4rem;
	right: 1.2rem;
    top: 3.97rem;
}
.road3 p{
	position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}
.road4{
	height: 3rem;
    width: 4rem;
    left: 6.62rem;
    bottom: 0.3rem;
}
.road4 p{
	position: absolute;
	bottom: 1rem;
	left: 0;
}
.raod_name:hover p{
	color: #008edd;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}
/* .bottom_area .main{
	
} */
.story_1{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000028;
    z-index: 10;
    display: none;
}
.story_2{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000028;
    z-index: 10;
    display: none;
}
.welcome_div{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 60;
	display: none;
}
.welcome_div .mask{
	background-color: transparent !important;
}
.welcome_div .content{
	width: 843px;
    height: 503px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -421.5px;
    margin-top: -251.5px;
    /* opacity: 0.8; */
}
.welcome_div3{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 60;
	display: none;
}
.welcome_div3 .title p {
	font-family: 'sr';
	padding-top: 28px;
	font-size: 16px;
	line-height: 1.5em;
	color: white;
	letter-spacing: 1px;
	width: 516px;
}
.welcome_div3 .mask{
	background-color: transparent !important;
}
.welcome_div3 .content{
	width: 843px;
    height: 503px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -421.5px;
    margin-top: -251.5px;
    /* opacity: 0.8; */
}
.welcome_div3 .look_welcome{
	left: 48px;
}
.close_welcome{
	width: 50px;
    height: 50px;
    position: absolute;
    top: 12px;
    right: 23px;
    cursor: pointer;
}
.look_welcome{
	width: 180px;
	height: 47px;
	position: absolute;
	left: 62px;
	top: 322px;
	background-image: linear-gradient(to right, #00feb9,#00e6dc);
	font-size: 20px;
	color: #000000;
	text-align: center;
	line-height: 47px;
	letter-spacing: 1px;
	font-weight: bold;
	cursor: pointer;
}
.find_friends{
	width: 180px;
	height: 47px;
	float: right;
	background-image: linear-gradient(to right, #00feb9,#00e6dc);
	font-size: 20px;
	color: #000000;
	text-align: center;
	line-height: 47px;
	letter-spacing: 1px;
	font-weight: bold;
	cursor: pointer;
	font-family: "sr";
}
.story1_map{
	position: absolute;
	left: 45%;
	top: 100px;
	z-index: 10;
	background-image: linear-gradient(to right, #2cdec9,#29dde4);
}
.story1_map2{
	top: 150px;
}
.story1_map3{
	top: 200px;
}
.story1_map4{
	top: 250px;
}
.story2_line{
	width: 64%;
	top: 55%;
}
.close_area{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.story_content{
    width: 19.2rem;
    height: 10.62rem;
    position: absolute;
    left: 41%;
    top: 60%;
    margin-left: -9.6rem;
    margin-top: -5.31rem;
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform-origin: right;
    -webkit-transform-origin: top right;
    transition: all 1s;
    -webkit-transition: all 1s;
}

.story_2 .box{
    position: absolute;
    cursor: pointer;
}
.box_1{
	width: 4.63rem;
    height: 3.48rem;
    left: 0.92rem;
    top: 3.88rem;
}
.box_2{
    width: 3.93rem;
    height: 2.6rem;
    left: 4.31rem;
    top: 3.01rem;
}
.box_3{
	width: 4.07rem;
    height: 3.59rem;
    left: 7rem;
    top: 0.49rem;
}
.box_4{
    width: 6.18rem;
    height: 3.81rem;
    left: 5.1rem;
    top: 4.7rem;
    transform: scale(0.88);
	-webkit-transform: scale(0.88);
}
.box_5{
	width: 6.18rem;
    height: 3.73rem;
    left: 8.9rem;
    top: 2.6rem;
    transform: scale(0.83);
	-webkit-transform: scale(0.83);
}
.box_6{
	width: 4.34rem;
    height: 3.46rem;
    left: 14rem;
    top: 4.3rem;
    transform: scale(0.89);
	-webkit-transform: scale(0.89);
}
.box_7{
	width: 3.5rem;
    height: 2.69rem;
    left: 7.79rem;
    top: 7.4rem;
    transform: scale(0.94);
	-webkit-transform: scale(0.94);
}
.box_8{
width: 5.38rem;
    height: 3.24rem;
    left: 10.45rem;
    top: 5.76rem;
    transform: scale(0.87);
	-webkit-transform: scale(0.87);
}
.box .box_img{
    width: 100%;
/*    height: 100%;
    position: absolute;
    top: 0;f
    left: 0; */
}
.box .box_img2{
    width: 100%;
    /* height: 100%; */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
}
.box_act{
    position: absolute;
    cursor: pointer;
}
.boximg_act{
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}
.boximg_act2{
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    /* transform: scale(1.1);
    -webkit-transform: scale(1.1); */
}
.boximg_act .box_img2{
    opacity: 1 !important;
    
}
.boximg_act2 .box_img2{
    opacity: 1 !important;
    
}
.story_1 .two_div{
    width: 100%;
    height: 2rem;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    transform: translateX(-200%);
    -webkit-transform: translateX(-200%);
}
.story_2 .two_div{
    width: 100%;
    height: 2rem;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    transform: translateX(-200%);
    -webkit-transform: translateX(-200%);
}
.two_div_act{
    transform: none !important;
    -webkit-transform: none !important;
}
.two_div .mask{
    background-color: transparent;
}
.bottom_area{
    width: 16.5rem;
	overflow: hidden;
    position: absolute;
    left: 48%;
    margin-left: -8.25rem;
    bottom: -100%;
    height: 2rem;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.bottom_area .center{
	position: absolute;
	left: 50% !important;
	transform: translateX(-50%) !important;
	-webkit-transform: translateX(-50%) !important;
}
.bottom_area_act{
    bottom: 0;
}
.bottom_area .main{
	white-space: nowrap;
/* 	width: 2000px;
	display: flex;
	justify-content: flex-start;
	overflow-x: auto; */
}
.bottom_area .main::before,
.bottom_area .main::after {
  content: "";
  display: block;
  clear: both;
  line-height: 0;
  height: 0;
  visibility: hidden;
}
.story2_item{
	/* flex-shrink: 0; */
    /* width: 2.5rem; */
	width: 2.6rem;
    float: left;
    margin-left: 0.3rem;
    position: relative;
    cursor: pointer;
}
.story2_item .shou2{
	display: none;
	position: absolute;
	width: 0.3rem;
	left: 49%;
	top: 64%;
	margin-left: -0.15rem;
	margin-top: -0.15rem;
	animation: 0.7s start_img linear infinite alternate;
	-webkit-animation: 0.7s start_img linear infinite alternate;
}
@keyframes start_img{
	0%{transform: scale(1);}
	100%{transform: scale(0.85);opacity: 0.5;}
}
@-webkit-keyframes start_img{
	0%{-webkit-transform: scale(1);}
	100%{-webkit-transform: scale(0.85);opacity: 0.5;}
}
.story2_item:first-child{
    margin-left: 0;
}
/* .story2_item:first-child .shou2{
   display: block;
} */
.story2_item .arrow_alert{
	width: 0.27rem;
    height: 0.27rem;
    line-height: 0.27rem;
    position: absolute;
    border-radius: 50%;
    background-color: #00f0b3;
    right: 0.38rem;
    bottom: 0.38rem;
    color: #000;
    text-align: center;
    line-height: 0.27rem;
}
.story2_item .arrow_alert span{
	display: inline-block;
	width: 0.27rem;
	height: 0.27rem;
	line-height: 0.27rem;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0.01rem;
	font-size: 0.2rem;
}
.c_all{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.story2_item .label_name{
	width: 2rem;
    color: #fff;
    font-size: 0.18rem;
    margin-top: 0.3rem;
    margin-left: 0.3rem;
    padding-left: 0.1rem;
    /* border-left: 2px solid #00c39c; */
}

.detail_div{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
}
.detail_div1{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
}
.mask{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.8);
}
.detail_div .content{
    width: 1120px;
    height: 520px;
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid #00646e;
    margin-left: -560px;
    margin-top: -260px;
    padding: 30px;
    box-sizing: border-box;
    background: linear-gradient(#000028, #00557c);
}
.detail_div1 .content{
    width: 1120px;
    height: 550px;
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid #00646e;
    margin-left: -560px;
    margin-top: -275px;
    padding: 30px;
    box-sizing: border-box;
    background: linear-gradient(#000028, #00557c);
}

.d_title{
    font-size: 16px;
	height: 50px;
	line-height: 50px;
    color: #fff;
    margin-left: -5px;
}
.nav_arrow{
	display: inline-block;
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
}
.nav2_act{
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}
.d_close{
	font-size: 16px;
    color: #fff;
    position: absolute;
    right: 40px;
    top: 30px;
    cursor: pointer;
    /* width: 100px; */
    height: 50px;
    line-height: 50px;
}
.d_title_icon{
    color: #00d7a0 !important;
}
.d_title .d_title_icon:first-child{
	margin-left: 0 !important;
}
.d_title .d_title_icon{
	margin-left: 20px;
}
.detail_progress{
    float: left;
    margin-top: -5px;
    /* height: 1px; */
    /* background-color: #00d7a0; */
	/* display: none; */
}
.progress_item{
    /* width: 5px;
    height: 5px;
    margin-top: -2px;
    border-radius: 50%;
    background-color: #fff;
    float: left;
    margin-left: 150px;
    cursor: pointer;
    position: relative; */
	
	display: inline-block;
	height: 30px;
	letter-spacing: 2px;
	padding: 0 20px;
	font-size: 16px;
	line-height: 30px;
	margin: 10px 0;
	margin-right: 20px;
	border: 1px solid rgb(0, 204, 204);
	color: rgb(0, 204, 204);
	/* border-radius: 20px; */
	cursor: pointer;
	position: relative;
}
.nav2{
	cursor: pointer;
}
.progress_item_0{
	/* background-color: #00d7a0; */
	background-color: #00ffb9;
}
.progress_item:first-child{
    margin-left: 0;
}
.progress_item .name{
    font-size: 16px;
    color: rgb(0, 204, 204);
    /* position: absolute; */
 /*   left: 0;
    top: 10px;
    width: 130px; */
}
.progress_item_0 .name{
    color: black !important;
}
/* .progress_item_0:before{
	content: "";
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border-radius: 50%;
    background-color: #00d7a0;
    float: left;
    margin-left: -5px;
    cursor: pointer;
    position: relative;
    background: -webkit-radial-gradient(circle, #00c8a0, #505368);
} */
.detail_t1{
    font-size: 20px;
    color: #00d7a0;
    margin-top: 5px;
}
.detail_div1 .detail_t1{
    font-size: 20px;
    color: #00d7a0;
    margin-top: 9px;
}
.clear{ clear:both} 
.bottom_content{
    width: 100%;
    margin-top: 20px;
}
.video_content{
    width: 600px;
    position: relative;
    float: left;
}
.video_content>div{
    width: 100% !important;
    height: 338px !important;
}
.detail_div .video_content{
	height: 338px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.detail_div video{
    width: 10rem;
}
.detail_div .video-js .vjs-big-play-button {
    width: 64px;
    height: 64px;
    border-radius: 100%;
    border: none;
    background: linear-gradient(180deg,#00ffb9,#00e6dc);
    color: #000028;
    font-size: 40px;
    line-height: 64px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}
.all_video_box .video-js .vjs-big-play-button {
    width: 64px;
    height: 64px;
    border-radius: 100%;
    border: none;
    background: linear-gradient(180deg,#00ffb9,#00e6dc);
    color: #000028;
    font-size: 40px;
    line-height: 64px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}
.example .video-js .vjs-big-play-button {
    width: 64px;
    height: 64px;
    border-radius: 100%;
    border: none;
    background: linear-gradient(180deg,#00ffb9,#00e6dc);
    color: #000028;
    font-size: 40px;
    line-height: 64px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}
.shengtai_div .video-js .vjs-big-play-button {
    width: 64px;
    height: 64px;
    border-radius: 100%;
    border: none;
    background: linear-gradient(180deg,#00ffb9,#00e6dc);
    color: #000028;
    font-size: 40px;
    line-height: 64px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.detail_div1 video{
    width: 10rem;
}
.detail_div1 .video-js .vjs-big-play-button {
    width: 64px;
    height: 64px;
    border-radius: 100%;
    border: none;
    background: linear-gradient(180deg,#00ffb9,#00e6dc);
    color: #000028;
    font-size: 40px;
    line-height: 64px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.word_content{
    float: right;
    width: 435px;
    height: 338px;
}
.r_title{
	font-size: 18px;
    color: #fff;
    padding-left: 0.1rem;
    line-height: 1.3;
    letter-spacing: 2px;
    border-left: 2px solid #00c39c;
    font-family: "sb";
}
.r_desc{
    width: 100%;
    max-height: 200px;
    overflow: auto;
    /* white-space: pre-wrap; */
    font-size: 15px;
    line-height: 1.4;
    color: #fff;
    margin-top: 15px;
    text-align: justify;
    margin-bottom: 10px;
    letter-spacing: 1.5px !important;
    padding-right: 5px;
}

.r_desc::-webkit-scrollbar {
	width: 2px;
}

.r_desc::-webkit-scrollbar-track {
	background-color: #ccccd4;
}

.r_desc::-webkit-scrollbar-thumb {
	background-color: #66667e;
}
.bottom_content .link{
    font-size: 16px;
    color: #fff;
	height: 40px;
	line-height: 40px;
    cursor: pointer;
	width: 110px;
}

.active_1{
    transform: scale(1.5) translate(56%, -25%);
    -webkit-transform: scale(1.5) translate(56%, -25%);
}

.active_2{
    transform: scale(1.5) translate(41%, -12%);
    -webkit-transform: scale(1.5) translate(41%, -12%);
}
.active_3{
    transform: scale(1.5) translate(29%, 5%);
    -webkit-transform: scale(1.5) translate(29%, 5%);
}
.active_4{
    transform: scale(1.5) translate(30%, -33%);
    -webkit-transform: scale(1.5) translate(30%, -33%);
}
.active_5{
    transform: scale(1.5) translate(12%, -11%);
    -webkit-transform: scale(1.5) translate(12%, -11%);
}
.active_8{
    transform: scale(1.5) translate(7%, -42%);
    -webkit-transform: scale(1.5) translate(7%, -42%);
}
.active_7{
    transform: scale(1.5) translate(24%, -53%);
    -webkit-transform: scale(1.5) translate(24%, -53%);
}
.active_6{
    transform: scale(1.5) translate(-11%, -24%);
    -webkit-transform: scale(1.5) translate(-11%, -24%);
}

.all_video_box{
	width: 100%;
	min-height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 110;
	display: none;
	background: rgba(0, 0, 0, 0.6);
}
.all_video_box .content{
	width: 1000px;
	height: 606px;
}
.all_video_content{
	width: 900px;
	height: 506px;
	margin: 50px auto 0;
	position: relative;
}
.all_video_box .all_video_content>div {
    width: 100% !important;
    height: 506px !important;
}
.close_all_video{
	font-size: 16px;
	color: #fff;
	position: absolute;
	right: 47px;
	top: 5px;
	cursor: pointer;
	/* width: 100px; */
	height: 50px;
	line-height: 50px;
}
.shengtai_div{
	width: 100%;
	min-height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	display: none;
	background: #000028;
}
.nav_bg{
	width: 100%;
	height: 128px;
	background: #000028;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}
.shengtai_div .title div{
	height: 39px !important;
}
.shengtai_div .video_content{
	width: 1100px;
	float: none;
	margin: 50px auto 50px;
}
.shengtai_div .video_content>div {
    width: 100% !important;
    height: 619px !important;
}
.shengtai_div .int2{
	height: 404px;
}
.shengtai_div .l{
	height: 402px;
}
.shengtai_div .r{
	height: 324px;
}
.story_2 .all{
	width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 48px;
    box-sizing: border-box;
    text-align: justify;
    font-size: 20px;
    font-family: "sr";
}
.welcome_div3 .title h1{
	font-size: 27px;
}
.welcome_div3 .title div{
	float: left;
	width: 3.6px;
	height: 64px;
	margin-top: 9px;
	background: linear-gradient(#00ffb9, #00e6dc);
}
.welcome_div3 .all{
	width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 48px;
    box-sizing: border-box;
    text-align: justify;
    font-size: 20px;
    font-family: "sr";
}
.story_2 .title h1 {
	font-family: 'sb';
	font-size: 26px;
	line-height: 1.5em;
	color: white;
	padding-left: 21.6px;
}
.story_2 .title div {
	float: left;
	width: 3.6px;
	height: 63px;
	margin-top: 9px;
	background: linear-gradient(#00ffb9, #00e6dc);
}
.story_2 .title p {
	font-family: 'sr';
	padding-top: 28px;
	font-size: 16px;
	line-height: 1.5em;
	color: white;
	letter-spacing: 1px;
	width: 516px;
}
.story_2 .look_welcome{
	width: 180px;
	height: 47px;
	line-height: 47px;
	position: absolute;
	left: 53px;
	top: 322px;
	background-image: linear-gradient(to right, #00feb9,#00e6dc);
	font-size: 20px;
	color: #000000;
	text-align: center;
	line-height: 47px;
	letter-spacing: 1px;
	font-weight: bold;
	cursor: pointer;
}