/**
 * ***************************************************************
 * 平台系统官网主页面css样式
 * @author taoxiaofang
 * @date 2023-04-05 15:12:12
 * @since 1.0.0
 * ###############################################################
 */
:root {
	--treed-box-i:80px;
	--treed-box-j:40px;
	--base-font-size: 0.0625rem;
}
@property --cubic-bezier-r {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}
@property --cubic-bezier-x {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}
@charset "UTF-8";
html {
	min-width: 1200px;
	/*font-size:12px;*/
	scroll-behavior: smooth;
	font-size: var(--base-font-size);
}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
	margin:0;
	padding:0;
}
body,button,input,select,textarea {
	font:12px "microsoft yahei",Helvetica,Tahoma,Arial,"Microsoft jhengHei",sans-serif;
}

@media screen and (max-width: 1440px){
    :root {
        --base-font-size: 0.069vw;
    }
}

body.pc {
	overflow-x:auto;
	overflow-y:hidden;
}

.animation-content {
	
}

.effect-content {
    height: 200vh;
    min-height: 1864rem;
}

.effect-box {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 932rem;
    background-color: #000000;
    perspective: 800px;
    overflow: hidden;
}

.e-square {
    position: absolute;
    transform-origin: 50% 50%;
    border-radius: 10%;
}

.e-logo {
    position: absolute;
    transform-origin: 50% 50%;
    border-radius: 10rem;
}

.e-icon-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 50%;
    width: 1200rem;
    height: 500rem;
    transform: translate(-50%, -100rem);
    display: grid;
    grid-template-columns: repeat(7, 120rem);
    grid-gap: 80rem 30rem;
    grid-auto-rows: 120rem;

    justify-content: center;
    align-content: center;

    z-index: 10;
}

.e-icon-box-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(23, 26, 29, 0.9);
}

.e-icon {
    position: relative;
    background-color: #0089ff;
    border-radius: 10rem;
}



button,input,select,textarea {
	font-size:100%;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
}
address,cite,dfn,em,var {
	font-style:normal;
}
code,kbd,pre,samp {
	font-family:couriernew,courier,monospace;
}
article,aside,dialog,footer,header,section,footer,nav,figure,menu {
	display:block;
}
small {
	font-size:12px;
}
ul,ol {
	list-style:none;
}
sup {
	vertical-align:text-top;
}
sub {
	vertical-align:text-bottom;
}
legend {
	color:#000;
}
fieldset,img {
	border:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
a {
	text-decoration:none;
}
a:link {
	text-decoration:none;
}
a:visited {
	text-decoration:none;
}
a:hover {
	text-decoration:none;
	text-decoration:inherit;
}

/*header*/
.header{width: 100%;overflow: hidden; z-index: 99 }
.header{_background-color:#125baa;_background-image:none;}
.header{position: fixed;top: 0;left:0;height: 80px;background-repeat: repeat-x;background-position: left top;background-color: rgba(0, 0, 0, .3)}
.header .logo{width: 147px;height: 47px;margin-top: 17px}
.header ul{width: auto}
.header ul li{float: left;line-height: 80px;padding: 0 25px}
.header ul li a{font-size: 18px;color: #fff;padding-bottom: 5px;opacity: 0.7;color: #e2e2e2\9}
.header ul li a:hover,.header ul li a.selected{border-bottom: 2px solid #fff;color: #fff;opacity: 1}
.header ul li{position: relative;}
.header ul li span.new{position: absolute;right: 35px;top:15px;display: block;width: 36px;height: 22px;background-image: url(../images/new.gif);}
.header ul li span.erhuo{position: absolute;right: 30px;top:5px;display: block;width: 70px;height: 30px;background-image: url(../images/1111.gif);}

.logo {
	text-align: center;
	filter: contrast(30px);
}

.logo a {
	color: #fff;
	font-weight: bold;
	font-family: 'montserrat';
	mix-blend-mode: difference;
	text-shadow: 0px 0px 1px #fff,
		-1px 0px 1px #bbb,
		-1px 0px 1px #aaa,
		-1px 0px 2px #999,
		-1px 0px 2px #888,
		-3px 0px 1px #4e5056;
	/*display: block;*/
	/*animation: spread 3s ease-in-out infinite alternate;*/
	animation : logoshow 5s forwards;
}

.logo a::before {
	content: '馨馨数据';
	position: absolute;
    color: #000;
    mix-blend-mode: difference;
    z-index: -1;
    transform: translate(-10px, 10px) scaleY(0.5) skew(50deg);
    filter: blur(1px);
    -webkit-mask-image: linear-gradient(transparent, #4e5056);
}

@keyframes spread {
	to {
		color:#c3c9c7;
		text-shadow: 20px 0 70px #c5cbc9;
		transform-origin: center center;
		transform: rotate(1deg) translate(1px, 1px);
	}
}

@keyframes logoshow {
	from {
		filter: blur(2px);
		letter-spacing: -30px;
	}
	to {
		filter: blur(0px);
		letter-spacing: 0px;
		mix-blend-mode: difference;
	}
}

.container {
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}

.fl{float: left}
.fr{float: right}
.clb{clear: both}

.opacity7{filter:Alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity: 0.7}

.w1200 {
	width:1200px;
	margin-left:auto;
	margin-right:auto;
}

.w1253 {
	width:1253px;
	height:100%;
	margin-left:auto;
	margin-right:auto;
	position:relative;
}

.ms_wrap {
	margin-top:-42px;
	position:fixed;
	right:20px;
	top:50%;
	z-index:99;
}
#main_step {
	height:auto;
	width:12px;
}
#main_step ul li {
	background:url(../images/point_nav.png) no-repeat scroll 0 0;
	cursor:pointer;
	display:block;
	margin:15px 0;
	position:relative;
	width:12px;
	height:12px;
}
#main_step ul li.on {
	background-position:0 -14px;
}
.img_bg,.p1_guide,.p1_big,.p1_small,.p1_text,.p2_text,.p2_circle,.p2_icon,.p3_text,.p3_point,.p3_rotate,.p3_pc,.p3_icon,.p4_text,.p4_circle,.p4_rotate,.p4_hours,.p4_icon,.p5_text,.p5_rocket,.p5_info {
	position:absolute;
}
.main {
	height:auto;
	position:relative;
}

.trending-up {
    color: #e02727
}

.trending-down {
    color: #1ac843
}

.sub-title {
	font-size: 1.4em;
}

.board-title {
	font-size: 1.3em;
}

.up-down-area-number {
	position:absolute; 
	margin-right: 20px;
	margin-top: 20px;	
	z-index: 9;
	font-size: 1.3em;
	border-radius: 5px; 
	border: 1px solid #4d6c57; 
	vertical-align: middle;
	text-align: center; 
	width: 300px; 
	height: 3.5em;
}

.up-down-area-right {
	position:absolute;
	margin-top: 20px;
	margin-left: 895px;
	z-index: 9;
	font-size: 1.3em;
	border-radius: 5px; 
	border: 1px solid #4d6c57; 
	vertical-align: middle;
	text-align: center; 
	width: 300px; 
	height: 3.5em;
}

.board-ctn {
    /*width: 363px;*/
    width: 485px;
    height: 100%;
    padding: 5px 10px 0 10px;
    _padding: 5px 0 0 10px;
}

.board-item {
    width: 103px;
    height: 75px;
}

.board-item-ctn {
    float: left;
    border: 3px solid #f5f5f5;
    width: 105px;
    height: 75px;
    margin: 10px 10px 0 0;
}

.bd, .bd a {
    color: #494949;
    font-family: 'SimSun';
    text-decoration: underline;
}

.bd a,.title a,.bd-top a {
    text-decoration: none;
}

.bd a:hover,.title a:hover,.bd-top a:hover {
    text-decoration: underline;
}

.board-detail {
    height: 180px;
    width: 100%;
    font-size: 12px;
}

.board-item-title {
    font-size: 14px;
    margin-top: 4px;
}

.board-item-zdf {
    font-family: arial;
    font-size: 21px;
    line-height: 34px;
}

.board-stk-info {
    font-size: 12px;
    padding-top: 5px;
}

.board-stk-info {
    font-size: 12px;
    padding-top: 5px;
}

#index-module-ctn .top,#index-module-ctn .top1 {
    border: 1px solid #fe7e80;
}

#index-module-ctn .top .board-item-zdf,.top1 .board-item-zdf {
    color: #ed1113;
}

.bg {
    /*background: transparent url(http://mat1.gtimg.com/finance/images/stock/p/mstats/sprite_04.gif) no-repeat 0 0;*/
    background: transparent url(../images/sprite_04.gif) no-repeat 0 0;
}

#index-module-ctn .top, #index-module-ctn .top1 {
    border: 1px solid #fe7e80;
}

#index-module-ctn .top .board-item-zdf,.top1 .board-item-zdf {
    color: #ed1113;
}

#index-module-ctn .end,#index-module-ctn .end1 {
    border: 1px solid #a5d067;
}

#index-module-ctn .end .board-item-zdf,.end1 .board-item-zdf {
    color: #87b744;
}

#index-module-ctn .top,#index-module-ctn .top1 {
    border: 1px solid #fe7e80;
}

#index-module-ctn .top .board-item-zdf,.top1 .board-item-zdf {
    color: #ed1113;
}

#index-module-ctn .end,#index-module-ctn .end1 {
    border: 1px solid #a5d067;
}

#index-module-ctn .end .board-item-zdf,.end1 .board-item-zdf {
    color: #87b744;
}

#index-module-ctn .top {
    background-position: 0 -936px;
}

#index-module-ctn .top1 {
    background-position: 0 -861px;
}

#index-module-tips .index-module-detail .top {
    border: none;
}

#index-module-ctn .end {
    background-position: 0 -1011px;
}

#index-module-ctn .end1 {
    background-position: 0 -1086px;
}

#index-module-news .index-module-detail {
    height: 212px;
}

.iicon {
	float:left;
	display:block;
	width:63px;
	height:63px;
	margin-right:20px;
	background-image:url(../images/xmfx.png);
	background-repeat:no-repeat
}
.icon_01,.icon_02,.icon_03,.icon_031 {
	width:42px;
	height:42px;
	margin-right:10px
}
.icon_01 {
	background-position:0 0
}
.icon_02 {
	background-position:0 -44px
}
.icon_03 {
	background-position:0 -88px
}
.icon_031 {
	background-position:0 -132px
}
.icon_04 {
	background-position:0 -178px
}
.icon_05 {
	background-position:0 -244px
}
.icon_06 {
	background-position:0 -309px
}
.icon_07 {
	background-position:0 -374px
}
.icon_08 {
	background-position:0 -439px
}
.icon_09 {
	background-position:0 -507px
}
.icon_10 {
	background-position:0 -572px
}
.icon_11 {
	background-position:0 -637px
}
.icon_12 {
	background-position:0 -702px
}
.icon_13{background-image: url(../images/icon_13.png)}
.icon_14{background-image: url(../images/icon_14.png)}
.icon_15{background-image: url(../images/icon_15.png)}
.icon_16{background-image: url(../images/icon_16.png)}
.icon_20{background-image: url(../images/icon_20.png)}
.icon_21{background-image: url(../images/icon_21.png)}
.icon_22{background-image: url(../images/icon_22.png)}
.icon_23{background-image: url(../images/icon_.png)}
.icon_github{background-size: 90%;background-image: url(../images/icon_github.png)}
.icon_python{background-size: 90%;background-image: url(../images/icon_python.png)}
.icon_net{background-size: 90%;background-image: url(../images/icon_net.png)}
.icon_go{background-size: 90%;background-image: url(../images/icon_go.png)}
.icon_php{background-size: 90%;background-image: url(../images/icon_php.png)}
.icon_vue{background-size: 90%;background-image: url(../images/icon_vue.png)}
.icon_cloud{background-size: 90%;background-image: url(../images/icon_cloud.jpg)}
.icon_cplusplus{background-size: 90%;background-image: url(../images/cplusplusfeature.png)}
.icon_java{background-size: 90%; background-color: #3a75b0; border-radius: 5px;background-image: url(../images/Java-horz-wht.svg)}
.icon_k8s{background-size: 300px 55px;background-image: url(../images/k8s.svg); background-repeat: no-repeat;}
.icon_rancher {background-size: 55px 40px;transform: scale(1.8);height: 55px;border-radius: 5px;background-image: url(../images/rancher-logo.svg);}
.icon_openai {background-size: 55px 40px;transform: scale(1.3);height: 55px;border-radius: 5px;background-image: url(../images/openai.svg);}

.ibanner_wrap {
	width:100%;
	height:730px
}

@media (min-width: 1200px) {
	.ibanner {
		width:100%;
		height:730px;
		position:relative;
		overflow:hidden
	}
}

@media (max-width: 1200px) {
	.ibanner {
		height:730px;
		position:relative;
		overflow:hidden
	}

	.effect-content {
	    height: 30vh;
	    min-height: 932rem;
	}
	.effect-box {
	    position: relative;
	    top: 0;
	    height: 30vh;
	    min-height: 932rem;
	    background-color: #000000;
	    perspective: 800px;
	    overflow: hidden;
	}
}

.ibanner .bgSet {
	position:relative
}
.ibanner .bgSet li {
	position:absolute;
	width:100%;
	height:730px;
	display:none;
	top:0;
	left:0
}
.ibanner .img-set {
	position:absolute;
	width:1256px;
	left:50%;
	margin-left:-628px;
	/*animation: rotate 20s linear infinite;*/
}

@keyframes rotate {
	0% {
		transform: rotateY(0deg);
	}
	100% {
		transform: rotateY(360deg);
	}
}

.ibanner .img-set li {
	display:none;
	top:0;
	left:0
}
.ibanner .img-set .img-item {
	position:absolute;
	left:-20px;
	top:175px;
	/*-webkit-box-reflect:below 0 linear-gradient(transparent, #000);*/
}
.ibanner .img-set .2_1 {
	position:absolute;
	left:-50px;
	top:150px
}
.ibanner .img-set .3_1 {
	position:absolute;
	left:-50px;
	top:117px
}
.ibanner .ib_text {
	position:absolute;
	width:510px;
	height:auto;
	left:764px;
	top:180px
}
.ibanner .ib_text .b {
	font-size:65px;
	color:#fff;
	font-weight:bold
}
.ibanner .ib_text .s {
	font-size:22px;
	color:#fff;
	line-height:40px;
	margin:20px 0 44px
}
.ibanner .ib_text p {
	font-size:14px;
	color:#e6edf3;
	line-height:30px
}
.ibanner .ib_text p.p1 {
	color:#c7eee9
}
.ibanner .ib_text p a {
	color:#acd5ff;
	padding-left:20px
}
.ibanner .ib_text p a:hover {
	color:#fff
}
.ibanner .ib_text a.download {
	display: block;
	width:242px;
	height:69px;
	text-align:center;
	line-height:69px;
	margin-top:30px;
	color:#fff;
	font-size:27px
}
.ibanner .ib_text a.download-button {
	background-color:#0fce5b;
	position: relative;
}

.ibanner .ib_text a.download-button:hover {
	background-color:#00b94a;
}

.ibanner .ib_text button.download {
	display: block;
	width:242px;
	height:69px;
	text-align:center;
	line-height:69px;
	margin-top:30px;
	color:#fff;
	font-size:27px
}
.ibanner .ib_text button.download-button {
	background-color:#0fce5b;
	position: relative;
	z-index: 1;
	border: none;
	overflow: hidden;
}

.ibanner .ib_text button.download-button::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200%;
	height: 200%;
	background-color: #c9d7e1;
	z-index: -2;
	transform-origin: left top;
	animation: button_retation 30s linear infinite;
}

.ibanner .ib_text button.download-button::after {
	content: '';
	position: absolute;
	background-color:#0fce5b;
	--w: 3px;
	top: var(--w);
	left: var(--w);
	width: calc(100% - 2 * var(--w));
	height: calc(100% - 2 * var(--w));
	z-index: -1;
	border-radius: inherit;
}

.ibanner .ib_text button.download-button:hover {
	background-color:#00b94a;
}

@keyframes button_retation {
	to {
		transform: rotate(1turn);
	}
}

.ibanner .ib_text a.download-icon {
	background-image:url(../images/ibanner_btn.png);
	background-position:0 0;
}
.ibanner .ib_text a.download-icon:hover {
	background-position:-244px 0;
}

.ibanner .menuWrap {
	position:absolute;
	width:100%;
}
.ibanner .menuWrap .menuSet {
	position:absolute;
	width:100%;
	top:700px;
	text-align:center;
	font-size:0;
}
.ibanner .menuWrap .menuSet li {
	cursor:pointer;
	margin:0 7px;
	display:inline;
}
.ibanner .prev,.ibanner .next {
	position:absolute;
	top:331px;
	cursor:pointer;
	display:none;
}
.ibanner .prev a,.ibanner .next a {
	display:block;
	width:38px;
	height:67px;
	background-image:url(../images/ibanner_arrow.png);
	background-repeat:no-repeat;
}
.ibanner .prev {
	left:3%
}
.ibanner .prev a {
	background-position:0 -69px
}
.ibanner .prev a:hover {
	background-position:-40px -69px
}
.ibanner .next {
	right:3%
}
.ibanner .next a {
	background-position:0 0
}
.ibanner .next a:hover {
	background-position:-40px 0
}
.bgSet img {
	border:0
}
.icontent {
	height:366px;
	margin-top:52px;
	border-left:1px solid #e5e5e5
}
.icontent .ic_item {
	float:left;
	width:399px;
	height:100%;
	overflow:hidden;
	border-bottom:1px solid #e5e5e5;
}
.ic_item .face {
	will-change: transform;
	transition: transform 1.5s ease;
}
.ic_item .ic-item-logo {
	perspective: 800px;
	transition: transform 1s ease;
}
.ic_item .ic-item-logo:hover .face {
	transform: rotateY(180deg);
}
.icontent .ic_item .ici_content {
	padding-left:23px;
	border-right:1px solid #e5e5e5;
	height:280px;
	margin-top:0;
	padding-top:0;
	animation-delay: 0.3s;
	animation-duration:1.5s;
	-webkit-animation-duration:1.5s; 
   /* animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;*/
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 60px, 0);
    transform: translate3d(0, 60px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.ic_item .title {
	font-size:30px;
	color:#333;
	margin:0 0 14px;
	height:42px;
	overflow:hidden;
	padding-top:20px
}
.ic_item .title span {
	display:block;
	float:left;
	line-height:42px
}
.ic_item p {
    font-size: 16px;
    color: #727b84;
    line-height: 30px;
    background: linear-gradient(to right, #93a193, #0ac568) no-repeat right bottom;
    background-size: 0 2px;
    transition: background-size 2000ms;
}
.ic_item p:hover {
	background-position-x: left;
	background-size: 100% 2px;
}

.ic_item p img {
	vertical-align:middle;
	margin:0 10px
}
.ic_item p a {
	display:block;
	width:260px;
	height:55px;
	margin-left:10px;
	margin-top:30px;
	line-height:55px;
	color:#fff;
	background-color:#00d136;
	text-align:center;
	font-size:24px
}
.ic_item p a:hover {
	background-color:#18e24c
}

.borb {
	border-bottom:1px solid #e5e5e5
}
.plist {
	height: auto;
}
.plist .title {
	width: 100%;
	font-size:1.8em;
	margin:30px 0 30px;
}
.plist .pitem {
	width: 33.33%;
	height:auto;
	float:left;
	margin-bottom:50px;
}
.pitem .pitem_txt {
	width:auto;
	float:left
}
.pitem .pitem_txt p.p1 {
	font-size:16px;
	color:#333
}
.pitem .pitem_txt p.p2 {
	font-size:14px;
	color:#727b84;
	padding:10px 0
}
.pitem .pitem_txt p a {
	display:block;
	float:left;
	margin-right:16px;
	width:92px;
	height:30px;
	text-align:center;
	line-height:30px;
	border:1px solid #e5e5e5;
	color:#333
}
.pitem .pitem_txt p a:hover {
	background-color:#eefbfe;
	border:1px solid #7ed4fd;
	color:#18a2e7
}
.pitem .pitem_txt p span {
	display:block;
	float:left;
	line-height:30px;
	font-size:14px;
	color:#afb7bf
}
.ilinks {
	background-color:#f3f6f6;
	padding:50px 0
}
.ilinks .w1200 {
	line-height:30px
}
.ilinks a {
	font-size:12px;
	color:#55616d;
	padding-right:15px
}
.ilinks a:hover {
	color:#bbbae7
}

.exponent-down {
	text-align:center;
	display: inline-block;
 	height: 120px;
 	border-radius: 5px;
 	background-image: linear-gradient(to bottom, rgba(20, 30, 20,1), #0b112c);
}

.exponent-up {
    text-align: center;
    display: inline-block;
    height: 120px;
    border-radius: 5px;
    background-image: linear-gradient(to bottom, rgb(125 38 38), #0b122f);
}

.index-title {
	font-size: 2.2em;
	color: #fff;
}

.index-number-up {
	font-size: 1.8em;
	color: red;
}

.index-number-down {
	font-size: 1.8em;
	color: green;
}

.data-table {
	width:100%; 
	align-items: center; 
	text-align: center; 
	font-size: 1.3em;
}

.page_wrap {
	width:100%;
	overflow:hidden;
	position:relative;
	display:none;
}
.page_wrap img.img_bg {
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.page1 .p1_big {
	left:0;
	top:310px;
	width:655px;
	height:436px;
}
.page1 .p1_small {
	left:500px;
	top:490px;
	width:173px;
	height:273px;
}
.page1 .p1_guide {
	left:50%;
	top:803px;
	margin-left:-19px;
	width:37px;
	height:205px;
	cursor:pointer;
}
.page1 .p1_text {
	width:510px;
	height:auto;
	right:0;
	top:340px;
}
.page1 .p1_text .b {
	font-size:65px;
	color:#fff;
}
.page1 .p1_text .s {
	font-size:22px;
	color:#fff;
	line-height:40px;
	margin:20px 0 44px;
}
.page1 .p1_text p {
	font-size:14px;
	color:#acd5ff;
	line-height:30px;
}
.page1 .p1_text p a {
	color:#acd5ff;
	padding-left:20px;
}
.page1 .p1_text p a:hover {
	color:#fff;
}
.page1 .p1_text a.download {
	display:block;
	width:242px;
	height:69px;
	text-align:center;
	line-height:69px;
	margin-top:30px;
	color:#fff;
	font-size:27px;
}
.page1 .p1_text a.button1 {
	background-color:#0fce5b;
}
.page1 .p1_text a.button1:hover {
	background-color:#00b94a;
}
.page1 .p1_text a.button2 {
	background-color:#00bbce;
}
.page1 .p1_text a.button2:hover {
	background-color:#00adbe;
}
.page2 .p2_text {
	width:100%;
	top:150px;
	color:#fff;
	text-align:center;
}
.page2 .p2_text .b {
	font-size:65px;
	color:#04b1b7;
}
.page2 .p2_text .s {
	font-size:20px;
	color:#00c1c8;
	margin-top:25px;
}
.page2 .p2_circle {
	left:50%;
	top:460px;
	margin-left:-214px;
	width:428px;
	height:428px;
	background:url(../images/page2_circle.png) no-repeat center center;
	text-align:center;
}
.page2 .p2_circle p {
	font-size:28px;
	color:#656565;
	padding:121px 0 25px
}
.page2 .p2_circle span {
	font-size:75px;
	color:#00c1c8;
	font-weight:bold;
}
.page2 div.p2_icon {
	width:420px;
	height:238px;
	background-image:url(../images/page2_icon.png);
	background-repeat:no-repeat;
	background-position:0 0;
}
.page2 div.p2i_01 {
	left:30px;
	top:367px;
	background-position:0 0
}
.page2 div.p2i_02 {
	left:20px;
	top:700px;
	background-position:0 -240px;
}
.page2 div.p2i_03 {
	right:33px;
	top:367px;
	text-align:right;
	background-position:0 -480px;
}
.page2 div.p2i_04 {
	right:30px;
	top:700px;
	text-align:right;
	background-position:0 -720px;
}
.page2 div.p2_icon span {
	display:block;
	font-size:30px;
	color:#fff;
	padding-top:140px;
}
.page2 div.p2i_01 span {
	padding-left:75px;
}
.page2 div.p2i_02 span {
	padding-left:75px;
}
.page2 div.p2i_03 span {
	padding-right:75px
}
.page2 div.p2i_04 span {
	padding-right:85px
}
.page3 {
	height:1226px
}
.page3 .w1253 {
	background:url(../images/page3_circle.png) no-repeat center top
}
.page3 .p3_text {
	width:100%;
	top:150px;
	color:#fff;
	text-align:center
}
.page3 .p3_text .b {
	font-size:65px
}
.page3 .p3_text .s {
	font-size:20px;
	color:#deedfa;
	margin-top:25px
}
.page3 .p3_point {
	left:70px;
	top:78px;
	width:1145px;
	height:957px
}
.page3 .p3_pc {
	left:50%;
	top:400px;
	margin-left:-254px;
	width:508px;
	height:426px
}
.page3 .p3_rotate {
	left:13px;
	top:0;
	width:1226px;
	height:1226px
}
.page3 .p3_icon {
	width:141px;
	height:129px;
	background:url(../images/page3_icon.png) no-repeat left top
}
.page3 div.p3i_01 {
	right:230px;
	top:360px;
	background-position:0 0
}
.page3 div.p3i_02 {
	right:150px;
	top:680px;
	background-position:0 -131px
}
.page3 div.p3i_03 {
	right:400px;
	top:940px;
	background-position:0 -262px
}
.page3 div.p3i_04 {
	left:220px;
	top:860px;
	background-position:0 -393px
}
.page3 div.p3i_05 {
	left:54px;
	top:560px;
	background-position:0 -524px
}
.page3 div.p3i_06 {
	left:80px;
	top:200px;
	background-position:0 -656px
}
.page4 .p4_text {
	width:100%;
	top:150px;
	color:#fff;
	text-align:center
}
.page4 .p4_text .b {
	font-size:65px
}
.page4 .p4_text .s {
	font-size:20px;
	color:#a7abb9;
	margin-top:25px
}
.page4 .p4_circle {
	left:413px;
	top:410px;
	width:450px;
	height:450px
}
.page4 .p4_rotate {
	left:413px;
	top:410px;
	width:450px;
	height:450px
}
.page4 .p4_hours {
	right:68px;
	bottom:50px;
	width:255px;
	height:118px
}
.page4 .p4_icon {
	width:189px;
	height:74px;
	background:url(../images/page4_icon.png) no-repeat left top
}
.page4 div.p4i_01 {
	left:305px;
	top:467px;
	background-position:0 0
}
.page4 div.p4i_02 {
	left:326px;
	top:758px;
	background-position:0 -76px
}
.page4 div.p4i_03 {
	right:305px;
	top:442px;
	background-position:0 -152px
}
.page4 div.p4i_04 {
	right:300px;
	top:758px;
	background-position:0 -228px
}
.page5 .p5_text {
	width:100%;
	top:150px;
	color:#fff;
	text-align:center
}
.page5 .p5_text .b {
	font-size:65px
}
.page5 .p5_text .s {
	font-size:20px;
	margin-top:25px
}
.page5 .p5_info {
	left:50%;
	top:350px;
	margin-left:-171px;
	width:342px;
	height:572px
}
.page5 .p5_rocket {
	left:420px;
	top:320px;
	width:557px;
	height:605px
}

.threed-box-container {
	position: fixed;
	bottom: 25%;
	bottom: 25vh;
	right: 50px;
	z-index: 1050;
	/*transform: scale(0.9);*/
	/*transform: translateY(100%);*/
	transition : all cubic-bezier(0.66, -0.34, 0.39, 1.29) 3s;
	-webkit-transition: all cubic-bezier(0.66, -0.34, 0.39, 1.29) 3s;
	-moz-transition : all cubic-bezier(0.66, -0.34, 0.39, 1.29) 3s;
	-ms-transition : all cubic-bezier(0.66, -0.34, 0.39, 1.29) 3s;
}

.treed-box {
	transform-style: preserve-3d;
	width: var(--treed-box-i);
	height: var(--treed-box-i);
	position: relative;
	transition: .5s;
	perspective: 2000px;
	animation: treedBoxMove 15s linear infinite;
}

.treed-box>.box-item {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	display: flex;
	align-items: center;
	transition: .5s;
}

.treed-box>.box-item>img {
	width: 100%;
}

.treed-box>.box-item:nth-child(1) {
	transform: translateZ(var(--treed-box-j));
}
.treed-box>.box-item:nth-child(2) {
	transform: translateZ(calc(-1 * var(--treed-box-j))) rotateX(180deg);
}
.treed-box>.box-item:nth-child(3) {
	transform: translateX(var(--treed-box-j)) rotateY(90deg);
}
.treed-box>.box-item:nth-child(4) {
	transform: translateX(calc(-1 * var(--treed-box-j))) rotateY(-90deg);
}
.treed-box>.box-item:nth-child(5) {
	transform: translateY(calc(-1 * var(--treed-box-j))) rotateX(90deg);
}
.treed-box>.box-item:nth-child(6) {
	transform: translateY(calc(1 * var(--treed-box-j))) rotateX(-90deg);
}

.treed-box:hover {
	transform: rotateX(60deg) rotateY(30deg);
	--treed-box-i:100px;
	--treed-box-j:100px;
}

@keyframes treedBoxMove {
	from {
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	to {
		transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
}

.draw-box-container {
	position: fixed;
	width: 120px;
	height: 120px;
	bottom: 25%;
	left: 20px;
	z-index: 1050;
}

.draw-box-container > .ball {
	width: 5px;
	height: 5px;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	position: absolute;
	background-color: red;
	transform: rotate(var(--cubic-bezier-r)) translate(var(--cubic-bezier-x));
	animation: cubic-bezier-x-move 2s, cubic-bezier-r-move 8s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.5, -120, 0.5, 120);
}

@keyframes cubic-bezier-x-move {
	to {
		--cubic-bezier-x:1px;
	}
}
@keyframes cubic-bezier-r-move {
	to {
		--cubic-bezier-r : 2deg;
	}
}

/*ie6*/
.cindex{background-color:#125baa;_background-image:none}
.cindex{background-color:#2EA0D9;background-image:none;position: static}

/*tree*/
.remind{display: none;z-index: 99999;position:absolute;top:80px;left: -50px;padding-top:5px;background-color: rgba(0, 0, 0, .5);overflow:hidden;}
.remind a{display:block;height:50px;padding: 0 20px;line-height:50px;font-size:16px;margin-bottom:5px;color:#fff;cursor:pointer;text-align: center}
.remind a:hover{color:#fff;background-color: rgba(0, 0, 0, .6);border:none!important}

/*footer*/
.footer {height:auto;padding: 40px 0px 40px 0px;text-align: center; font-size: 14px;}
.footer p {color: #a194c3;line-height: 25px}
.footer p a { color: #a194c3;text-decoration: none}
.footer p a:hover { color: #bbbae7;text-decoration: underline}
.ifooter p {color: #888}
.ifooter p a { color: #888}
.ifooter p a:hover { color: #bbbae7}
.zfooter{background-color: #1F232C;padding: 60px 0}
.zfooter p {color: #aeaeae}
.zfooter p a { color: #aeaeae;font-size: 14px}
.zfooter p a:hover { color: #4ba7ed;text-decoration: underline;}



  .iphone {
    width: 97px;
    height: 42px;
  }

  .iphone > img {
    width: 97px;
    height: 42px;
    display: block;
  }

  .android {
    width: 111px;
    height: 42px;
  }

  .android > img {
    width: 111px;
    height: 42px;
    display: block;
  }

  .mac {
    width: 96px;
    height: 42px;
  }

  .mac > img {
    width: 96px;
    height: 42px;
    display: block;
  }

  .windows {
    width: 122px;
    height: 42px;
  }

  .windows > img {
    width: 122px;
    height: 42px;
    display: block;
  }

.dd-base-footer-contant {
    font-family: "PingFangSC-Regular", "Microsoft YaHei", "Open Sans", Arial, "Hiragino Sans GB", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

.dd-base-footer-container {
    width: 83.333333333333333%;
    padding-top: 79px;
}

.dd-base-footer-list-group {
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    -moz-box-pack: justify;
    justify-content: space-between;
    padding-bottom: 42px;
    border-bottom: 1px solid rgba(126, 134, 142, 0.24);
}

.dd-base-footer-group-item {
    width: 16.666666666666666%;
}
.dd-base-footer-group-item-container {
  width: 90%;
}

.dd-base-footer-download-content > .dd-foot-download-item {
    margin-right: 16px;
    display: inline-block;
}

.dd-base-footer-contant div {
    box-sizing: border-box;
}
.dd-base-footer-contant div {
    box-sizing: border-box;
}
.dd-base-footer-download-content {
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-justify-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    -moz-box-pack: center;
    justify-content: center;
    margin-bottom: 24px;
}
.dd-base-footer-download-content .download-block {
    position: relative;
    cursor: pointer;
}
.dd-base-footer-contant div {
    box-sizing: border-box;
}


.qr-content {
    width: 130px;
    height: 177px;
    background: #ffffff;
    -webkit-box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.18);
    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    padding: 0 13px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: -190px;
    left: 50%;
    margin-left: -65px;
    visibility: hidden;
    -webkit-transform: translateY(10px) scale(0.9);
    -ms-transform: translateY(10px) scale(0.9);
    -moz-transform: translateY(10px) scale(0.9);
    -o-transform: translateY(10px) scale(0.9);
    transform: translateY(10px) scale(0.9);
    opacity: 0;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    transition: -webkit-transform 0.2s ease-in-out;
    -o-transition: -o-transform 0.2s ease-in-out;
    -moz-transition: transform 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out,
      -moz-transform 0.2s ease-in-out, -o-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out,
      -moz-transform 0.2s ease-in-out, -o-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
    -webkit-transition-property: opacity, visibility, -webkit-transform;
    transition-property: opacity, visibility, -webkit-transform;
    -o-transition-property: opacity, visibility, -o-transform;
    -moz-transition-property: transform, opacity, visibility, -moz-transform;
    transition-property: transform, opacity, visibility;
    transition-property: transform, opacity, visibility, -webkit-transform,
      -moz-transform, -o-transform;
    transition-property: transform, opacity, visibility, -webkit-transform,
      -moz-transform, -o-transform;
    transition-property: transform, opacity, visibility, -webkit-transform;
  }

  .dd-base-footer-download-content > .dd-foot-download-item {
    margin-right: 16px;
    display: inline-block;
  }

  .conversation-base .conversation-icon {
    display: block;
    height: 29.8px;
    width: 29.8px;
    margin: auto;
  }

  .conversation-base .active {
    display: none;
  }

  .conversation-base:hover .conversation-icon {
    display: none;
  }

  .conversation-base:hover .active {
    display: block;
  }

  .dd-base-footer-download-content .download-block > .active {
    display: none;
  }
  .dd-base-footer-download-content .download-block:hover > img {
    display: none;
  }

  .dd-base-footer-download-content .download-block:hover > .active {
    display: block;
  }

  .dd-base-footer-download-content .download-block:hover .qrcode-scan {
  	animation-play-state: running;
    -webkit-animation-play-state: running;
  }

  .qr-area {
  	position: relative;
  	overflow: hidden;
  	margin: 13px 0 3px;
  }

  .qr-img {
    width: 104px;
    height: 104px;
  }

  .qr-text {
    text-align: left;
    line-height: 17px;
    font-size: 12px;
    color: #000000;
    height: 34px;
    padding-top: 5px;
    border-top: 0.5px solid #b4babd;
  }

  .dd-base-footer-download-content .download-block:hover .qr-content {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px) scale(1);
    -ms-transform: translateY(0px) scale(1);
    -moz-transform: translateY(0px) scale(1);
    -o-transform: translateY(0px) scale(1);
    transform: translateY(0px) scale(1);
  }

  .conversation-base:hover .qr-content {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px) scale(1);
    -ms-transform: translateY(0px) scale(1);
    -moz-transform: translateY(0px) scale(1);
    -o-transform: translateY(0px) scale(1);
    transform: translateY(0px) scale(1);
  }

  .conversation-base .qr-text {
    text-align: center;
  }

  .qrcode-scan {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 50px;
    background-image: -moz-linear-gradient(to bottom, rgba(40,120,255,0), rgba(166,187,217,0.6));
    background-image: -webkit-linear-gradient(to bottom, rgba(40,120,255,0), rgba(166,187,217,0.6));
    background-image: -o-linear-gradient(to bottom, rgba(40,120,255,0), rgba(166,187,217,0.6));
    background-image: -ms-linear-gradient(to bottom, rgba(40,120,255,0), rgba(166,187,217,0.6));
	background-image: linear-gradient(to bottom, rgba(40, 120, 255, 0), rgb(166,187,217,0.6));
    animation: scan_animate 2s infinite linear;
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}
@keyframes scan_animate {
    0% {
        -moz-transform: translate(0, -100%);
        -webkit-transform: translate(0, -100%);
        -o-transform: translate(0, -100%);
        -ms-transform: translate(0, -100%);
        transform: translate(0, -100%);
    }
    100% {
        -moz-transform: translate(0%, 55px);
        -webkit-transform: translate(0%, 55px);
        -o-transform: translate(0%, 55px);
        -ms-transform: translate(0%, 55px);
        transform: translate(0%, 55px);
    }
}