/* --------------------------------

Primary style

-------------------------------- */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{text-align:left;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font:14px/24px '\5FAE\8F6F\96C5\9ED1',"Microsoft YaHei","微软雅黑","STHeiti","WenQuanYi Micro Hei","Arial","Hiragino Sans GB","Arial","Hiragino Sans GB",SimSun,sans-serif;-webkit-font-smoothing:antialiased;color:#3f484f}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,textarea,p,th,td{margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}table,fieldset,img,a img{border:0}ul,ol,li,dl,dd,dt{list-style:none outside none}table{border-collapse:collapse;border-spacing:0}em,strong,th{font-style:normal;font-weight:normal}b,strong{font-weight:600}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}img{width:auto\9;height:auto;max-width:100%;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}input,select,form img,button{vertical-align:middle}iframe{overflow:hidden}small{font-size:80%}svg:not(:root){overflow:hidden}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}img{vertical-align:middle}a,a:link,a:visited{text-decoration:none;color:#3f484f}a:hover{text-decoration:none;color:#6dabde}a,a:focus{outline:0}.fl{float:left;display:inline}.fr{float:right;display:inline}.cg_fl{float:left;display:inline}.cg_fr{float:right;display:inline}.disno{display:none}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}* html .clearfix{zoom:1}*:first-child+html .clearfix{zoom:1}.fix:after{clear:both;content:".";display:block;height:0;visibility:hidden}.blank,.blank5,.blank1,.blank10,.blank20,.blank30{clear:both;display:block;font-size:1px;visibility:hidden;height:-1px;line-height:0}.blank5{height:5px}.blank10{height:10px}.blank20{height:20px}.blank30{height:30px}.blank1{height:1px}.c_red,.c_red a,a.c_red:link,a.c_red:visited{color:#bd0500!important}a.c_red:hover,.c_red a:hover{color:#bd0500!important}.disno{display:none}





*, *::after, *::before {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;

  color: #ffffff;
  background-color: #262423;
}

a {
  color: #a8ae7e;
  text-decoration: none;
}

/* --------------------------------

Patterns - reusable parts of our design

-------------------------------- */
.cd-text-replace {
  /* replace text with image */
  color: transparent;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/* cover */
.cover{ position: fixed; z-index: 5; width: 100%; overflow: hidden; height: 100vh; }
.cover img{width:100%;}
.cover.wap,.primary-navcon.wap{background: url('../img/wapbg.jpg') center top no-repeat;background-size: cover;}
.cover.pc,.primary-navcon.pc,body{background: url('../img/pcbg.jpg') center top no-repeat;background-size: 100% 100vh;}
.moves{transform: translateY(40vh); width:100%;height:220px;}


/* .logo{width:40%;margin:10vh auto 0;opacity: 0;} */
/* .logo img{width: 100%;} */
/* .canvases {
height: 100vh;
overflow: hidden;
} */
.xingkongbg{display:block;}
.radius{border-radius: 50%;border:1px solid rgba(235, 207, 108, 0.55)}
.maintitle{width:300px;margin:0px auto;height:266px;position:relative ;z-index: 6;}

.person{position: relative;margin:5vh auto 0px;width:300px;height:266px;transform:scale(1.2);
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -o-transform:scale(0);
    -ms-transform:scale(0);
    transition:All 1s ease-in-out;
    -webkit-transition:All 1s ease-in-out;
    -moz-transition:All 1s ease-in-out;
    -o-transition:All 1s ease-in-out;}
.person.on{transform:scale(1);
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);}
.personflip{width:100%;position: absolute;top: 2px;left: 3px;perspective: 1000px;z-index: 5;}
.personflip_con,.personflip_f,.personflip_b{width:220px;height: 220px;}
.personflip_con{position: relative;margin:30px auto 0px;ms-transition: 1000ms 1166.43ms;transition: 1000ms 1166.43ms;
  transform-style: preserve-3d;ms-transform: rotateY(-180deg);transform: rotateY(-180deg);}
.on .personflip_con{ms-transform: rotateY(0deg);transform: rotateY(0deg);}
.personflip_f,.personflip_b{position: absolute;left:-2px;top:2px;backface-visibility: hidden;overflow: hidden;}
.personflip_f{left:2px;}
.personflip_f{z-index: 2;ms-transform: rotateY(-180deg);transform: rotateY(-180deg);}
.personflip_b{ms-transform: rotateY(0deg);transform: rotateY(0deg);opacity: 0;}
.on .personflip_b{opacity:1;}
.personflip_b img{width: 100%;}

.cover .name{width:80%;margin:5vh auto 0px;color:#ebcf6c;transform: translateX(-200%);ms-transition:All 1s ease-in-out;transition:All 1s ease-in-out;}
.cover .name.on{ms-transform: translateX(0%);transform: translateX(0%);}
.cover .username{ font-size: 18px; font-weight: 600; line-height: 40px; }
.cover .userinfo{ padding: 10px; line-height: 18px; border: 1px solid #ebcf6c; font-size: 14px; width: 100%; }
.logback { width: 180px; margin: 0 auto 3vh; }
.primary-navcon{width:100%;height:100vh;position:relative ;overflow: hidden;}
.copyright{width:280px;    top: 40vh;left: 0;width: 100%;}
.copyrightcon{position: absolute;top:35vh;left:50%;width:280px;margin-left: -140px;}
.copyright img,.logback img{width:100%;}
.copyright { font-size: 14px; line-height: 24px; color: #ebcf6c; margin: 0 auto; }
.copyright span{padding:0px 5px;}
.copyrightpic{margin-top: 10px}
.cd-project-info h3 { font-size: 2rem; color: #000; padding: 10px; line-height: 2; background: #f3f0e8;margin: 50px 0 10px 0; }
.cd-project-info .blod{ font-size: 1.7rem; font-weight: 600; padding: 5px 5px; background: rgb(255, 255, 255); line-height: 2; /* border: 1px solid; */
    border-radius: 50%; margin-right: 5px;  }

    .cd-project-info p .blod{margin-left:-2em;}
/* --------------------------------

Menu trigger

-------------------------------- */
.cd-nav-trigger {
  position: absolute;
  display: none;
  z-index: 4;
  top: 10px;
  right: 5%;
  height: 52px;
  width: 52px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}
.cd-nav-trigger .cd-icon,
.cd-nav-trigger .cd-icon::before,
.cd-nav-trigger .cd-icon::after {
  /* menu icon created in CSS */
  position: absolute;
  background-color: #ffffff;
  border-radius: 2px;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.no-touch .cd-nav-trigger:hover {
  background-color: black;
}
.cd-nav-trigger .cd-icon {
  /* middle line of the menu icon */
  display: inline-block;
  width: 18px;
  height: 2px;
  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%);
  -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
  -moz-transition: -moz-transform 0.3s, background-color 0.3s;
  transition: transform 0.3s, background-color 0.3s;
}
.cd-nav-trigger .cd-icon::before, .cd-nav-trigger .cd-icon::after {
  /* upper and lower lines of the menu icon */
  content: '';
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
.cd-nav-trigger .cd-icon::before {
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  -o-transform: translateY(-6px);
  transform: translateY(-6px);
}
.cd-nav-trigger .cd-icon::after {
  -webkit-transform: translateY(6px);
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -o-transform: translateY(6px);
  transform: translateY(6px);
}
.cd-nav-trigger.project-open .cd-icon {
  /* user selects a projects - transform the icon into a 'X' */
  background-color: rgba(255, 255, 255, 0);
}
.cd-nav-trigger.project-open .cd-icon::before, .cd-nav-trigger.project-open .cd-icon::after {
  background-color: white;
}
.cd-nav-trigger.project-open .cd-icon::before {
  -webkit-transform: translateY(0) rotate(45deg);
  -moz-transform: translateY(0) rotate(45deg);
  -ms-transform: translateY(0) rotate(45deg);
  -o-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}
.cd-nav-trigger.project-open .cd-icon::after {
  -webkit-transform: translateY(0) rotate(-45deg);
  -moz-transform: translateY(0) rotate(-45deg);
  -ms-transform: translateY(0) rotate(-45deg);
  -o-transform: translateY(0) rotate(-45deg);
  transform: translateY(0) rotate(-45deg);
}
.cd-nav-trigger.nav-visible .cd-icon {
  /* user opens the navigation - transform the icon into an arrow */
  -webkit-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -o-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}
.cd-nav-trigger.nav-visible .cd-icon::after {
  -webkit-transform: translateX(5px) translateY(3px) rotate(-45deg) scaleX(0.5);
  -moz-transform: translateX(5px) translateY(3px) rotate(-45deg) scaleX(0.5);
  -ms-transform: translateX(5px) translateY(3px) rotate(-45deg) scaleX(0.5);
  -o-transform: translateX(5px) translateY(3px) rotate(-45deg) scaleX(0.5);
  transform: translateX(5px) translateY(3px) rotate(-45deg) scaleX(0.5);
}
.cd-nav-trigger.nav-visible .cd-icon::before {
  -webkit-transform: translateX(5px) translateY(-3px) rotate(45deg) scaleX(0.5);
  -moz-transform: translateX(5px) translateY(-3px) rotate(45deg) scaleX(0.5);
  -ms-transform: translateX(5px) translateY(-3px) rotate(45deg) scaleX(0.5);
  -o-transform: translateX(5px) translateY(-3px) rotate(45deg) scaleX(0.5);
  transform: translateX(5px) translateY(-3px) rotate(45deg) scaleX(0.5);
}
@media only screen and (min-width: 1024px) {
  .cd-nav-trigger.nav-visible .cd-icon {
    -webkit-transform: translateY(-50%) translateX(-50%) rotate(-90deg);
    -moz-transform: translateY(-50%) translateX(-50%) rotate(-90deg);
    -ms-transform: translateY(-50%) translateX(-50%) rotate(-90deg);
    -o-transform: translateY(-50%) translateX(-50%) rotate(-90deg);
    transform: translateY(-50%) translateX(-50%) rotate(-90deg);
  }
  .cd-nav-trigger.nav-visible .cd-icon::after {
    -webkit-transform: translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5);
    -moz-transform: translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5);
    -ms-transform: translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5);
    -o-transform: translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5);
    transform: translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5);
  }
  .cd-nav-trigger.nav-visible .cd-icon::before {
    -webkit-transform: translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5);
    -moz-transform: translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5);
    -ms-transform: translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5);
    -o-transform: translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5);
    transform: translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5);
  }
}

/* --------------------------------

Projects

-------------------------------- */
.cd-projects-container {
  display: none;
  position: relative;
  z-index: 2;
  overflow-x: hidden;
}
.cd-projects-container.project-open {
  /* smooth scroll on iOS devices */
  -webkit-overflow-scrolling: touch;
}

.cd-projects-previews {
  position: relative;
  z-index: 2;
  height: 100vh;
  width: 100vw;
}
.cd-projects-previews::after {
  clear: both;
  content: "";
  display: table;
}
.project-open .cd-projects-previews {
  pointer-events: none;
}
.cd-projects-previews li {
  height: 25%;
  width: 100%;
  overflow: hidden;
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
  /* Force Hardware Acceleration */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(1px);
  -moz-transform: translateZ(1px);
  -ms-transform: translateZ(1px);
  -o-transform: translateZ(1px);
  transform: translateZ(1px);
}
.cd-projects-previews li.selected {
  opacity: 0;
  /* move selected project preview out of the viewport with no transition */
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0s;
  -moz-transition: -moz-transform 0s;
  transition: transform 0s;
}
.cd-projects-previews li.slide-out {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}
.cd-projects-previews a {
  display: block;
  height: 100vh;
  width: 100%;
  /* fixes a bug on projects caption width */
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  -o-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.cd-projects-previews li:nth-of-type(2) a {
  -webkit-transform: translateY(-25%);
  -moz-transform: translateY(-25%);
  -ms-transform: translateY(-25%);
  -o-transform: translateY(-25%);
  transform: translateY(-25%);
}
.cd-projects-previews li:nth-of-type(3) a {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.cd-projects-previews li:nth-of-type(4) a {
  -webkit-transform: translateY(-75%);
  -moz-transform: translateY(-75%);
  -ms-transform: translateY(-75%);
  -o-transform: translateY(-75%);
  transform: translateY(-75%);
}
.cd-projects-previews .bg-loaded a {
  opacity: 1;
}
@media only screen and (min-width: 1024px) {

  .cd-projects-previews li {
    display: inline-block;
    height: 100%;
    width: 25%;
    float: left;
  }
  .cd-projects-previews li.selected {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  .cd-projects-previews li.slide-out {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  .cd-projects-previews a {
    /* width equal to window width */
    width: 400%;
  }
  .cd-projects-previews li:nth-of-type(2) a {
    -webkit-transform: translateX(-25%);
    -moz-transform: translateX(-25%);
    -ms-transform: translateX(-25%);
    -o-transform: translateX(-25%);
    transform: translateX(-25%);
  }
  .cd-projects-previews li:nth-of-type(3) a {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .cd-projects-previews li:nth-of-type(4) a {
    -webkit-transform: translateX(-75%);
    -moz-transform: translateX(-75%);
    -ms-transform: translateX(-75%);
    -o-transform: translateX(-75%);
    transform: translateX(-75%);
  }
}

.cd-projects {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}
.cd-projects > li {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.cd-projects > li.selected {
  z-index: 1;
  opacity: 1;
  -webkit-transition: opacity 0s;
  -moz-transition: opacity 0s;
  transition: opacity 0s;
}
.cd-projects .preview-image {
  display: block;
  height: 100vh;
}



.cd-project-title {
  position: absolute;
  width: 100%;
  top: calc(50% - 20px);
  left: 0;
  color: #ffffff;
  -webkit-transform: translateY(-37.5vh);
  -moz-transform: translateY(-37.5vh);
  -ms-transform: translateY(-37.5vh);
  -o-transform: translateY(-37.5vh);
  transform: translateY(-37.5vh);
  -webkit-transition: -webkit-transform 0.6s 0.2s;
  -moz-transition: -moz-transform 0.6s 0.2s;
  transition: transform 0.6s 0.2s;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cd-project-title::after {
  /* line below project title */
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 50%;
  height: 1px;
  background: #ffffff;
  -webkit-transform: translateX(-50%) scale(0);
  -moz-transform: translateX(-50%) scale(0);
  -ms-transform: translateX(-50%) scale(0);
  -o-transform: translateX(-50%) scale(0);
  transform: translateX(-50%) scale(0);
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
.no-touch .cd-projects-previews a:hover .cd-project-title::after {
  -webkit-transform: translateX(-50%) scale(1);
  -moz-transform: translateX(-50%) scale(1);
  -ms-transform: translateX(-50%) scale(1);
  -o-transform: translateX(-50%) scale(1);
  transform: translateX(-50%) scale(1);
}
.cd-projects .cd-project-title::after {
  -webkit-transform: translateX(-50%) scale(1);
  -moz-transform: translateX(-50%) scale(1);
  -ms-transform: translateX(-50%) scale(1);
  -o-transform: translateX(-50%) scale(1);
  transform: translateX(-50%) scale(1);
  -webkit-transition: -webkit-transform 0.3s 0.3s;
  -moz-transition: -moz-transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s;
}
.cd-project-title h2 {
      font-size: 2.0rem;
    line-height: 1.5;
    font-weight: lighter;
    margin: 0 20px;
}
.cd-project-title p {
  font-size: 1.4rem;
  font-family: "Merriweather", serif;
  font-style: italic;
  line-height: 1.2;
  padding: .4em 2em;
  opacity: .8;
}
@media only screen and (min-width: 1024px) {
  .cd-project-title {
    width: 25%;
    top: 50vh;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}

.cd-projects-previews li:nth-of-type(2) .cd-project-title,
.cd-projects > li:nth-of-type(2) .cd-project-title {
  -webkit-transform: translateY(-12.5vh);
  -moz-transform: translateY(-12.5vh);
  -ms-transform: translateY(-12.5vh);
  -o-transform: translateY(-12.5vh);
  transform: translateY(-12.5vh);
}
@media only screen and (min-width: 1024px) {
  .cd-projects-previews li:nth-of-type(2) .cd-project-title,
  .cd-projects > li:nth-of-type(2) .cd-project-title {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
}

.cd-projects-previews li:nth-of-type(3) .cd-project-title,
.cd-projects > li:nth-of-type(3) .cd-project-title {
  -webkit-transform: translateY(12.5vh);
  -moz-transform: translateY(12.5vh);
  -ms-transform: translateY(12.5vh);
  -o-transform: translateY(12.5vh);
  transform: translateY(12.5vh);
}
@media only screen and (min-width: 1024px) {
  .cd-projects-previews li:nth-of-type(3) .cd-project-title,
  .cd-projects > li:nth-of-type(3) .cd-project-title {
    -webkit-transform: translateX(200%);
    -moz-transform: translateX(200%);
    -ms-transform: translateX(200%);
    -o-transform: translateX(200%);
    transform: translateX(200%);
  }
}

.cd-projects-previews li:nth-of-type(4) a .cd-project-title,
.cd-projects > li:nth-of-type(4) .cd-project-title {
  -webkit-transform: translateY(37.5vh);
  -moz-transform: translateY(37.5vh);
  -ms-transform: translateY(37.5vh);
  -o-transform: translateY(37.5vh);
  transform: translateY(37.5vh);
}
@media only screen and (min-width: 1024px) {
  .cd-projects-previews li:nth-of-type(4) a .cd-project-title,
  .cd-projects > li:nth-of-type(4) .cd-project-title {
    -webkit-transform: translateX(300%);
    -moz-transform: translateX(300%);
    -ms-transform: translateX(300%);
    -o-transform: translateX(300%);
    transform: translateX(300%);
  }
}

li.selected .cd-project-title,
.cd-projects > li:nth-of-type(2).selected .cd-project-title,
.cd-projects > li:nth-of-type(3).selected .cd-project-title,
.cd-projects > li:nth-of-type(4).selected .cd-project-title {
  -webkit-transform: translateY(-30vh);
  -moz-transform: translateY(-30vh);
  -ms-transform: translateY(-30vh);
  -o-transform: translateY(-30vh);
  transform: translateY(-30vh);
}
@media only screen and (min-width: 1024px) {
  li.selected .cd-project-title,
  .cd-projects > li:nth-of-type(2).selected .cd-project-title,
  .cd-projects > li:nth-of-type(3).selected .cd-project-title,
  .cd-projects > li:nth-of-type(4).selected .cd-project-title {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}

.cd-projects li.selected .cd-project-title::after {
  -webkit-transition: -webkit-transform 0.3s 0s;
  -moz-transition: -moz-transform 0.3s 0s;
  transition: transform 0.3s 0s;
  -webkit-transform: translateX(-50%) scale(0);
  -moz-transform: translateX(-50%) scale(0);
  -ms-transform: translateX(-50%) scale(0);
  -o-transform: translateX(-50%) scale(0);
  transform: translateX(-50%) scale(0);

  -webkit-transform: translateY(-50%) scale(0);
  -moz-transform: translateY(-50%) scale(0);
  -ms-transform: translateY(-50%) scale(0);
  -o-transform: translateY(-50%) scale(0);
  transform: translateY(-50%) scale(0);
}

.touch .cd-projects li.selected .cd-project-title::after {
  -webkit-transition: -webkit-transform 0s;
  -moz-transition: -moz-transform 0s;
  transition: transform 0s;
}

.cd-project-info {
  display: none;
  padding: 1em 0 4em;
  background-color: #ffffff;
  color: #7d7c7b;
}
.content-visible .cd-project-info {
  display: block;
}
.cd-project-info p {
  width: 90%;
  max-width: 800px;
  margin: 0 auto 10px;
  line-height: 2;
  text-indent: 2em;
}

.cd-projects-container .scroll {
  display: block;
  position: absolute;
  z-index: 2;
  bottom: 30px;
  left: 50%;
  width: 44px;
  height: 44px;
  /* rest button default style */
  cursor: pointer;
  border: none;
  background: url("../img/cd-icon-arrow.png") no-repeat center center;
  visibility: hidden;
  -webkit-transform: translateX(-50%) scale(0);
  -moz-transform: translateX(-50%) scale(0);
  -ms-transform: translateX(-50%) scale(0);
  -o-transform: translateX(-50%) scale(0);
  transform: translateX(-50%) scale(0);
  -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s;
  transition: transform 0.3s 0s, visibility 0s 0.3s;
}
.cd-projects-container .scroll:focus {
  outline: none;
}

.cd-projects-container.project-open .scroll {
  visibility: visible;
  -webkit-transform: translateX(-50%) scale(1);
  -moz-transform: translateX(-50%) scale(1);
  -ms-transform: translateX(-50%) scale(1);
  -o-transform: translateX(-50%) scale(1);
  transform: translateX(-50%) scale(1);
  -webkit-transition: -webkit-transform 0.4s 0s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.4s 0s, visibility 0s 0s;
  transition: transform 0.4s 0s, visibility 0s 0s;
  -webkit-animation: cd-translate 1.2s 0.8s;
  -moz-animation: cd-translate 1.2s 0.8s;
  animation: cd-translate 1.2s 0.8s;
  -webkit-animation-iteration-count: 2;
  -moz-animation-iteration-count: 2;
  animation-iteration-count: 2;
}

.no-touch .cd-projects-container.project-open .scroll:hover {
  -webkit-transform: translateX(-50%) scale(1.2);
  -moz-transform: translateX(-50%) scale(1.2);
  -ms-transform: translateX(-50%) scale(1.2);
  -o-transform: translateX(-50%) scale(1.2);
  transform: translateX(-50%) scale(1.2);
}

@-webkit-keyframes cd-translate {
  0% {
    -webkit-transform: translateX(-50%) scale(1);
  }
  50% {
    -webkit-transform: translateY(10px) translateX(-50%) scale(1);
  }
  100% {
    -webkit-transform: translateX(-50%) scale(1);
  }
}
@-moz-keyframes cd-translate {
  0% {
    -moz-transform: translateX(-50%) scale(1);
  }
  50% {
    -moz-transform: translateY(10px) translateX(-50%) scale(1);
  }
  100% {
    -moz-transform: translateX(-50%) scale(1);
  }
}
@keyframes cd-translate {
  0% {
    -webkit-transform: translateX(-50%) scale(1);
    -moz-transform: translateX(-50%) scale(1);
    -ms-transform: translateX(-50%) scale(1);
    -o-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
  }
  50% {
    -webkit-transform: translateY(10px) translateX(-50%) scale(1);
    -moz-transform: translateY(10px) translateX(-50%) scale(1);
    -ms-transform: translateY(10px) translateX(-50%) scale(1);
    -o-transform: translateY(10px) translateX(-50%) scale(1);
    transform: translateY(10px) translateX(-50%) scale(1);
  }
  100% {
    -webkit-transform: translateX(-50%) scale(1);
    -moz-transform: translateX(-50%) scale(1);
    -ms-transform: translateX(-50%) scale(1);
    -o-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
  }
}
/* --------------------------------

 Navigation

-------------------------------- */
.cd-primary-nav {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  text-align: center;
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  transition: opacity 0.6s;
  /* vertically align its content */
  display: table;
}
.cd-primary-nav ul {
  /* vertically align inside nav */
  display: table-cell;
  vertical-align: middle;
}
.cd-primary-nav a {
  display: inline-block;
  padding: .4em 1em;
  border-radius: 4px;
  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
  color: #ffffff;
  font-family: "Merriweather", serif;
  font-size: 2.4rem;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.no-touch .cd-primary-nav a:hover {
  background-color: #a8ae7e;
}
.cd-primary-nav .cd-label {
  position: relative;
  margin: 2.4em 0 2em;
  color: #a8ae7e;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 1px;
}
.cd-primary-nav .cd-label::after {
  /* line below .cd-label*/
  content: '';
  position: absolute;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -16px;
  height: 1px;
  width: 40px;
  background-color: currentColor;
}
.cd-primary-nav.nav-visible {
  opacity: 1;
}
.cd-primary-nav.nav-clickable {
  z-index: 3;
}
.no-csstransitions .cd-primary-nav.nav-visible {
  z-index: 3;
}
@media only screen and (min-width: 1170px) {

  .cd-primary-nav a {
    font-size: 4rem;
  }
}

/* --------------------------------

JavaScript Disabled

-------------------------------- */
.no-js .cd-primary-nav {
  display: block;
  position: static;
  opacity: 1;
  margin-bottom: 1.5em;
}
.no-js .cd-primary-nav ul {
  display: block;
  padding: 0 5%;
}
.no-js .cd-primary-nav ul::after {
  clear: both;
  content: "";
  display: table;
}
.no-js .cd-primary-nav li:not(.cd-label) {
  display: inline-block;
}


.maintitbgwap{ position: absolute; left: 0px; top: 11vh; width: 77%; }
.personconwap{position: absolute; right: 5%; bottom:24vh;width:83%; }
.personconwap .wapwarp{position: relative;}
.personwap{width: 75%;margin-top:50px;}
.logowap{width:40%;position: absolute; right: 10%; top:20px;}
.maintit1wap{position: absolute;left:0px;bottom:0px;width:70%;}
.maintit2wap{position: absolute;right:0px;bottom:60px;width:60%;}
.persontitwap{position: absolute;right: -15px;top: 66px;width: 53%;font-size: 12px;line-height: 22px;text-shadow: 2px 2px 3px #d2ba96;color:#d8a113;}
.persontitwap h4{font-size: 16px;line-height: 24px;}
.maininfo{width:80%;position: absolute;bottom:3vh;left:10%;text-align: left;line-height:16px;font-size: 10px;color:#7f5e24;}
.maininfo span{font-weight:600;}



.contentperson{-webkit-transform:translateX(-2000px);-moz-transform:translateX(-2000px)}
.maintit2wap{-webkit-transform:translateX(2000px);-moz-transform:translateX(2000px)}
.persontitwap{-webkit-transform:translateY(-2000px)；-moz-transform:translateY(-2000px)}
.maintitbgwap{opacity: 0;}
/* .maininfo{display:none;} */

.contentpersonpc{-webkit-transform:translateX(-2000px);-moz-transform:translateX(-2000px)}
.maintit2pc{-webkit-transform:translateX(2000px);-moz-transform:translateX(2000px)}
.persontitpc{-webkit-transform:translateY(-2000px)；-moz-transform:translateY(-2000px)}
.maintitbgpc{opacity: 0;}
/* .maininfopc{display:none;} */

.fadeInLeft{
-webkit-animation:fadeInLeftBig 1s .2s ease both;
-moz-animation:fadeInLeftBig 1s .2s ease both;}

.fadeInRight{
-webkit-animation:fadeInRightBig 2s .2s ease both;
-moz-animation:fadeInRightBig 2s .2s ease both;}

.fadeInDown{
-webkit-animation:fadeInDownBig 2s .2s ease both;
-moz-animation:fadeInDownBig 2s .2s ease both;}

.flash{
-webkit-animation:flash 2s .2s ease both;
-moz-animation:flash 2s .2s ease both;}

@-webkit-keyframes fadeInLeftBig{
0%{opacity:0;
-webkit-transform:translateX(-2000px)}
100%{opacity:1;
-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInLeftBig{
0%{opacity:0;
-moz-transform:translateX(-2000px)}
100%{opacity:1;
-moz-transform:translateX(0)}
}

@-webkit-keyframes fadeInRightBig{
0%{opacity:0;
-webkit-transform:translateX(2000px)}
100%{opacity:1;
-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInRightBig{
0%{opacity:0;
-moz-transform:translateX(2000px)}
100%{opacity:1;
-moz-transform:translateX(0)}
}


@-webkit-keyframes fadeInDownBig{
0%{opacity:0;
-webkit-transform:translateY(-2000px)}
100%{opacity:1;
-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInDownBig{
0%{opacity:0;
-moz-transform:translateY(-2000px)}
100%{opacity:1;
-moz-transform:translateY(0)}
}

.flash{
-webkit-animation:flash 1s .2s ease both;
-moz-animation:flash 1s .2s ease both;}
@-webkit-keyframes flash{
0%{opacity: 1;}
25%{opacity: 0;}
50%{opacity: 1;}
75%{opacity: 0;}
100%{opacity: 1;}
}
@-moz-keyframes flash{
0%{opacity: 1;}
25%{opacity: 0;}
50%{opacity: 1;}
75%{opacity: 0;}
100%{opacity: 1;}
}

.areas{width:800px;height:100vh;margin:0 auto;position: relative;}

.logopc{width:250px;position: absolute; top:80px;left:0px;}
.maintitbgpc{width: 800px;position: absolute;top:176px;left:-286px;}
.personconpc{width:755px;position: absolute;top:155px;left:0px;}
.personpc{width:375px;}
.persontitpc{position: absolute;right:0px;top: 160px;width: 43%;font-size: 18px;line-height: 30px;text-shadow: 2px 2px 3px #d2ba96;color:#d8a113;}
.persontitpc h4{font-size: 30px;line-height:50px;}
.maintit1pc{width:335px;position: absolute;left:0px;top:552px;}
.maintit2pc{width:330px;position: absolute;right:0px;top:256px;}
.maininfopc{width:480px;position: absolute;right:0px;top:680px;text-align:right;font-size:12px;color:#7f5e24;}
.maininfopc span{font-weight: 600;}
.picintext{width:280px;margin:10px auto;box-shadow: 1px 2px 6px #ccc;}
.picintext img{width:280px;padding:5px;background: #fff;border:1px solid #f3f0e8;display: block;}

@media only screen and (min-width: 800px) {
  .picintext{width:500px;}
  .picintext img{width:500px;}
  .copyrightcon{width:400px;left:50%;margin-left:-200px;}
  .moves.video_1-dimensions,.moves {width: 900px;height:560px;border-bottom: 4px solid #ebcf6c;margin:0 auto;box-shadow: 4px 1px 6px #000;transform: translateY(32vh);}
  .videos{width: 900px;height: 100vh;margin: 0 auto;overflow: hidden;}
  .cd-project-title.on {width: 700px;top: 22vh;left: 50%;margin-left: -350px;}
  .cd-project-title.on h2{font-size: 36px;line-height: 55px;text-shadow: 2px 3px 5px #000;}

  /* .logo{width:25%;} */

  .person,.maintitle{width:400px;height:366px;}
  .person{margin:10vh auto 10vh;}
  .personflip_con,.personflip_f,.personflip_b{width:300px;height: 300px;}
  .personflip_con{margin:40px auto 0;}
  .cd-project-info h3{width: 90%;max-width: 800px;margin: 0 auto;}
  .personflip{top:0px;left: 4px;}
}