:root {
     color-scheme: light only;
}
* {
  margin: 0;
  padding: 0;
  text-align: center;
  white-space: nowrap;
}
html, main, div, img, g {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
@font-face {    
    font-family: 'yangjin';
    src:  url(font/yangjin_optimize.otf) format('otf'),
          url(font/yangjin_optimize.woff2) format('woff2'),
          url(font/yangjin_optimize.woff) format('woff');
    font-display: swap;
}
::selection {
    background: #cc0000;
    color: #ffffff;
}
body {
  overflow-x: hidden; 
  -webkit-backface-visibility: hidden;
  line-height: 1.6;
}
header, h1, h2, h3, h4, span, button{
    font-family: 'yangjin';
    font-weight: lighter;
}
a {
  top:8px;
}
p{
	white-space: nowrap;
	text-align: center;
}
span::before {content: '\A'; white-space: pre;}


/*header*/
header{
  width: 100vw;
  height: 50px;
  position: fixed;
  top: 0px;
  z-index: 1;
}
.nav{
  position: relative;
  display: flex;
  width: 90vw;
  min-width: 450px;
  max-width: 2200px;
  height: 100%; 
  margin: 0 auto;
}
.logo{
  position: absolute;
  top: 6px;
  width: 50px;
  height: auto;
}
.navbar{
  position: absolute; 
  fill: black;
  width: 60vw;
  height: 38px;
  left: 50%;
  transform: translateX(-50%);
}

.triangle{
  position: absolute;
  top: 21px;
  left: 17px;
  border-left   : 6px solid transparent;
  border-right  : 6px solid transparent;  
  border-bottom : 9px solid #fff;
}
.intro{
  position: absolute;
  text-decoration: none;
  color: white;
  left: 35%;
}
.gallery{
  position: absolute;
  text-decoration: none;
  color: grey;
  right: 31%;
}
.contact{
  position: absolute;
  top: 10px;
  right: 0px;
  width: 45px;
}
/*prevideo*/
section{
  position: relative;
  height: 100vh;
  background: linear-gradient(rgba(255,183,123,1) 50%, rgba(170,208,204,1) 50%);
  overflow: hidden;
}
.container{
  position: relative;
  height: 100vh;
  width: 100vw;
  top:50%;
  left: 50%;
}
/*video*/
canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/*creative artist*/
#content_02{
  position: relative;
  overflow: hidden;
  background: #abd3c9;
  height: 100vh;
  width: 100%;
}
.bg{
  position: absolute;
}
#pipe_b{
  top: 50%;
  left: 50%;  
  width: 350%;
  transform: translate(-50%, -47%);
}
#pipe_f{
  top: 50%;
  left: 50%;  
  width: 60%;
  transform: translate(-50%, -50%);
}
#pipe_c{
  top: 50%;
  left: 50%;  
  width: 200%;
  transform: translate(-50%, -24%);
}
/*vasatile adaptable capable*/
.container h1{
  position: absolute;
  white-space: nowrap;
  transform: translate(-50%, -1.5em);
  color: #fffbea;
  font-size: 7.4vw;
  letter-spacing: -0.03em;
}
.container h2{
  position: absolute;
  color: #fff2dc;
  transform: translate(-50%, -0.7em);
  font-size: 2vw;
  letter-spacing: 0.02em;
  padding: 0.8em 100vw;
}
#content_02 h4{
  position: absolute;
  color: white;
  transform: translate(-50%, -0.7em);
  font-size: 2vw;
  letter-spacing: 0.02em;
}
.wrapper{
  transform: translate(-50%, -50%);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  gap: 3%;
}
.icon{
  width: clamp(130px, 22vw, 250px);
}
.center{
  position: absolute;
  width: 100%;
  max-width: 1400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
 }
#art_01{
  position: absolute;
  height: auto;
  transform: translate(-50%, -65%);
  max-width: 1400px;
  z-index: -1;
}
#art_02{
  position: absolute;
  height: auto;
  transform: translate(-50%, -40%);
  max-width: 700px;
  z-index: -1;
}
#image-parent{
  display: flex;
  transform: translateY(154%);
  justify-content: space-between;
}
.img{
  height: 6em;
  flex: 1;
}
.img.image-end {
  width: 100px;
}
.img.image-center {
  width: 500px;
}
.img.image-stretch {
  width: 100%;
}
.flex-grow-div {
  flex-grow: 1;
}
#bold_01{
  position: absolute;
  left: 50%;
  transform: translate(-50%, -2%);
  color: white;
  font-size: 4.2em;
  z-index: 1;
}
#thin_01{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 100%);
  color: #98580d;
  font-size: clamp(1.5em, 3.5vw, 2em);
  z-index: 1;
}
/*3rd fully equipped*/
#circle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  max-width: 1100px;
  z-index: 1;
}
#masked{
  position: absolute;
  width: 80%;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  clip-path: circle();
}
#bold_02{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -67%);
  color: white;
  font-size: clamp(2.5rem, 6vw, 5.5rem);
}
#thin_02{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 70%);
  color: #3b537c;
  font-size: clamp(0.8rem, 2vw, 1.8rem);
}
#masked h4{
  font-size: clamp(0.8rem, 1.5vw, 1.5rem);
  animation: slide 200s linear infinite ;
}
@keyframes slide{
  0% {
   transform: translateX(0px);
 }
  100% {
   transform: translateX(-1000px);
  }
}
.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 35%);
  z-index: 1;
  width: 100%;
}
#box_a{
  width: 50%;
  height: auto;
  max-width: 550px;
  min-width: 280px;
}
#box_b{
  width: 42%;
  height: auto;
  max-width: 460px;
  min-width: 270px;
}
#box_c{
  width: 8%;
  height: auto;
  max-width: 100px;
  min-width: 55px;
}
#text_01{
  top: 10%;
  left: 60%;
}
#text_02{
  top: 30%;
  left: 100%;
}
#text_03{
  top: 20%;
  left: 75%;
}
#text_04{
  top: 86%;
  left: 65%;
}
#text_05{
  top: 25%;
  left: 40%;
}
#text_06{
  top: 31%;
  left: 20%;
}
#text_07{
  top: 33%;
  left: 70%;
}
#text_08{
  top: 60%;
  left: 20%;
}
#text_09{
  top: 60%;
  left: 55%;
}
#text_10{
  top: 70%;
  left: 75%;
}
#text_11{
  top: 70%;
  left: 40%;
}
#text_12{
  top: 80%;
  left: 88%;
}
#text_13{
  top: 15%;
  left: 30%;
}
#text_14{
  top: 65%;
  left: 110%;
}

#text_16{
  top: 10%;
  left: 160%;
}
#text_17{
  top: 30%;
  left: 100%;
}
#text_18{
  top: 20%;
  left: 175%;
}
#text_19{
  top: 90%;
  left: 135%;
}
#text_20{
  top: 25%;
  left: 150%;
}
#text_21{
  top: 31%;
  left: 120%;
}
#text_22{
  top: 33%;
  left: 140%;
}
#text_22{
  top: 33%;
  left: 170%;
}
#text_23{
  top: 60%;
  left: 125%;
}
#text_24{
  top: 60%;
  left: 165%;
}
#text_25{
  top: 70%;
  left: 145%;
}
#text_26{
  top: 80%;
  left: 125%;
}
#text_27{
  top: 80%;
  left: 180%;
}
#text_28{
  top: 15%;
  left: 130%;
}
#text_29{
  top: 75%;
  left: 170%;
}

/*team player*/

#arm{
  position: absolute;
  width: 270%;
  max-width: 4800px;
  top: 50%;
  left: 50%;
  transform: translate(-49.5%, -48%);
}
#halfcircle{
  position: absolute;
  width: 52%;
  max-width: 900px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -3%);
}
#bold_03{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -160%);
  color: white;
  font-size: clamp(1rem, 7vw, 8.5rem);
}
#thin_03{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -130%);
  color: #814720;
  font-size: clamp(0.1rem, 1.8vw, 2rem);
}
#harvard{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8.3vw;
  height: auto;
  max-width: 160px;
  transform: translate(-200%, 15%);
}
#csm{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8.3vw;
  height: auto;
  max-width: 160px;
  transform: translate(-200%, 130%);
}
#text_42{
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: left;
  transform: translate(-24%, -9%);
  color: #7e4219;
  font-size: clamp(0.1rem, 1.3vw, 1.5rem);
  letter-spacing: -0.03em;
}
#text_44{
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: left;
  transform: translate(-33%, 115%);
  color: #7e4219;
  font-size: clamp(0.1rem, 1.3vw, 1.5rem);
  letter-spacing: -0.03em;
}
.issued{
  bottom: -160px;
  left: 50%;
  color: #cb9e64;
  font-size: clamp(0.2rem, 1.1vw, 1.2rem);
}
#content_03{
  position: relative;
  overflow: hidden; 
  background-color: #aad0cc;
  height: 100vh;
  width: 100%;
}
#about_bg{
  position: absolute;
  width: 190%;
  top: 50%;
  left: 50%;
  transform: translate(-56%, -80%) rotate(-12deg);
}
#about{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200vw;
  max-width: 2400px;
  transform: translate(-67%, calc(-7% + 5px)) rotate(-12deg);
}
#text_46{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%) rotate(-12deg);
  text-align: left;
  color: #faf4d9;
  font-size: min(2.5vw, 1.9rem);
}
#button{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-60%, 260%) rotate(-12deg);
  background-color: #658ea6;
  border: none;
  border-radius: 5px;
  color: #f9f2d1;
  font-size: clamp(0.85rem, 3vw, 2.5rem);
  padding: 20px 80px 13px 80px;
  margin: 4px 2px;
  z-index: 1;
  cursor: pointer;
}
#arrow{
  position: absolute;
  top: 7%;
  right: 10%;
  width: clamp(800px, 150vw, 2500px);
  overflow: hidden;
  z-index: 2;
}
.nav2{
  position: relative;
  height: 100dvh; 
  text-align: center;
  margin: 0 auto;
}
.footer{
  position: absolute; 
  height: 7em;
  bottom: 0px;
  width: 100vw;
  min-width: 110em;
  left: 50%;
  transform: translate(-50%);
  z-index: 3;
}
.bottom{
  position: absolute;
  color: #825E6F;
  font-size: 0.9em;
  bottom: 3px;
  left: 50%;
  transform: translate(-50%);
  z-index: 4;
 }
#linkedin{
  position: absolute;
  bottom: 15px;
  right: 40px;
  width: 45px;
  z-index: 5;
 }


@media only screen and (max-width: 700px) {

header a{
  font-size: 0.8em;
}
.nav{
  min-width: 250px;
}

.logo{
  width: 40px;
}
.intro{
  left: 28%;
}
.gallery{
  right: 23%;
}
.triangle{
  position: absolute;
  top: 23px;
  left: 18px;
  border-left   : 6px solid transparent;
  border-right  : 6px solid transparent;  
  border-bottom : 7px solid #fff;
}
.contact{
  width: 37px;
}


canvas {
  height: auto;
  width: 180%;
}
.container h1{
  transform: translate(-50%, -1.5em);
  font-size: 11vw;
}
.container h2{
  transform: translate(-50%, -1em);
  font-size: 2.9vw;
}
#pipe_b{
  width: 350%;
}
#pipe_f{
  width: 90%;
}

.icon{
  width: clamp(90px, 25vw, 250px);
}
#art_01{
  transform: translate(-52%, -70%);
  max-width: 105vw;
}
#art_02{
  transform: translate(-50%, -45%);
  max-width: 65vw;
}
#image-parent{
  transform: translateY(175%);
}
.img{
  height: 8vw;
  flex: 1;
}
.img.image-end {
  width: 10vw;
}
.img.image-center {
  width: 40vw;
}
.img.image-stretch {
  width: 100%;
}
.flex-grow-div {
  flex-grow: 1;
}
#bold_01{
  transform: translate(-50%, calc(-35% + 3vw));
  font-size: 5vw;
}
#thin_01{
  font-size: 3.3vw;
}
#bold_02{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -67%);
  font-size: 9vw;
}
#thin_02{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 90%);
  font-size: 3vw
}
#circle{
  width: 120%;
}
#masked{
  width: 95%;
  height: 95%;
}
#masked h4{
  font-size: 0.6em;
}
#text_01{
  top: 38%;
  left: 60%;
}
#text_02{
  top: 43%;
  left: 100%;
}
#text_03{
  top: 44%;
  left: 75%;
}
#text_04{
  top: 63%;
  left: 65%;
}
#text_05{
  top: 44%;
  left: 40%;
}
#text_06{
  top: 41%;
  left: 20%;
}
#text_07{
  top: 35%;
  left: 70%;
}
#text_08{
  top: 54%;
  left: 20%;
}
#text_09{
  top: 54%;
  left: 55%;
}
#text_10{
  top: 57%;
  left: 75%;
}
#text_11{
  top: 57%;
  left: 40%;
}
#text_12{
  top: 60%;
  left: 88%;
}
#text_13{
  top: 36%;
  left: 30%;
}
#text_14{
  top: 56%;
  left: 110%;
}

#text_16{
  top: 38%;
  left: 160%;
}
#text_17{
  top: 43%;
  left: 200%;
}
#text_18{
  top: 44%;
  left: 175%;
}
#text_19{
  top: 63%;
  left: 165%;
}
#text_20{
  top: 44%;
  left: 140%;
}
#text_21{
  top: 41%;
  left: 120%;
}
#text_22{
  top: 35%;
  left: 170%;
}
#text_23{
  top: 54%;
  left: 120%;
}
#text_24{
  top: 54%;
  left: 155%;
}
#text_25{
  top: 57%;
  left: 175%;
}
#text_26{
  top: 57%;
  left: 140%;
}
#text_27{
  top: 60%;
  left: 188%;
}
#text_28{
  top: 36%;
  left: 130%;
}
#text_29{
  top: 56%;
  left: 210%;
}

.box{
  transform: translate(-50%, 50%);
  width: 120%;
}
#box_a{
  width: 45%;
  min-width: 140px;
}
#box_b{
  width: 40%;
  min-width: 127px;
}
#box_c{
  width: 8%;
  min-width: 25px;
}
#arm{
  position: absolute;
  width: 368%;
  top: 50%;
  left: 50%;
  transform: translate(-48.2%, -48%);
}
#halfcircle{
  width: 75%;
  transform: translate(-45%, -3%);
}
#bold_03{
  transform: translate(-45%, -155%);
  font-size: clamp(1rem, 11.5vw, 8.5rem);
}
#thin_03{
  transform: translate(-45%, -120%);
  font-size: clamp(0.4rem, 2.9vw, 2rem);
}
#harvard{
  width: 12vw;
  transform: translate(-170%, 15%);
}
#csm{
  width: 12vw;
  transform: translate(-170%, 155%);
}
#text_42{
  transform: translate(-10%, -10%);
  font-size: clamp(0.2rem, 2.3vw, 1.5rem);
}
#text_44{
  transform: translate(-16%, 104%);
  font-size: clamp(0.1rem, 2.3vw, 1.5rem);
}
.issued{
  font-size: clamp(0.2rem, 1.5vw, 1.2rem);
}
#text_46{
  color: #fef9e0;
  line-height: 230%;
  font-size: max(0.8rem, 2.5vw);
  transform: translate(-52%, -30%) rotate(-12deg);
}
#about_bg{
  transform: translate(-56%, -85%) rotate(-12deg);
}
#about{
  transform: translate(-64%, -11%) rotate(-12deg);
}
#button{
  transform: translate(-46.5%, 280%) rotate(-12deg);
  font-size: clamp(0.85rem, 2vw, 2.7rem);
  padding: 15px 80px 13px 80px;
}

.footer{
  height: 5em;
  min-width: 70em;
}
.bottom{
  font-size: 0.6em;
 }
#position{
  transform: translate(-50%, -35%) rotate(-12deg);
}
#arrow{
  top: 4em;
  right: 3em;
  width: 220vw;
}
#linkedin{
  bottom: 3px;
  right: 4px;
  width: 35px;
}
}

@media only screen and (max-height: 500px) {
#art_01{
  transform: translate(-52%, -70%);
  max-width: 64vw;
}
#art_02{
  transform: translate(-50%, -55%);
  max-width: 37vw;
}
.center{
  max-width: 800px;
 }
#image-parent{
  transform: translateY(135%);
}
.img{
  height: 3em;
  flex: 1;
}
.img.image-end {
  width: 5em;
}
.img.image-center {
  width: 20em;
}
.img.image-stretch {
  width: 100%;
}
.flex-grow-div {
  flex-grow: 1;
}
#bold_01{
  transform: translate(-50%, -7%);
  font-size: 2.5em;
}
#thin_01{
  transform: translate(-50%, 53%);
  font-size: clamp(1.3em, 1.6vw, 2em);
}
#circle{
  transform: translate(-50%, -50%);
  width: 70%;
}
#masked{
  width: 140%;
  height: 140vh;
}
.box{
  transform: translate(-50%, -7%);
  width: 100%;
}
#box_a{
  width: 20em;
  height: auto;
  transform: translate(-35%)
}
#box_b{
  width: 15em;
  height: auto;
  transform: translate(30%)
}
#box_c{
  width: 3em;
  height: auto;
  transform: translate(135%)
}
#about_bg{
  width: 190%;
  transform: translate(-56%, -85%) rotate(-12deg);
}
#text_46{
  transform: translate(-47%, -70%) rotate(-12deg);
  font-size: min(2vw, 1.9rem);
}
#button{
  transform: translate(-50%, 110%) rotate(-12deg);
  font-size: clamp(0.85rem, 2vw, 2.7rem);
}
#arrow{
  top: 12%;
  width: clamp(800px, 90vw, 2500px);
}
}