.cd-btn {
	display: inline-block;
	padding: 1.4em 1.6em;
	margin-bottom: 2em;
	border-radius: 50em;
	background-color: #283040;
	color: #ffffff;
	font-weight: bold;
	font-size: 1.3rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.no-touch .cd-btn:hover {
	background-color: #323c50;
}
.cd-about .cd-btn {
	background-color: #4089a6;
}
/* -------------------------------- 

Main Components 

-------------------------------- */
body::after, body::before {
	/* these are the 2 half blocks which cover the content once the animation is triggered */
	content: '';
	height: 50vh;
	width: 100%;
	position: fixed;
	left: 0;
	background-color: #000;
	z-index: 1;
	/* Force Hardware Acceleration */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition: -webkit-transform 0.4s 0.4s;
	-moz-transition: -moz-transform 0.4s 0.4s;
	transition: transform 0.4s 0.4s;
	z-index:999999999;
}
body::before {
	top: 0;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
}
body::after {
	bottom: 0;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-ms-transform: translateY(100%);
	-o-transform: translateY(100%);
	transform: translateY(100%);
}
body.page-is-changing::after, body.page-is-changing::before {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: -webkit-transform 0.4s 0s;
	-moz-transition: -moz-transform 0.4s 0s;
	transition: transform 0.4s 0s;
}
main {
	height: 100vh;
	padding: 0;/*10px*/
	text-align: center;
}
main .cd-main-content {
	position: relative;
	/*height: calc(100vh - 20px);*/
}
main .cd-main-content > div {
	/*height: 100%;*/
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
}

main .cd-main-content::before {
	top: 0;
}
main .cd-main-content::after {
	bottom: 0;
}

@media only screen and (min-width: 768px) {
	main {
		padding: 0;/*20px*/
	}
/*	main .cd-main-content {
		height: calc(100vh - 40px);
	}*/
	main.cd-index > div {
		padding-top: 200px;
	}
	main.cd-index > div {
		padding-top: 50px;
	}
}
.cd-cover-layer {
	/* layer that covers the content when the animation is triggered */
	position: fixed;
	left: 50%;
	top: 50%;
	bottom: auto;
	right: auto;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	height: calc(100% - 20px);
	width: calc(100% - 20px);
	opacity: 0;
	visibility: hidden;
	background-color: #4089a6;
	-webkit-transition: opacity 0.4s 0.4s, visibility 0s 0.8s;
	-moz-transition: opacity 0.4s 0.4s, visibility 0s 0.8s;
	transition: opacity 0.4s 0.4s, visibility 0s 0.8s;
}
.cd-about .cd-cover-layer {
	background-color: #283040;
}
.page-is-changing .cd-cover-layer {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
	-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
	transition: opacity 0.3s 0s, visibility 0s 0s;
	z-index:1;
}
@media only screen and (min-width: 768px) {
	.cd-cover-layer {
		height: calc(100% - 40px);
		width: calc(100% - 40px);
	}
}
.cd-loading-bar {
	/* this is the loding bar - visible while switching from one page to the following one */
	position: fixed;
	z-index: 1000000000;
	left: 50%;
	top: 50%;
	height: 2px;
	width: 90%;
	background-color: #4089a6;
	visibility: hidden;
	-webkit-transition: visibility 0s 0.4s, -webkit-transform 0.4s 0s ease-in;
	-moz-transition: visibility 0s 0.4s, -moz-transform 0.4s 0s ease-in;
	transition: visibility 0s 0.4s, transform 0.4s 0s ease-in;
	/* Force Hardware Acceleration */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
.cd-about .cd-loading-bar {
	background-color: #283040;
}
.cd-about .cd-loading-bar::before {
	background-color: #4089a6;
}
.cd-loading-bar::before {
	/* this is the progress bar inside the loading bar */
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: #283040;
	/* Force Hardware Acceleration */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transform: scaleX(0);
	-moz-transform: scaleX(0);
	-ms-transform: scaleX(0);
	-o-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-ms-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}
.page-is-changing .cd-loading-bar {
	visibility: visible;
	-webkit-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
	-moz-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
	-ms-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
	-o-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
	transform: translateX(-50%) translateY(-50%) scaleX(0.3);
	-webkit-transition: visibility 0s 0.3s, -webkit-transform 0.4s 0.4s;
	-moz-transition: visibility 0s 0.3s, -moz-transform 0.4s 0.4s;
	transition: visibility 0s 0.3s, transform 0.4s 0.4s;
}
.page-is-changing .cd-loading-bar::before {
	-webkit-transform: scaleX(1);
	-moz-transform: scaleX(1);
	-ms-transform: scaleX(1);
	-o-transform: scaleX(1);
	transform: scaleX(1);
	-webkit-transition: -webkit-transform 0.8s 0.8s ease-in;
	-moz-transition: -moz-transform 0.8s 0.8s ease-in;
	transition: transform 0.8s 0.8s ease-in;
}
@media only screen and (min-width: 768px) {
	.cd-loading-bar {
		width: calc(100% - 40px);
	}
}
























@keyframes roll {
	form {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.shuiqiu {
	width: 8rem;
	height: 8rem;
	border-radius: 50%;
	border: 0.319rem solid #55A4F2;
	position: relative;
	display:inline-block;
}
.shuiqiu .s1,.shuiqiu .s2{ position:absolute; left:0; right:0; z-index:1}
.shuiqiu .s1{ top:0;}
.shuiqiu .s2{ top:2.5rem}
.shuiqiucontent {
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	overflow: hidden;
	margin: .2rem;
	border-radius: 50%;
}
.shui {
	position: absolute;
	width: 20rem;
	height: 20rem;
	top: 3rem;
	left: 50%;
	margin-left: -10rem;
}
.shuiqiu:hover .shui1 {
	animation: roll 5s linear infinite;
}
.shuiqiu:hover .shui2 {
	animation: roll 7s linear infinite;
}
.shuiqiu:hover .shui3 {
	animation: roll 6s linear infinite;
}
.shuiqiu:hover .shui4 {
	animation: roll 10s linear infinite;
}
.shuiqiu:hover .shui5 {
	animation: roll 8s linear infinite;
}
.shuiqiu:hover .shui6 {
	animation: roll 9.5s linear infinite;
}
.shui1 {
	border-radius: 45%;
	background: rgba(24,144,255,.5);
	animation: roll 10s linear infinite;
}
.shui2 {
	border-radius: 46%;
	background: rgba(24,144,255,.5);
	animation: roll 14s linear infinite;
}
.shui3 {
	border-radius: 47%;
	background: rgba(24,144,255,.5);
	animation: roll 12s linear infinite;
}
.shui4 {
	border-radius: 48%;
	background: rgba(24,144,255,.5);
	animation: roll 20s linear infinite;
}
.shui5 {
	border-radius: 49%;
	background: rgba(24,144,255,.5);
	animation: roll 16s linear infinite;
}
.shui6 {
	border-radius: 50%;
	background: rgba(24,144,255,.5);
	animation: roll 19s linear infinite;
}





.bgPlay{
	background-size:cover;
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	/* 设置动画，animation:动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放; */
	-webkit-animation:play 3s linear infinite;
	-moz-animation:play 3s linear infinite;
	animation:play 3s linear infinite;
}
@-webkit-keyframes play{
	0% {
		/*水平翻转
		-webkit-transform:rotateY(0deg);
		垂直翻转
		-webkit-transform:rotateX(0deg);
		顺时针旋转*/
		-webkit-transform:rotate(0deg);
		/*逆时针旋转
		-webkit-transform:rotate(0deg);
		*/
	}
	100% {
		/* 水平翻转 
		-webkit-transform:rotateY(360deg);
		 垂直翻转
		-webkit-transform:rotateX(360deg);
		顺时针旋转*/
		-webkit-transform:rotate(360deg);
		/*逆时针旋转
		-webkit-transform:rotate(-360deg);
		*/
	}
}
@-moz-keyframes play{
	0% {
		/*-moz-transform:rotateY(0deg);
		-moz-transform:rotateX(0deg);
		-moz-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
		*/-moz-transform:rotate(0deg);
	}
	100% {
		/*-moz-transform:rotateY(360deg);
		-moz-transform:rotateX(360deg);
		-moz-transform:rotate(360deg);
		-moz-transform:rotate(-360deg);
		*/-moz-transform:rotate(360deg);
	}
}
@keyframes play{
	0% {
		/*transform:rotateY(0deg);
		transform:rotateX(0deg);
		transform:rotate(0deg);
		transform:rotate(0deg);
		*/transform:rotate(0deg);
	}
	100% {
		/*transform:rotateY(360deg);
		transform:rotateX(360deg);
		transform:rotate(360deg);
		transform:rotate(-360deg);
		*/transform:rotate(360deg);
	}
}


.am-table>tbody>tr>th, .am-table>tfoot>tr>th, .am-table>thead>tr>th{ color:#fff}
.am-table-striped>tbody>tr>td, .am-table-striped>tbody>tr>td{background-color: rgba(80,158,234,0.5);}
.am-table-striped>tbody>tr:nth-child(odd)>td, .am-table-striped>tbody>tr:nth-child(odd)>th { background-color: rgba(80,158,234,0.25);}
.am-table>tbody>tr>td, .am-table>tbody>tr>th, .am-table>tfoot>tr>td, .am-table>tfoot>tr>th, .am-table>thead>tr>td, .am-table>thead>tr>th{border-top:0; line-height:1.2rem}
.am-table-hover>tbody>tr:hover>td, .am-table-hover>tbody>tr:hover>th {background-color: #64646400;}





.dpbarchart{
    background: linear-gradient(#333, dimgray);
    /* 并排放置两个带边框的框 */
    box-sizing: border-box;
    font-family: sans-serif;
    color: white;
    /* 单个字符间间距 */
    letter-spacing: 0.1em;
    /* 添加阴影  水平位置 垂直位置 模糊距离 颜色 */
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.dpbarchart .skill{
    height: 1rem;
}
.dpbarchart .skill span{
    display: block;
}
.dpbarchart .skill .level{
    text-align: right;
    position: relative;
	
	height:100%;
}
/* 用伪元素画出条形图 */
.dpbarchart .skill .level::before,
.dpbarchart .skill .level>.bar{
    content: ' ';
    /*width: 100%;*/
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
	display:block;
	width:100%;
	border-radius: 5rem;
}
.dpbarchart .skill .level::before{
    /*border: 1px solid mediumspringgreen;*/
	background-color: #363637;
}
.dpbarchart .skill .level>.bar{
    background-image: linear-gradient(to right,#67b6ff,#1890ff);
    background-repeat: no-repeat;
    background-position: left;
}
/* 设置条形图的填充比例 */
.dpbarchart .html .level::after {
    background-size: 90% 100%;
}


  
/* 使用属性选择器来根据 data-percent 动态改变背景大小 */  
/*[data-percent]::after {  
    background-size: calc(attr(data-percent) 1%) 1em; 
}*/
:root {  
    /*--progress: 10%;*/
}  
.skill .level>.bar {  
    /*width: var(--progress);*/
	background-size: 1rem 100%; 
}