@charset "UTF-8";


/*------------------------------------------------------------------------------
----------------------------------media-all-------------------------------------
------------------------------------------------------------------------------*/
html, body, header,footer,main,h1, h2, h3, p, ul, li,section,div,figure{
  margin:0;
  padding:0;
  border:0;
  box-sizing:border-box;
}
body {font-size: 130%;font-family: "micro Yahei", Verdana, sans-serif;}
main,
footer {margin:0.5em 0 0;}
section {width: 100%; min-height: 200px;}
article {width: 300px;}
ul,li {list-style-type: none;}
p {font-size: 0.9em;}
a {text-decoration: none;color: #aaa;}
img {width:100%;}
.center {margin: 1em auto;}
.grey {background-color: #ddd;}

/** header **/
header{
  width:100%;
  height: auto;

  background: url(../img/header-layout.png) no-repeat top left;
}
h1 {color:#fff;float: left; margin:5% 10%;font-size: 2em;}
nav {float: right;margin:5%;}

/** ul.ly-0 **/
.ly-0>li {float: left;margin-right: 0.5em;width:90px;}
.li-0 {position:relative;}
.ly-0>li a:hover {border-bottom: 2px #aaa solid;}
.ly-0>li ul {display:none;font-size: 20px;line-height:1.5em;}
.ly-0>li:hover ul {display:block;}
.ly-1 {position:absolute;top:1.2em;}
.ly-1 li{width:120px;}
.ly-1 a{font-size: 0.8em;}

/** div.portrait **/
.portrait{
  opacity:0;
  visibility: hidden;
  position: absolute;
  left:50%;
  transform:translate(-50%,-20%);
  width:332px;
  z-index:3;
  box-shadow:2px 2px 6px rgba(0,0,0,0.5);
  border-radius:5px;
  transition: 0.4s;
}
.portrait figcaption{
  color:white;
  position: absolute;
  top:6.8em;
  left:0.5em;
}
.port-title {padding:0.6em;}
.port-title h3 {border-bottom: 1px solid grey;}
.lay-out{
  opacity:0;
  visibility: hidden;
  position:fixed;
  width:inherit;
  height:100%;
  top:0;
  left:0;
  bottom: 0;
  right:0;
  background: rgba(0,0,0,0.5);
  z-index:2;
  transition: 0.8s;
}
.show{
  visibility: visible;
  opacity: 1;
}
.portrait.show{transform: translate(-50%,-10%);}

/** main **/
main {z-index:1;}
main li {float:left;}
main section {}

/** section.slide **/
.slide {
  width:450px;
  height:300px;
  overflow: hidden;
  float:left;
  margin: 2.5% 0 0 5%;
}
.slide-img {width:1350px;position: relative;}
.slide-content {float:left;margin:20px 20px 20px 5%;}
.slide-content p:before{content: "->"}
.dot-img {
  position: relative;
  bottom: 50px;
  left:25%;
  width: 150px;
  height: 30px;
}
.dot-img li{
  margin-left: 1em;
  width:26px;
  height: 26px;
  background: url(../img/slide-dot.png) no-repeat top left;
  cursor: pointer;
}
.dot-img li:first-child{
  background-position: top right;
}

/** section.skills **/
.skills {}
.skill-list {
  margin: 0em auto;

  width:750px;
  } /** @media max-width(320px) **/
.skill-list li {
  margin: 2%;
  padding:1%;
  width:320px;
  border-radius: 10px;
  box-shadow: 0px 1px 5px 1px rgba(125,125,125,0.3);
}
.skill-list a {
  display: block;
  height:100px;
  width:100px;
  margin:0 auto;
  background: url(../img/FE.png) no-repeat top left;
}
.skill-list .JS {background-position: 0 -100px;}
.skill-list .HTML {background-position: bottom left;}
.skill-list .CSS:hover {background-position: top right;}
.skill-list .JS:hover {background-position: -100px -100px;}
.skill-list .HTML:hover {background-position: bottom right;}

/** section.grey.group **/
.grey.group article,
.grey.group figure {float:left;margin-left: 11%;}
figure p {
  visibility: hidden;
  height: 100%;
  opacity: 0;
  transition: 0.4s;
  position: relative;
  color: white;
  background: #000;
  bottom: 1.5em;
}
figure a:hover {z-index: 1;}
figure a:hover + p {
  visibility: visible;
  opacity: 0.5;
  z-index: 2;
}
/** footer **/

footer {
  background:rgba(0,0,0,0.9);
  color:white;
  width: 100%;
}
footer section{
  width: 50%;
  float: left;
}
footer .ftr-contact{
  float:right;
  margin: 5% 40% 5% 1%;
  width:120px;
}
.ftr-contact li{
  margin: 5% 1%;
  width: 200px;
}
.ftr-contact span{
  display: block;
  float: left;
  background: url(../img/fico.png) top left no-repeat;
  width: 20px;
  height: 20px;
}
span.sec{
  background-position:0 -21px;
}
span.third{
  background-position: 0 -43px;
}
span.last{
  background-position: 0 -65px;
}
.clear{
  clear: both;
  background: #000;
  height: 25px;
}
/** clear-fixed for all-floated elements **/
.group:before,
.group:after {content: "";display: block;}
.group:after {clear: both;}
.group {zoom:1;}

/*------------------------------------------------------------------------------
--------------------media-screen and (max-width:320 450px 769px)--------------------------
------------------------------------------------------------------------------*/

@media screen and (max-width:857px){
  header{padding-top:20px; }
  h1,nav{float:none;margin:0% auto 2%;width:320px;}
  .slide,.slide-content{margin:2% auto; float: none;}
  .grey.group article{margin:2% 30%;}
  footer .ftr-contact{
    float: none;
  }
}

@media screen and (max-width:450px){
  body{font-size: 110%;}
  .grey.group article{margin-left: 1%;}
  .skill-list {margin: 0em auto;width:auto;width:320px;}
  .skill-list li{margin:1%;}
  .slide-content{margin:2% 5%; float: none;}
}
@media screen and (max-width:320px){
  .grey.group article{margin-left: 1%;}
}