@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;400;600;700&display=swap');

@font-face {
  font-family: 'PingFang';
  src: url('/zh/font/PingFang-SC-Light.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'PingFang';
  src: url('/zh/font/PingFang-SC-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'PingFang';
  src: url('/zh/font/PingFang-SC-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Inter', 'PingFang', 'Sans-Serif';
  font-weight:400;
  overflow-x:hidden;
}

h1{
  font-weight: 600;
}

h6{
  color: #999;
}

main{
  opacity:0;
  animation: revealOp 500ms 200ms ease-out forwards;
}

.reduce-txt{
  font-size:11pt !important;
  transition: 300ms ease-out;
}

.reduce-logo{
  height:36px !important;
  transition: 300ms ease-out;
}

.reduce-bar{
  height:50px !important;
  transition: 500ms ease-out;
}

.navbar-toggler{
  padding: 8px 12px;
  border: none;
}

.navbar-toggler:focus{
  outline:none;
  background-color:#eee;
}

.navbar-brand img{
  height:50px;

}

.navbar{
  height:76px;
  transition: 500ms ease-out;
}

#navbarNav{
  transition: 300ms ease-out;
}

@media (max-width:960px){
  .navbar{
    height:auto;
    transition: 500ms ease-out;
  }

  #navbarNav{
    background-color:#fff;
    padding-bottom:20px;
    border-radius:0px 0px 6px 6px;
    transition: 300ms ease-out;
  }
}

.nav-item a{
  font-weight:400;
  transition: 250ms ease-out;
}

.nav-item a:hover{
  transition: 250ms ease-out;
}

/*LANDING*/

.landing{
  margin:0;
  overflow:hidden;
  margin-top:76px;
  margin-bottom:60px;
  height:92vh;
}

#cir1 {
	position: absolute;
  border: solid 2px #111;
  pointer-events:none;
	width: 20px;
	height: 20px;
  transform:translate(-50%,-50%);
  opacity:0;
  border-radius: 35%;
  transition: opacity 800ms ease-out;
}
#cir2 {
	position: absolute;
  background-color:#111;
  pointer-events:none;
	width: 8px;
  height: 8px;
  opacity:0;
  transform:translate(-50%,-50%);
  border-radius: 35%;
  transition: opacity 300ms ease-out;
}

.landing{
  cursor:none;
}

.landing:hover #cir1{
  opacity:1;
}

.landing:hover #cir2{
  opacity:1;
}

.landing .main-title{
  color:#111;
  user-select:none;
  margin:auto 0 auto 5rem;
  padding-bottom:120px;
  transition: 300ms ease-out;
}

.landing .main-title h1{
  opacity:0;
  max-width:600px;
  font-size:64pt;
  font-weight: 600;
  animation: revealTr 500ms 300ms ease-out forwards;
}

#underlined1{
  text-decoration: underline;
  text-decoration-color: #ff8c00;
}

#underlined2{
  text-decoration: underline;
  text-decoration-color:#00bfff;
}

#underlined3{
  text-decoration: underline;
  text-decoration-color: #06D6A0;
}

@-moz-document url-prefix() {
  #underlined1{
    text-decoration-thickness: 4px;
  }
  
  #underlined2{
    text-decoration-thickness: 4px;
  }
  
  #underlined3{
    text-decoration-thickness: 4px;
  }
}

.cursor-select{
  background-color:#111;
}

#tip3{
  position: absolute;
  pointer-events: none;
  padding:1em 1.8em 0.5em 1.8em;
  background-color:#fff;
  box-shadow:0px 8px 21px #00fa7026;
  display:none;
  animation: revealOp 250ms ease-out;
}

#tip2{
  position: absolute;
  pointer-events: none;
  padding:1em 1.8em 0.5em 1.8em;
  background-color:#fff;
  box-shadow:0px 8px 21px #00b3fa26;
  display:none;
  animation: revealOp 250ms ease-out;
}

#tip1{
  position: absolute;
  pointer-events: none;
  padding:1em 1.8em 0.5em 1.8em;
  background-color:#fff;
  box-shadow:0px 8px 21px #faab0035;
  display:none;
  animation: revealOp 250ms ease-out;
}

.tooltip-title{
  font-size: 18pt;
  font-weight: 600;
}
.sub-tip{
  font-size: 14pt;
  font-weight: 400;
}

.landing .main-title p{
  opacity:0;
  font-size:32pt;
  font-weight: 400;
  animation: revealTr 500ms 900ms ease-out forwards;
}

.landing .main-title #zh{
  width: 1060px;
}

@media (max-width:960px){
  .landing .main-title #zh{
    width: auto;
  }

  .landing{
    margin-top:20px;
    height:72vh;
  }
  .landing .col-12 h1{
    font-size:42pt;
  }
  .landing .col-12 p{
    font-size:16pt;
  }
  .landing .main-title{
    margin:25vh 16px;
  }
  .landing .main-title h1{
    font-size:36pt;
  }
  .landing .main-title p{
    font-size:21pt;
  }
}

.main{
  margin-top:60px;
}

.pr-thumb {
  padding:0;
  margin-bottom:5px;
  display:none;
}

@media(max-width:768px) {
  .pr-thumb {
    padding:0;
    display:none;
  }
}

.pr-sub{
  display:none;
  font-size:14pt;
  width:100%;
  text-align: center;
}

.pr-hover:hover .pr-hover-title{
  transform:translateY(0px);
  opacity:1;
  color: #fff;
  transition: 300ms ease-out;
  margin: auto auto;
}

.pr-hover .pr-hover-title{
  text-align:center;
  transform:translateY(15px);
  opacity:0;
  color: #fff;
  margin: auto auto;
  transition: 300ms ease-out;
}

.pr-hover-title sd{
  font-size:26pt;
  margin-bottom:0.2em;
  font-weight:600;
  display:block;
}

.pr-hover-title st{
  text-transform: uppercase;
  font-size:14pt;
  font-weight:400;
}

.pr-hover{
  position:absolute;
  width:100%;
  height:100%;
  background-color:rgb(0,0,0,0);
  display: flex;
  text-decoration: none;
  color:#111;
  justify-content:flex-start;
  align-items:flex-end;
  transition: 200ms ease-out;
}
.pr-hover:hover{
  text-decoration: none;
  color:#111;
  background-color:rgb(0,0,0,1);
  transition: 200ms ease-out;
}

@media(max-width:768px) {
  .pr-hover {
    background-color: none;
  }
}



.more span{
  font-size:18pt;
}

.more{
  text-decoration:none;
  color:#111;
}

.more:hover{
  text-decoration:none;
  color:#111;
}

.more svg g rect{
  fill: #fff !important;
  stroke: #111;
  stroke-width: 10;
  transform:scale(1);
  transform-origin: center;
  transition:300ms ease-out;
}

.more:hover svg g rect{
  fill:#111 !important;
  transform:scale(0.8);
  transform-origin: center;
  transition:300ms ease-out;
}

.more svg g g line{
  stroke:#111 !important;
  stroke-width:6;
  transition:300ms ease-out;
}

.more:hover svg g g line{
  stroke:#fff !important;
  transition:300ms ease-out;
}

.less svg g rect{
  fill: #fff !important;
  stroke: #111;
  stroke-width: 10;
  transform:scale(1);
  transform-origin: center;
  transition:300ms ease-out;
}

.less:hover svg g rect{
  fill:#111 !important;
  transform:scale(0.8);
  transform-origin: center;
  transition:300ms ease-out;
}

.less svg g g line{
  stroke:#111 !important;
  stroke-width:6;
  transition:300ms ease-out;
}

.less:hover svg g g line{
  stroke:#fff !important;
  transition:300ms ease-out;
}

.less span{
  font-size:18pt;
}

.less{
  text-decoration:none;
  color:#111;
}

.less:hover{
  text-decoration:none;
  color:#111;
}

#projects{
  transform:translateY(-100px);
}

#pr-main1{
  order:-6;
  display:inline-grid;
}

#pr-main2{
  order:-5;
  display:inline-grid;
}

#pr-main3{
  order:-4;
  display:inline-grid;
}

#pr-main4{
  order:-3;
  display:inline-grid;
}

#pr-main5{
  order:-2;
  display:inline-grid;
}

#pr-main6{
  order:-1;
  display:inline-grid;
}

#pr-main7{
  order:0;
  display:inline-grid;
}

#pr-main8{
  order:0;
  display:inline-grid;
}

.pr-more{
  order:1;
  margin:30px auto;
  display:inline-grid;
  cursor:pointer;
}

.show-more{
  display:inline-grid !important;
}

.order-end{
  order:99;
}

/*ABOUT*/

.about{
  margin-top:120px;
  display: flex;
  flex-direction: column;
}

.about-wrap{
  display:flex;
  justify-content:center;
}

.about-title {
  text-align:center;
  display:flex;
  justify-content: center;
}

.about-nav {
  display: grid;
  width:50%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 3rem;
  gap: 4rem;
  text-align: center;
  white-space: nowrap;
}

@media(max-width: 768px){
  .about-nav {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
    }
}

.about-nav span {
  opacity: 0.5;
  text-align:center;
  cursor: pointer;
  user-select:none;
}

.about-nav span:hover {
  opacity:1;
  transition: 300ms ease-out;
}

.selected-section {
  opacity: 1 !important;
  font-weight: 700;
}

.about-me{
  display:none;
}

.gallery-wrap{
  display:none;
  justify-content:center;
  width:100%;
  height:100%;
}

.about-gallery {
  display:flex;
  flex-wrap: wrap;
  gap:8px;
  width:100%;
  justify-content:center;
}

.picture-frame{
  object-fit: cover;
  width:314px;
  height:400px;
  background-color:#ccc;
}

.picture-frame-landscape{
  object-fit: cover;
  width:314px;
  height:246px;
  background-color:#ccc;
  align-self:center;
}

.picture-frame-fix{
  height:185px;
}

.about-travel-diary{
  display:none;
  width:80%;
}

.article-container{
  display:flex;
  flex-direction: column;
  gap:1rem;
  width:100%;
}

.article{
  display:grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  align-items:center;
  column-gap:24px;
  padding-bottom:16px;
  border-bottom:1px solid #eee;
}

.article:hover {
  text-decoration: none;
}

.article img{
  object-fit: cover;
  display: grid;
  grid-column: 1 / 2;
  grid-row: 1 / span 3;
  width:120px;
  height:120px;
  background-color:#ccc;
}

.article .date{
  color: #999;
  margin-bottom:0;
}
.article h3 {
  font-weight:700;
  font-size:16pt;
  margin-bottom:0;
}

.article .description{
  width:100%;
  margin-bottom:0;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.show-section{
  display: flex;
}

.resume ul li{
  color: #111;
  margin:20px 0;
  font-size:14pt;
}
.resume ul span{
  color: black;
}

.profile-pic{
  text-align:center;
}

.resume h1{
  margin-bottom:25px;
}

.resume p{
  font-size:14pt;
}

.interactive-intro{
  display:flex;
  flex-direction: column;
  width:100%;
  margin-top: 40px;
}

.cv-btn{
  margin:25px auto;
  width:180px;
}

.portrait-container{
  overflow:hidden;
}

.rui-portrait{
  transform: scale(1);
  transition: 500ms ease-out;
}

.rui-portrait:hover{
  transform: scale(1.2);
  transition: 500ms ease-out;
}

/*PROJECT PAGE*/

.cover-img{
  margin-top:76px;
}

.black-bg{
  position:absolute;
  z-index:-999;
  left:-50%;
  width:150%;
  height:100%;
  margin: 0 auto;
  background-color:black;
}

.btn{
  background-color:#111;
  border:none;
  padding:8px 15px;
  border-radius: 6px;
  color:#fff !important;
  box-shadow: 0px 1px 3px rgba(136, 136, 136, 0.3);
  text-decoration:none !important;
  transition:200ms ease-out;
}

.btn:hover{
  background-color:#222;
  box-shadow: 0px 5px 8px rgba(136, 136, 136, 0.3);
  transition:200ms ease-out;
  color:#fff;
  text-decoration:none;
}

.btn:active{
  background-color:#888;
  box-shadow: 0px 3px 8px rgba(136, 136, 136, 0.3);
}

.proj-main a{
  color:black;
  text-decoration: underline;
  text-decoration-color: #111;
  transition: 150ms ease-out;
}
.proj-main a:hover{
  color:#888;
  text-decoration: underline;
  text-decoration-color: #111;
  transition: 150ms ease-out;
}

.proj-cover .col-12{
    padding:0;
}

.proj-title{
  margin:90px auto;
  margin-bottom:30px;
}

.quick-nav{
  max-width: 750px;
  margin: 0 auto;
  margin-top:120px;
}

.quick-nav .row{
  margin-top:20px !important;
  max-width:900px !important;
}

.quick-nav h5{
  font-size:1rem;
  color: #999;
}

.quick-nav a{
  box-shadow: 0px 1.5px 0px #272727;
  text-align:center;
  font-weight: 400;
  color: #272727;
  font-size:1rem;
  margin: 5px 16px;
  margin-left:0;
  transition:250ms ease-out;
  text-decoration:none !important;
}

.proj2-nav a{
  margin: 5px 10px;
  margin-left:0;
}

.quick-nav span{
  color:#999;
  margin:0px 8px;
}

.quick-nav .row:hover >*:hover{
  box-shadow: 0px 3px 0px #272727;
  color: #272727;
  text-decoration: none;
  transition:250ms ease-out;
}

.quick-nav .row:hover > *{
  box-shadow: 0px 0px 0px #111;
  text-decoration: none;
  color: #ccc;
}


@media(max-width: 768px){
  .proj-title{
    margin:120px auto;
  }
}

.proj-desc .col-12{
  margin-bottom:20px;
}

.proj-desc .col-12 h6{
  text-transform: uppercase;
  color: #999;
}

.proj-desc .col{
  border-left: 2px solid #ddd;
}

.proj-cover h6{
  font-size:9pt;
  text-align:center;
}

.proj-cover {
  max-width:1440px;
}

.proj-cover img{
  margin-top:76px;
}

.proj-main{
  font-size:14pt;
}

.proj-main .row{
  max-width:1366px;
  margin-left:auto;
  margin-right:auto;
  margin-top:40px;
}

.proj-main .row h1{
  font-size: 28pt;
  font-weight: 600;
  margin: 0 80px;
}

.proj-main .row img{
  margin: 2em 0;
}
@media(max-width: 768px){
  .main .row img{
    margin: 1em 0;
  }
}

.design-goal{
  position:relative;
  width:100%;
}

.black-bg{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
}

.txt{
  max-width:750px;
  margin:0 auto;
}

.txt p{
  padding-top:15px;
}

ul{
  list-style-type: square;
}

.arrow-top{
  height:40px;
  width:40px;
  position:fixed;
  right:20px;
  bottom:20px;
  padding:3px;
  border: 1.5px solid #111;
  transition: 300ms ease-out;
}

.next-proj{
  height:40px;
  width:160px;
  margin: 0 auto;
  margin-top:50px;
  display: flex;
  justify-content: center;
  bottom:20px;
  padding:3px;
  border: 1.5px solid #111;
  transition: 300ms ease-out;
}

.next-proj:hover{
  background-color: #111;
  border: 1.5px solid #111;
  transition: 300ms ease-out;
}

.next-proj:hover .next-proj-text {
  color:#fff;
}

.next-proj:hover .next-proj-arrow .st0 {
  stroke:#fff;
}

.next-proj-text{
  line-height: 1.8em;
  color: #111;
}

.next-proj-link:hover{
  text-decoration: none;
}

.next-proj-arrow{
  height:100%;
  width:40px;
  padding:3px;
  transform: rotate(90deg)translateY(0px);
  transition: 300ms ease-out;
}

.next-proj:hover .next-proj-arrow {
  transform: rotate(90deg)translateY(0px)translateY(-5px);
  transition: 300ms ease-out;
}

.chapter-anchor{
  transform:translateY(180px);
}

.proj2-body #chapter3 {
  transform:translateY(-180px);
}

.proj2-body #chapter4 {
  transform:translateY(-180px);
}

.interactive-prototype{
  display: flex;
  flex-direction: column;
  width:100%;
  margin-top:120px;
}

.interactive-prototype h3{
  font-weight:600;
}

.interactive-prototype h4{
  font-weight:600;
}

.interactive-prototype iframe{
  border: none;
}

.miro-link{
  margin-left:82px;
  font-size:1.8rem;
}

@media(max-width:768px) {
  .miro-link{
    margin-left:24px;
  font-size:1rem;
  }
}

/*ARROW TOP*/

.arrow-top:hover{
  height:70px;
  background-color:#111;
  transition: 300ms ease-out;
}

.arrow-top:hover .st0{
  stroke:#fff;
  transition: 400ms ease-out;
}

@media(min-width:768px) {
  footer{
    height:120px;
    width:100%;
  }
}

footer{
  margin-top:40px;
}

footer p{
  padding:40px 0;
}
@media(min-width:1000px) {
  .video-custom-padding {
    padding:0 15%;
  }
}

/*ANCHORS*/
div.anchor{
  display: block;
    position: relative;
    top: 50px;
    visibility: hidden;
}

.opacity0{
  transform:translate(-50%,-45%) !important;
  opacity:0;
}

/* KEYFRAMES */

@keyframes revealTr{
  0%{
    transform:translateY(20px);
    opacity:0;
  }
  100%{
    transform:translateY(0px);
    opacity:1;
  }
}

@keyframes revealOp{
  0%{opacity:0;}
  100%{opacity:1;}
}

p, h1, h3, h5, span {
  color:#272727;
}