@charset "utf-8";
/* header */
#hd .gnb li a {
    color:#333;
}
.logo {
    background: url(./images/logo_g.png);
    background-repeat: no-repeat;
    background-position: 85%;
}
/* visual */
#vs {
    width:100%;
    position:relative;
}
#vs ul {
    width:100%;
    height:55%;
    position:relative;
    overflow: hidden;
}
#vs li {
    width:100%;
    float:left;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:25;
}
#vs li .img {
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    animation:vsImg 10s ease-in-out;
    -webkit-animation:vsImg 12s ease-in-out;
    -moz-animation:vsImg 10s ease-in-out;
    height:100%;
/*
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
*/
}

#vs .img img {
    position:absolute;
    /* top:-9999px; */
    /* bottom:-9999px; */
    /* right:-9999px; */
    /* left:-9999px; */
    margin:auto;
    min-width:100%;
    max-height: 100%;
}
@keyframes vsImg {
	0% { transform:scale(1.1); }
	100% { transform:scale(1); }
}
@-webkit-keyframes vsImg {
	0% { -webkit-transform:scale(1.1); }
	100% { -webkit-transform:scale(1); }
}
@-moz-keyframes vsImg {
	0% { -moz-transform:scale(1.1); }
	100% { -moz-transform:scale(1); }
}
#vs .vtTit {
    color:#333;
}
#vs .tit {
    background:none;
    color:#003399;
    height:auto;
    padding-top: 5.5%;
    padding-bottom: 3.5%;
}
#vs .table {
    position:relative;
}
#vs .work {
    margin:0 auto;
    text-align:center
}
tr {
    height:40px;
}
td {
    width: 10%;
}
#vs .cir {
    width:10px;
    height:10px;
    border-radius:10px;
    border:3px solid #003399;
    margin:0 auto;
    background: #fff;
}
#vs .work .date {
    font-size:1.2rem;
    font-weight:500;
}
#vs .work .wCom {
    font-size:0.85rem;
} 
#vs .line {
    width: 68%;
    height:3px;
    background: #003399;
    margin: 0 auto;
    margin-top: 20px;
}

/* skill */
#skill .tit {
    background:#fff;
    color:#003399;
    height:auto;
    padding: 10px;
    padding-top: 7%;
}
#canvas {
    height: 330px;
}
#canvas .pro {
    margin:0 10%;
    width:auto;
    height:120px;
    margin-top:1.5%;
}
#canvas .pro li {
    width:16.5%;
    height:100%;
    float:left;
}
#canvas .pro .pro1 {
    background:url("./images/pro1.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size: 60%;
}
#canvas .pro .pro2 {
    background:url("./images/pro2.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size: 60%;
}
#canvas .pro .pro3 {
    background:url("./images/pro3.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size: 50%;
}
#canvas .pro .pro4 {
    background:url("./images/pro4.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size: 50%;
}
#canvas .pro .pro5 {
    background:url("./images/pro5.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size: 50%;
}
#canvas .pro .pro6 {
    background:url("./images/pro6.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size: 50%;
}
.flex-wrapper {
    display:flex;
    flex-flow:row nowrap;
    margin: 0 10%;
}
.single-chart {
  width: 16.5%;
  justify-content: space-around;
}

.circular-chart {
  display:block;
  margin:10px auto;
  max-width:80%;
  max-height: 160px;
}

.circle-bg {
  fill:none;
  stroke:#eee;
  stroke-width: 2.8px;
}

.circle {
    fill:none;
    stroke-width: 2.8;
    /* stroke-linecap: round; */
}
.circle.on {
    animation:progress 1.5s ease-out forwards;
}
@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart.pro1 .circle {
  stroke: #e44f26;
}
.circular-chart.pro2 .circle {
  stroke: #e7a328;
}
.circular-chart.pro3 .circle {
  stroke: #382e86;
}
.circular-chart.pro4 .circle {
  stroke: #815f29;
}
.circular-chart.pro5 .circle {
  stroke: #7c2d5b;
}
.circular-chart.pro6 .circle {
  stroke: #6d407d;
}
.percentage {
  fill:#555;
  font-size:0.4rem;
  text-anchor:middle;
}
#skill .tit.ph {
    color:#fff;
    padding-top:3%;
    background:#003399;
}
#skill .phArea {
    background:#003399;
    width:100%;
    height:50%;
}
#skill .phArea .po,#skill .phArea .ho {
    width:50%;
    height:50%;
    position:relative;
    float:left;
}
#skill .phArea .position {
    background:url(./images/position.png);
    background-size:60%;
    background-repeat:no-repeat;
    background-position:center;
    width:100%;
    height:300px;
    transition:.7s;
}
#skill .phArea .position:hover {
    background-size:65%;
}
#skill .phArea .po span {
    position:absolute;
    top:calc(calc(100% - 10px) / 2);
    left:calc(calc(100% - 273px) /2);
    color:#fff;
    font-size:2rem;
    font-weight:900;
    text-shadow:1px 1px 1px #333;
}
#skill .phArea .ho .hobby {
    float:left;
    width:100%;
    height:300px;
    padding:14% 10%;
    box-sizing:border-box;
}
#skill .phArea .ho .hobby li {
    width:33.3%;
    float:left;
    color:#fff;
    font-size:1rem;
    text-align:center;
    padding:5%;
    box-sizing:border-box;
    font-weight:300;
    transition:.7s;
}
#skill .phArea .ho .hobby .fas {
    font-size:5rem;
    color:#fff;
    margin:10%;
    transition:.7s;
}
#skill .phArea .ho .hobby .fas:hover {
    transform:rotateY(180deg);
}