* {
	margin: 0;
	padding: 0;
}

hr {
	width: 100%;
  	float: left;
	border: 1px solid rgba(0,0,0,0.1);
} 

.p {
	font-size: 13px;
	color: rgb(166, 166, 166);
	line-height: 30px;
	text-align: center;
}

.p a {
	color: #7089d0;
	/* text-decoration: none; */
}

.text {
	color: #707070;
	line-height: 30px;
	font-size: 14px;
}

.title {
	color: #5e5e5e;
}
/* 导航栏 */
.Navigation-bar {
	height: 50px;
	width: 100%;
	/* width: 1400px; */
	/* border: solid 1px red; */
	position: fixed;
	top: 0;
	z-index: 2;
	background: -webkit-linear-gradient(0deg, #cddfff 30%, #f0e1f7 100%);
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	/* background: -webkit-linear-gradient(0deg, #06e7ff 0%, #00aaff 100%); */
}

.logo-bar {
	width: 50%;
	height: 50px;
	/* background-image: url("../icon.ico");
	background-size: 40px;
	background-position: 5px 5px;
	background-repeat: no-repeat; */
	position: absolute;
	left: 12%;
}

.logo-bar h1 {
	font-weight: 300;
	line-height: 50px;
	font-size: 18px;
	padding-left: 55px;
}

.Navigation-bar-center {
	width: 40%;
	height: 50px;
	/* width: auto; */
	display: flex;
	/* border: solid 1px #0000ff; */
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position: absolute;
	right: 10%;
}

.Navigation-bar-center button {
	height: 80%;
	width: 120px;
	margin: 5px;
	border-radius: 50px;
	border: none;
}


.chunks-center {
	height: 600px;	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	transition: 300ms;
	/* border: solid 1px red; */
}

#chunks {
	width: 100%;
	height: calc(99% - 20px);
	/* border: solid 1px red; */
	position: fixed;
	margin-top: 50px;
	/* backdrop-filter: blur(5px); */
	transition: 350ms;
	opacity: 0;
	display: flex;
	justify-content: center;
	/* align-items: center; */
	flex-wrap: wrap;
	/*background-color: #007bff;
	background: -webkit-linear-gradient(180deg, #06e7ff 0%, #00aaff 100%); */
}



fieldset {
	width: 700px;
	height: auto;
	padding-left: 20px;
	border: solid 1px #dddddd;
}

legend {
	font-weight: 700;
}

input[type="text"] {
	height: 25px;
	padding-left: 5px;
	border: solid 1px #b6b6b6;
	transition: 300ms;
}

input[type="text"]:focus {
	outline: #00aaff 1px solid;
	box-shadow: 0 0 8px rgba(0, 170, 255, .5);
}

 input[type=number] {
	width: 110px;
	height: 25px;
	border: solid 1px #b4b4b4;
	outline: none;
 }
 input[type=number]::-webkit-inner-spin-button {
	 height: 25.5px;
	 
	 /* transform: scale(2); */
 }
/* 单元格 */
.axis{
	width: 110px;
	color: #a0a0a0;
	text-align: center;
}
.axis::-webkit-input-placeholder{
	color: rgba(0, 0, 0, .5);
}

.pColor {
	width: 120px;
	color: #a0a0a0;
	text-align: center;
}

.expression,
.speed_expression {
	width: 370px;
	color: #a0a0a0;
	text-align: center;
}

.expression {
	border: solid 1px rgb(0, 170, 255) !important;
}

.expression:focus {
	outline: #00aaff 1px solid !important;
	box-shadow: 0 0 8px rgb(0, 170, 255) !important;
}

.speed_expression {
	border: solid 1px rgb(233, 121, 255) !important;
}

.speed_expression:focus {
	outline: #de73ff 1px solid !important;
	box-shadow: 0 0 8px rgb(233, 121, 255) !important;
}


#expression option {
	font-size: 25px;
	color: #ff0000;
}

table tr td:nth-of-type(1) {
	width: 110px;
	font-size: 13px;
	padding-left: 0px;
	transition: 300ms;
	text-align: center;
	margin-right: 20px;
}

select {
	width: 120px;
	height: 25px;
	border: solid 1px #b6b6b6;
	color: #696969;
}

select:focus {
	outline: #00aaff 1px solid;
}

table {
	border-collapse: collapse;
}

table tr {
	line-height: 36px;
	color: #666;
	border: solid 1px transparent;
	margin-top: 1px;
	transition: 200ms;
}

table td {
	width: 130px;
}

button {
	width: auto;
	height: 30px;
}

.cmd_build {
	width: 80%;
	background-color: #00aaff;
	color: #fff;
	border: 1px solid #dddddd;
	cursor: pointer;
	transition: 200ms;
}

.cmd_build:hover {
	background-color: #3ad1ff;
	border: 1px solid #00aaff;
}

.output_cmd {
	width: 100%;
	height: 500px;
	overflow: hidden;
	background-color: #fff;
	/*border-radius: 15px;*/
	transform: translateY(3px);
	box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
}

.left_box,
.right_box {
	/* border: solid 1px red; */
	/* background-color: #949494*/
	/*box-shadow: 0 5px 8px rgba(0,0,0,0.05);*/
}

.left_box {
	width: 582px;
	height: 530px;
	float: left;
	/* overflow-y: auto; */
	overflow: hidden;
	padding: 10px;
}

.right_box {
	width: 380px;
	height: 580px;
	float: left;
	padding: 5px;
	/* border: solid 1px red; */
}

.slide_way {
	width: 1000%;
	height: 500px;
	/* border: solid 1px red; */
	transition: 300ms ease-out;
	/* margin-top: 10px; */
	transform: translate(0, 0);
	border-bottom: solid 1px transparent;
	/*background-color: #fff;
*/
	z-index: 1;
}

.slide_way_wrapper {
	width: 560px;
	height: 492px;
	float: left;
	/* overflow: auto; */
	margin-right: 20px;
	position: relative;
	left: 0px;
	top: -1.01px;
	transition: 300ms;
	background-color: #fff;
	/*border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	border-top-right-radius: 15px;
*/
	box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
}

.swith_cmd_Generator_way {
	width: 150px;
	height: 30px;
	border: solid 1px #dddddd;
	background-color: #f0f0f0;
	z-index: 0;
	color: #797979;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	/* transform:skew(10deg); */
	transition: 140ms;
	position: relative;
	top: 3px;
}


.output_destination {
	width: 95%;
	height: 95%;
	margin-top: 5px;
	margin-right: 20px;
	/* overflow: auto; */
	line-height: 30px;
	transition: 300ms;
	opacity: 0;
	background-image: url("../img/copy_background.png");
	background-size: 200%;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 25px;
	text-align: center;
	float: left;
}

.output_destination:hover {
	transition: 100ms;
	background-color: #fafafa;
	background-size: 220%;
}

.output_destination:active {
	background-color: #efefef;
	background-size: 150%;
}

.list ul {
	list-style-type: none;
	font-size: 15px;
}

.list ul li {
	line-height: 35px;
	padding-left: 50px;
}

.list ul li:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

.prompt {
	position: absolute;
	color: #ffaa00;
	margin-left: 10px;
}

.doubt {
	width: 20px;
	height: 20px;
	background-color: #888888;
	color: #fff;
	border-radius: 50px;
	float: right;
	text-align: center;
	cursor: pointer;
	pointer-events: none;
}

.doubt_box {
	width: 400px;
	height: auto;
	background-color: #fff;
	box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	position: absolute;
	margin-top: -620px;
	margin-left: -10px;
	padding: 1%;
	font-size: 13px;
	transition: 200ms;
	transform: scaleY(0.5);
	opacity: 0;
	z-index: 999;
	pointer-events: none;
}

.doubt_box p {
	color: #6b6b6b;
	line-height: 25px;
}

.blackboard {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	pointer-events: none;
	opacity: 0;
	transition: 240ms;
}




.Messagebox {
	width: 250px;
	height: auto;
	color: #ff9d26;
	position: fixed;
	top: 5%;
	left: 38%;
	padding: 10px;
	background-color: #55aa00;
	text-align: center;
	border-radius: 5px;
	color: #fff;
	font-size: 14px;
	line-height: 40px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	opacity: 0;
	pointer-events: none;
	transform: translate(0, -100%);
	transition: 400ms;
	z-index: 999;
	overflow: hidden;
}



.setMore-btn {
	width: 150px;
	height: 30px;
	border: solid 1px #333;
	color: #fff;
	background-color: #00aa00;
}

.setMore-hide {
	display: none;
}

.cpt_box {
	width: 45px;
	height: 20px;
	padding: 5px;
	border-radius: 5px;
	/* border: solid 1px red; */
	transition: 300ms;
	background-image: url("../img/btn_check0.png");
	background-position: 0 center;
	background-size: 60%;
	background-repeat: no-repeat;
	margin-left: 30px;
}

.row_status {
	margin-left: 22px;
	position: relative;
	top: -9px;
}

.cpt_box * {
	position: relative;
	top: -8px;
	left: 5px;
	user-select: none;
}

.cpt_box:hover {
	background-color: rgb(236, 236, 236);
}

.cpt {
	width: 120px;
	opacity: 0;
	color: #a0a0a0;
	text-align: center;
	transform: translateX(-50px);
	pointer-events: none;
	transition: 240ms;
}

.Welcome {
	width: 250px;
	height: 80px;
	opacity: 0;
	text-align: center;
	background-color: #bcefa9;
	transition: 600ms;
	position: fixed;
	top: 10%;
	left: 40%;
	border-radius: 5px;
	transform: translateY(-120%);
	font-size: 13px;
	user-select: none;
	pointer-events: none;
	z-index: 100;
}

.Welcome h2 {
	position: relative;
	top: 5px;
	line-height: 40px;
}

.Welcome p {
	line-height: 30px;
}

.setMore {
	width: 98%;
}

.cmdName_select,
#way,
.select {
	width: 130px;
}

.cmdIpt {
	width: 270px;
	text-align: center;
	color: #888888;
}

.cmdIpt_copy {
	width: 90px;
	height: 26px;
	border: solid 1px #adadad;
	background-color: #f0f0f0;
	margin-left: 20px;
	position: relative;
	transition: 300ms;
	top: 1px;
}

.cmdIpt_copy:hover {
	background-color: #E1EFFA;
	border: solid 1px #668FAD;
}

.cmdIpt_copy:active {
	transition: 50ms;
	transform: scale(0.9);
}

.iamge_span {
	color: rgb(140, 187, 253);
}


.hideExpression {
	width: 376px;
	height: auto;
	background-color: #ffffff;
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
	border-radius: 3px;
	position: absolute;
	margin-top: 0px;
	opacity: 0;
	z-index: 3;
	pointer-events: none;
	cursor: context-menu;
}

.hideExpression ul {
	color: #5a5a5a;
	list-style-type: none;
	padding: 5px;
}

.hideExpression ul li {
	padding-left: 5px;
	font-size: 11px;
	line-height: 25px;
	border: solid 1px transparent;
	border-bottom: solid 2px transparent;
}

.hideExpression ul li:hover {
	background-color: #E1EFFA;
	border: solid 1px #668FAD;
	border-bottom: solid 2px #668FAD;
}

.hideExpression ul li p {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.hideExpression ul li p:nth-of-type(1) {
	color: #333;
	font-weight: 700;
}

.tools {
	width: 200px;
	height: 30px;
	/* border: solid 1px red; */
	position: fixed;
	left: 10px;
	bottom: 5px;
	z-index: 999;
}

.tools img {
	height: 30px;
	float: left;
}

.tools img:hover {
	border-radius: 5px;
	background-color: rgba(0, 0, 0, .05);
}

.resource-center {
	width: 1200px;
	height: calc(100%);
	/* border: solid 1px red; */
	position: relative;
}

.listUl_box {
	width: 15%;
	/* border: solid 1px #dedede; */
	/* padding: 1%; */
	border-radius: 5px;
	transform: translateY(40px);
}

.listUl, .sonList {
	margin-top: 10px;
	/* transition: 450ms cubic-bezier(0.08, 0.3, 0,1); */
}

.listUl {
	width: 100%;
	height: calc(96% - 0px);
	position: absolute;
	list-style-type: none;
	font-size: 14px;
}
.listUl h3 {
	height: 30px;
}
.listUl li, .focusPrint {
	transition: 240ms;
}
.listUl li {
	line-height: 40px;
	padding-left: 10px;
	border-radius: 5px;
	cursor: context-menu;
}
.sonList_tag {
	color: #999;
	float: right;
	padding-right: 10px;
	font-size: 18px;
	transform: translateY(-1px);
}

.focusPrint {
	width: 3px;
	height: 20px;
	background-color: transparent;
	/*background-color:#0085ff;*/
	float: left;
	border-radius: 5px;
	margin-top: 10px;
}

.sonList {
	width: 100%;
	height: 100%;
	position: absolute;
	list-style-type: none;
	font-size: 14px;
	color: #919191;
	/* border: solid 1px red; */
	opacity: 0.3;
	transform: translateX(10%);
}
.sonList li {
	line-height: 30px;
	padding-left: 10px;
	white-space: nowrap;
	/* 防止文字换行 */
	overflow: hidden;
	/* 超出部分隐藏 */
	text-overflow: ellipsis;
	/* 显示省略号 */
	font-family: 300;
}

.sonList li:hover {
	color: #007bff;
	background-color: rgba(0, 0, 0, .05);
	cursor: context-menu;
}

.sonList h3 {
	color: #000000;
}



.return {
	width: 45px;
	height: 150px;
	position: absolute;
	left: -50px;
	top: 250px;
	border: none;
	background-color: rgba(0, 0, 0, .0);
	box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.0);
	border-radius: 10px;
	font-size: 25px;
	color: #666;
	transition: 500ms;
	padding: 10px;
	cursor: pointer;
}
.return:hover {
	left: -55px;
	background-color: rgba(0, 0, 0, .05);
	box-shadow: 0px 0px 0px 1px rgba(233, 233, 233, 1.0);
}

.chunks-resource-box {
	width: 80%;
	height: calc(96%);
	border-radius: 5px;
	padding: 1%;
	overflow-x: hidden;
	overflow-y: auto;
	position: absolute;
	right: 0;
	top: 0;
}
.chunks-resource-box .CRB1_title {
	font-weight: 700;
	margin-left: 2%;
	line-height: 50px;
	font-size: 30px;
}


#particleName {
	overflow: hidden;
}
.CRB1_title {
	width: 95%;
	/* background-color: #fff; */
}
.CRB1_txt {
	position: relative;
}
.chunks-resource-box-content {
	width: 95%;
	height: 95%;
	/* border: solid 1px red; */
	overflow: auto;
	transform: translateX(10px);
}
#particleName .chunks-resource-box-content button {
	margin: 5px;
	padding: 5px;
	
}
.searchInput {
	width: 200px;
	height: 40px;
	padding-left: 35px;
	margin: 5px;
	float: right;
	border-radius: 30px;
	background-image: url("../img/search.png");
	background-size: 30px;
	background-position: 5px 3px;
	background-repeat: no-repeat;
	background-color: #f3f3f3;
	border: none;
	transform: translateX(-40px);
	outline: none;
	/* 移除默认的聚焦效果 */
	border: 1px solid transparent;
	transition: 300ms;
}
.searchInput::-webkit-search-cancel-button {
	display: none;
}

.searchInput:focus {
	border: 1px solid #007afe;
	/* 设置为蓝色实线边框 */
	/* box-shadow: 0 0 8px rgba(0, 125, 255, .5); */
}

.chunks-resource-box h1 {
	padding-left: 10px;
	line-height: 50px;
}
.chunks-resource-box .text {
	font-size: 15px;
	margin-left: 4%;
	line-height: 60px;
}

.cmd_Generator {
	background-color: #eff4fa!important;
}

#Case {
	overflow: inherit;
}
#Case .project {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	/* border: solid 1px red; */
	padding: 0;
	margin: 0;
}
.cardBox {
	width: 160px;
	height: 160px;
	float: left;
	/* border: solid 1px red; */
	margin-left: 15px;
	margin-top: 25px;
	border-radius: 5px;
	box-shadow: 0 3px 5px rgba(0, 0, 0, .12);
	background-color: #fff;
	transition: 300ms;
}
.cardBox a {
	text-decoration: none;
	color: #999;
}
.cardBox a:hover {
	color: #0000ff;
	border-bottom: solid 1px #0000ff;
}
.cardBox:hover {
	transform: translateY(-3px);
}
#Case .project .card {
	width: 100%;
	height: 110px;
	background-color: #ffffff;
	background-size: 100%;
	background-position: 100% center;
	transition: 100ms;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
#Case .project .card:hover {
	transition: 400ms;
	opacity: 0.9;
}
#Case .project .cardBox p {
	width: 100%;
	line-height: 25px;
	font-size: 12px;
	color: #000000;
	/* text-align: center; */
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	color: #b2b2b2;
	padding-left: 5px;
}

#Case .project .cardBox .complete_name {
	font-size: 14px!important;
	color: #3b3b3b!important;
	text-align: center;
	transform: translateY(2px);
}

#Case .project .cardBox .year {
	float: right;
	padding-right: 10px;
}

#Case .project .card h3 {
	color: #fff;
	text-align: center;
	line-height: 60px;
	opacity: 0;
	font-weight: 100;
	background-color: rgba(0, 0, 0, 0.4);
	transition: 400ms;
	transform: translateY(40px);
	cursor: pointer;
}


#Case .project .cardBox:hover h3 {
	transform: translateY(30px);
	opacity: 1;
}

#Case .project .card:active h3 {
	transform: scale(0.8) translateY(40px);
}

#Case .project .cardBox .UP {
	line-height: 15px;
	font-size: 10px;
	border: solid 1px #c0c0c0;
	padding-left: 1px;
	padding-right: 1px;
	border-radius: 25%;
	margin-right: 3px;
}

.ENDText {
	width: 100%;
	/* background-color: #007afe; */
	float: left;
	text-align: center;
}

.directory_head {
	cursor: pointer;
	transition: 200ms;
	position: relative;
	left: 0;
}
.directory_head span:hover {
	color: #aaaaff;
}
 
#tutorial .card {
	width: 160px;
	height: 160px;
	float: left;
	margin: 1%;
	background-color: #eeefee;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	/* border: solid 1px red; */
}



#tutorial .card img {
	width: 100%;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

#tutorial img {
	width: 480px;
	border-radius: 8px;
}

.bigImg {
	width: 80%!important;
	/* border: solid 1px red; */
	transform: translateX(0%)!important;
}


#tutorial .img_content {
	width: 440px;
	height: auto;
	/* border: solid 1px red; */
	margin-left: 20px;
}
#tutorial .img_content table {
	width: 400px;
	border: solid 1px red;
}
#tutorial .img_content table tr,#tutorial .img_content th {
	line-height: 25px;
	border: solid 1px #b6b6b6;	
}
#tutorial .img_content table tr td:nth-of-type(1) {
	padding-right: 12px;
	text-align: right;
	border: solid 1px #b6b6b6;
}
#tutorial .img_content table tr td:nth-of-type(2) {
	padding-left: 12px;
}
#tutorial .card p {
	font-size: 12px;
	line-height: 18px;
	transform: translateY(-10px);
	padding-left: 5px;
	padding-right: 5px;
	text-indent: 0px!important;
}

#tutorial h2 {
	width: 98%;
	line-height: 30px;
	color: #007afe!important;
	border-left: solid 4px #007afe;
	font-size: 25px; 
	padding-left: 20px;
	margin-bottom: 0px;
	margin-top: 80px;
	transition: 500ms;
}

#tutorial h3 {
	color: #333;
	margin-top: 30px;
	margin-bottom: 10px;
}

#tutorial .card p:nth-of-type(2) {
	float: right;
	transform: translateY(-20px);
	padding-right: 5px;
}
#tutorial {
	color: #666;
	font-size: 14px;
}
#tutorial ul {
	padding-left: 30px;
}
#tutorial p {
	color: #666;
	margin-top: 10px;
	line-height: 22px;
	font-size: 15px;
	text-indent: 30px;
}

#tutorial .center {
	width: 100%;
	height: auto;
	margin: 0 auto;
}
#tutorial .center img {
	transform: translateX(-5%);
}

#tutorial .item {
  	width: 98%;
	line-height: 30px;
	font-size: 15px;
	border-left: solid 4px #007afe;
	padding-left: 20px;
	color: #007afe;
	/* background-color: rgba(0,0,0,0.05); */
 	margin-top: 30px;
 	/* float: left; */
}
#tutorial ul li {
	line-height: 25px;
	margin-left: 20px;
}

#tutorial .slide_card {
	width: 100%;
	height: auto;
	border: solid 1px #8a6dec;
	margin-top: 20px;
	overflow: hidden;
}

#tutorial .slide_card .title {
	font-weight: 200;
	line-height: 40px;
	background-color: #8a6dec;
	color: #fff;
	margin: 0;
	padding-right: 20px;
}

#tutorial .slide_area {
	width: 100%;
	height: calc(100% - 40px);
	/* border: solid 1px red; */
	display: flex;
	justify-content: center;
	/* align-items: center; */
	flex-wrap: wrap;
}

#tutorial .slide_card .card {
	width: 160px;
	height: 160px;
	/* border: solid 1px red; */
	margin-left: 15px;
	margin-top: 25px;
	border-radius: 5px;
	box-shadow: 0 3px 5px rgba(0, 0, 0, .12);
	background-color: #fff;
	transition: 300ms;
}
#tutorial .slide_card .cardBox {
	margin: 10px;
}
#tutorial .slide_card .cardBox a {
	text-decoration: none;
	color: #999;
}
#tutorial .slide_card .cardBox a:hover {
	color: #0000ff;
	border-bottom: solid 1px #0000ff;
}
#tutorial .slide_card .cardBox:hover {
	transform: translateY(-3px);
}
#tutorial .slide_card .cardBox .card {
	width: 100%;
	height: 110px;
	background-color: #ffffff;
	background-size: 100%;
	background-position: 100% center;
	transition: 100ms;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	margin: 0!important;
	padding: 0!important;
}



#tutorial .slide_card .cardBox .card:hover {
	transition: 400ms;
	opacity: 0.9;
}
#tutorial .slide_card .cardBox .cardBox p {
	width: 100%;
	line-height: 25px;
	font-size: 12px!important;
	color: #000000!important;
	/* text-align: center; */
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	color: #b2b2b2;
	padding-left: 0px!important;
	margin: 0!important;
	margin-left: 0!important;
	
	margin-top: 0px!important;
	text-indent: 0px!important;
}

#tutorial .slide_card .cardBox .complete_name {
	font-size: 14px!important;
	color: #3b3b3b!important;
	text-align: center;
	transform: translateY(2px);
	text-indent: 0px!important;
}

#tutorial .slide_card .cardBox a {
	width: 60px;
	/* border: solid 1px red; */
	line-height: 15px;
	font-size: 10px!important;
	margin-left: 0!important;
	padding-left: 0px!important;
	text-indent: 0px!important;
}

#tutorial .slide_card .cardBox .UP {
	line-height: 15px;
	font-size: 10px!important;
	border: solid 1px #c0c0c0;
	padding-left: 1px!important;
	padding-right: 1px!important;
	border-radius: 25%;
}

#tutorial .slide_card .cardBox .year {
	float: right;
	padding-right: 5px;
	line-height: 15px;
	font-size: 10px!important;
	margin-top: 5px!important;
}

#tutorial .slide_card .cardBox .card h3 {
	color: #fff;
	text-align: center;
	line-height: 60px;
	opacity: 0;
	font-weight: 100;
	background-color: rgba(0, 0, 0, 0.4);
	transition: 400ms;
	transform: translateY(10px);
	cursor: pointer;
}


#tutorial .slide_card .cardBox:hover h3 {
	transform: translateY(0px);
	opacity: 1;
}

#tutorial .slide_card .cardBox:active h3 {
	transform: scale(0.8) translateY(0px);
}










.autoTable {
	margin: 0 auto;
	position: relative;
	box-shadow: 0px 1.5px 2px rgba(0, 0, 0, .3);
	/* right: 10%; */
	margin-top: 15px;
}
.autoTable tr {
	
}
.autoTable td, .autoTable th {
	width: auto;
	padding-left: 10px;
	padding-right: 10px;
	border: solid 1px #dddddd;
}
.autoTable th {
	background-color: #fff;
	color: #333333;
}
.autoTable td:nth-of-type(1) {
	color: #007afe;
}
.autoTable tr:nth-child(even) {
	background-color: #f9f9f9;
}


#download button {
	width: 210px;
	height: 70px;
	border: none;
	font-size: 15px;
	margin: 1%;
	border-radius: 10px;
	line-height: 25px;
	background-color: #0184c1;
	color: #fff;
	cursor: pointer;
	transition: 230ms;

}
#download button img {
	height: 70%;
	float: left;
	padding-left: 10px;
	margin: 1%;
}
#download button:hover {
	background-color: #00aaff;
}

.download_card {
	width: 250px;
	height: 350px;
	background-color: rgba(213, 229, 255, 0.5);
	margin: 2%;
	border-radius: 15px;
	float: left;
	box-shadow: 0 3px 5px rgba(83, 89, 99, 0.2);
}
.download_card:nth-of-type(1) {
  	
}
.download_card:nth-of-type(2) {
  	
}
.download_card .download_card_img {
	width: 100%;
	height: 160px;
	background-size: auto 100%;
	background-position: center 100%;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}

.download_card h2 {
	line-height: 50px;
	margin-left: 20px;
	color: #031555;
}
.download_card p {
	font-size: 13px;
	margin-left: 20px;
	line-height: 20px;
	margin-right: 20px;
	color: #5f5f5f;
}
.interlinkage {
	font-size: 15px;
	display: block;
	text-align: center;
	line-height: 30px;
	/* border: solid 1px red; */
	width: 80%;
	margin: auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #679bc2;
	/* transform: translate(20px,0); */
}
#Copy_to_value {
	/*width: 120px;
	height: auto;
	border: none;
	border-radius: 5px;*/
	padding-left: 5px;
	padding-right: 5px;
	white-space: nowrap;
	/* 防止文字换行 */
	overflow: hidden;
	/* 超出部分隐藏 */
	text-overflow: ellipsis;
	/* 显示省略号 */
	transition: 240ms;
}

#Copy_to_value img {
	width: 50%;
	/*float: left;*/

}

#Copy_to_value:hover {
	transform: scale(1.05);
}

#Copy_to_value:active {
	/*background-color: rgba(0, 0, 0, .3);*/
	transform: scale(0.85);
}



.problem_account-for {
	width: 25px;
	transform: translate(0,3px);
	float: left;
	/* border: solid 1px red; */
	cursor: pointer;
}
.text-container {
	width: 100px;
	padding: 5px;
	/* border: solid 1px red; */
	position: absolute;
	top: 20px;
	right: 50px;
	display: inline-block;
}

.switch_particle_version {
	height: 40px;
	border: none;
	border-radius: 5px;
	float: right;
	background: rgba(0,0,0,.0);
	padding-left: 10px;
	padding-right: 10px;
	color: #aaaaff;
	transition: 200ms;
}


.switch_particle_version:hover {
	background: rgba(0,0,0,.05);
	transform: scale(1.05);
}
.switch_particle_version:active {
	background: rgba(0,0,0,.05);
	transform: scale(.9);
}


.closeWindow {
	width: 50px;
	height: 40px;
	border: none;
	transition: 240ms;
	font-size: 30px;
	line-height: 42px;
	border-top-right-radius: 5px;
	background-color: transparent;
	position: absolute;
	top: 0;
	right: 0;
}
.closeWindow:hover {
	background-color: red;
	color: #fff;
}


.code {
	background-color: #ececec;
	color: #333!important;
	padding: 5px;
	border-radius: 5px;
	/* background-color: #000; */
	color: #565656!important;
	text-indent: 10px!important;
}
.code_blue {color: #258bd2;}
.code_red {color: #c72554;}
.code_yellow {color: #aab300;}
.code_green {color: #00aa00;}
.code_purple {color: #ff5cff;}
.code_orange {color: #ff8e59;}

blue {color: #007bff;}
green {color: #00aa00;}
red {color: #c72554;}
alpha {color: #aaaaff;}
yellow {color: #ffaa00;}
purple {color: #ff6ffd;}
gradient {
	background-image: linear-gradient(to right, #0055ff, #ff55ff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
bgCover {
	padding-left: 5px;
	padding-right: 5px;
	background-color: rgba(0, 0, 0, .08);
	border-radius: 3px;
	color: #333;
}

.close {
	height: 40px;
	width: 60px;
	border: none;
	color: #000;
	float: right;
	padding-right: 10px;
	font-size: 25px;
	transition: 200ms;
	background-color: transparent;
}
.close:hover {
	background-color: red;
	color: #fff;
}

.center {
	text-align: center;
}

.top25px {
	margin-top: 35px;
}

.bigSize {
	font-size: 30px;
}

.grey {
	color: #aaaaaa;
}

