@import url("//fonts.googleapis.com/css?family=Roboto");
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-family:Arial, "sans-serif", "微軟正黑體";
}
body {
  background-color: #000;
}
a {
  text-decoration: none;
  color: #292929;
}
header {
  width: 100%;
  height: 30px;
  line-height: 30px;
  position: fixed;
  top: 0;
  background-color: #5f5f5f;
  color: #fff;
  z-index: 999;
  overflow: hidden;
 /* text-shadow: 1px 1px 1px rgba(0,0,0,0.7);*/
  /*box-shadow: 0px -10px 20px rgba(115,205,247,0.5) inset;*/
}
.content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 30px;
  margin: 0;
  padding: 0;
  /*background-color: #5a7138;*/
  /*background: #269361;
background: -moz-linear-gradient(-45deg, #269361 0%, #29be7a 100%);
background: -webkit-linear-gradient(-45deg, #269361 0%,#29be7a 100%);
background: linear-gradient(135deg, #269361 0%,#29be7a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#269361', endColorstr='#29be7a',GradientType=1 );*/
}
.wrapper{
  width: 60%;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  z-index: 1;
  background:url("../images/kihon_p.jpg") bottom 100px right no-repeat;
  background-size: 400px 400px;	
}
.at {
	width: 49px;
	height: 63px;
	position: absolute;
	bottom: 63px;
	opacity: 0.3;
	left: 50%;
    transform: translateX(-50%);
	background:url(../a.gif) no-repeat;
	background-size: 30px 39px;
	transform: rotateZ(180deg);
}
/*.views_news {
	float: right !important;
	position: absolute !important;
	right:30px !important;
	top:-18px !important;
}*/
#skills {
  /*background-color: #385471;*/
	background: #fff;
  /*background: #385471;
background: -moz-linear-gradient(-45deg, #385471 0%, #488ace 100%);
background: -webkit-linear-gradient(-45deg, #385471 0%,#488ace 100%);
background: linear-gradient(135deg, #385471 0%,#488ace 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#385471', endColorstr='#488ace',GradientType=1 );*/
}
#education {
  /*background-color: #713838;*/background: #fff;
  /*background: #8f3636;
background: -moz-linear-gradient(-45deg, #8f3636 0%, #b93232 100%);
background: -webkit-linear-gradient(-45deg, #8f3636 0%,#b93232 100%);
background: linear-gradient(135deg, #8f3636 0%,#b93232 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8f3636', endColorstr='#b93232',GradientType=1 );*/
}
#skills,
#education {
  width: 60%;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  position: absolute;
  color: #fff;
  margin: 0 auto;
  top: 100%;
}
#skills h1,
#education h1 {
  color: #292929;
  font-size: 1.5em;
  padding: 20px 0px 20px 20px;
  font-weight: normal;
}
#skills h1 p,
#education h1 p {
  padding: 0 10px;
  display: inline-block;
}
#employment {
  /*background-color: #716238;*/
	background: #fff;
  /*background: #91762b;
background: -moz-linear-gradient(-45deg, #91762b 0%, #b0891e 100%);
background: -webkit-linear-gradient(-45deg, #91762b 0%,#b0891e 100%);
background: linear-gradient(135deg, #91762b 0%,#b0891e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91762b', endColorstr='#b0891e',GradientType=1 );*/
}
#interests {
  /*background-color: #386e71;*/
	background: #fff;
  /*background: #21757a;
background: -moz-linear-gradient(-45deg, #21757a 0%, #28959b 100%);
background: -webkit-linear-gradient(-45deg, #21757a 0%,#28959b 100%);
background: linear-gradient(135deg, #21757a 0%,#28959b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#21757a', endColorstr='#28959b',GradientType=1 );*/
}
#employment {
  width: 60%;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  position: absolute;
  top: 100%;
}
#interests {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 100%;	
  z-index: 2;
}
.center {
  width: 70%;
  margin: 0 auto;
}
#employment h1,
#interests h1 {
  color: #292929;
  font-size: 1.5em;
  padding: 20px 0px 20px 20px;
  font-weight: normal;
}
#employment h1 p,
#interests h1 p {
  padding: 0 10px;
  display: inline-block;
}
.name {
  padding: 0 30px;
  font-size: 16px;
  float: left;
}
.cv {
  padding: 20px 0px 20px 30px;
  font-size: 1.5em;
  color:#292929;	
}
.info {
  margin: 10px 20px 10px 30px;
  color: #797979;
}
.home,
.myname,
.email,
.birthday,
.website,
.myinterest,
.star {
  display: inline-block;
  margin: 5px;
  text-align: left;
 /* color: inherit;*/
 color: #797979;
}
.home a,
.myname a,
.email a,
.birthday a,
.website a,
.myinterest a,
.star a {
  /*color: inherit;*/
  color: #797979;
}
.scroll {
  font-size: 1.5em;
  opacity: 0.75;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
  filter: alpha(opacity=75);
  position: fixed;
  width: 200px;
  bottom: 20px;
  left: 50%;
  margin-left: -50px;
}
.skilllist {
  width: 75%;
  max-width: 500px;
  margin: 20px 50px;
}
.skill {
  width: 0;
  margin: 5px;
  background-color: #797979;
}
.skill .skillname {
  padding: 5px;
  text-align: right;
  font-size: 0.8em
}
.job {
  margin: 20px 50px;
  color: #797979;
}
.job .jobt {
  font-size: 1em;
}
.job .company,
.job .dates {
  margin-top: 10px;
  font-size: 1em;
}
.qualification {
  margin: 20px 50px;
  color: #797979;
}
.qualification .qual {
  font-size: 1em;
}
.qualification .institute,
.qualification .dates {
  margin-top: 10px;
  font-size: 1em;
}
.interestlist {
  /*max-width: 750px;*/
}
.interest {
  width: 100px;
  display: block;
  color: #292929;
  text-align: center;
  border: 2px solid;
  padding: 10px;
  margin: 0 0 40px 50px;
  float: left;
}
.interest i {
  font-size: 1em;
}
.interest p {
  font-size: 1em;
}
.interest01, .interest02, .interest03, .interest04, .interest05, .interest06, .interest07, .interest08 {
  width: 100px;
  display: block;
  text-align: center;
  border: 2px solid;
  padding: 10px;
  margin: 0 0 20px 50px;
  float: left;
  background-color: #fff;
}
.interest01{
  color: red;
}
.interest02{
  color: orange;
}
.interest03{
  color: #d1b519;
}
.interest04{
  color: green;
}
.interest05{
  color: blue;
}
.interest07{
  color: #242c96;
}
.interest06{
  color: #921ca7;
}
.interest08{
  color: pink;
}
.interest01:hover, .interest02:hover, .interest03:hover, .interest04:hover, .interest05:hover, .interest06:hover, .interest07:hover, .interest08:hover {
	color: #fff;
	opacity: 0.7;
}
.interest01:hover {
	border-color: red;
	background-color: red;	
}
.interest02:hover {
	border-color: orange;
	background-color: orange;	
}
.interest03:hover {
	border-color: #d1b519;
	background-color: #d1b519;
}
.interest04:hover {
	border-color: green;
	background-color: green;	
}
.interest05:hover {
	border-color: blue;
	background-color: blue;	
}
.interest07:hover {
	border-color: #242c96;
	background-color: #242c96;	
}
.interest06:hover {
	border-color: #921ca7;
	background-color: #921ca7;	
}
.interest08:hover {
	border-color: pink;
	background-color: pink;	
}
/*---------------------------------------第一背景-----------------------------------------------*/
.bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  bottom: -160px;
  -webkit-animation: square 25s infinite;
  animation: square 25s infinite;
  transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
  left: 10%;
  background: red;
  opacity: 0.2;
}
.bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
  background: orange;
  opacity: 0.2;
}
.bg-bubbles li:nth-child(3) {
  left: 25%;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
	background: #d1b519;
  opacity: 0.3;
}
.bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  -webkit-animation-duration: 22s;
          animation-duration: 22s;
  background: green;
  opacity: 0.2;
}
.bg-bubbles li:nth-child(5) {
  left: 70%;
  background: blue;
  opacity: 0.2;
}
.bg-bubbles li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  background: red;
  opacity: 0.2;	
}
.bg-bubbles li:nth-child(7) {
  left: 32%;
  bottom:-160px;	
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  background: #7019d1;
  opacity: 0.2;	
}
.bg-bubbles li:nth-child(8)  {
  left: 55%;
  width: 20px;
  height: 20px;
  -webkit-animation-delay: 15s;
          animation-delay: 15s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
  background: pink;
  opacity: 0.2;	
}
.bg-bubbles li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
  background: #19c2d1;
  opacity: 0.2;	
}
.bg-bubbles li:nth-child(10) {
  left: 90%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 11s;
          animation-delay: 11s;
  ackground: #70500a;
  opacity: 0.2;	
}
@-webkit-keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-1200px) rotate(600deg);
            transform: translateY(-1200px) rotate(600deg);
  }
}
@keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-1200px) rotate(600deg);
            transform: translateY(-1200px) rotate(600deg);
  }
}


@media screen and (max-width: 721px) {
	.wrapper{
	  width: 60%;
	  height: 100%;
	  left: 50%;
	  transform: translateX(-50%);
	  position: absolute;
	  z-index: 1;
	  background:url("../images/kihon_p.jpg") bottom 0px right no-repeat;
	  background-size: 220px 220px;	
	}
	.at {
		width: 30px;
		height: 39px;
		position: absolute;
		bottom: 39px;
		opacity: 0.3;
		left: 20px;
		transform: translateX(0);
		background:url(../a.gif);
		background-size: 30px 39px;
		transform: rotateZ(0deg);
	}
	.wrapper{
	  width: 100%;
	  height: 100%;
	  left: 0;
	  transform: translateX(0);
	  position: absolute;
	  z-index: 1;
	}
	#skills,
	#education {
	  width: 100%;
	  left: 0;
	  transform: translateX(0);
	  height: 100%;
	  position: absolute;
	  color: #fff;
	  margin: 0 auto;
	  top: 100%;
	}
	#employment {
	  width: 100%;
	  left: 0;
	  transform: translateX(0);
	  height: 100%;
	  position: absolute;
	  top: 100%;
	}
	.center {
	  width: 100%;
	}
	
}