/* A Modern CSS Reset */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html{scroll-behavior:smooth}body{text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}
img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}


body{
  font-family: "Lexend Mega", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  --w:100vw;
  background-color: #000;
  color:#fff;
  width: 100%;
}

.noto-sc{
    font-family: "Noto Sans SC", serif;
}

.noto-tc{
    font-family: "Noto Sans TC", serif;
}

@media (min-width: 481px) {
    body{
        --w:480px;        
    }
  }



#content{
    --late:calc(var(--w)/375);
    width: var(--w);
    margin: 0 auto;
    text-align: center;
}

#item1{
    width: 100%;
}


.medium{
  font-weight: 500;
}


.layer0{
    background-image: url(img/A_bg.png);
    width: var(--w);
    height: var(--w);
    background-size: calc(var(--late)*667) calc(var(--late)*667);
    background-position: center;
    position: absolute;
    z-index:-1;
}

.layer1{
    position: fixed;
    z-index: 0;
    top:0;
    left:50%;
    transform: translateX(-50%);
    width: var(--w);
    mix-blend-mode: screen;
}

.layer2{
    position: absolute;
    z-index:1;
    width: var(--w);
}



.header{
    background-image: url(img/lines.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: calc(var(--late)*27);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--late)*10);
}

.sec1{
    padding: calc(var(--late)*23) 0 calc(var(--late)*20) 0;   
}

.logo{
    width:calc(var(--late)*145);
    margin: 0 auto calc(var(--late)*24) auto;
}

.description{
    font-size: calc(var(--late)*16);
    margin-bottom: calc(var(--late)*10);
    line-height: calc(var(--late)*21);
}

#face-type{
    height: calc(var(--late)*18.69);
    width: 90%;
    text-align: center;
    margin: calc(var(--late)*25.6) auto calc(var(--late)*13.7) auto;
}

#face-type img{
    display: inline;
    height: 100%;
}

.uploaded-images{
    border:1px solid rgba(255,255,255,0.4);
    border-width: 0 1px 0 1px;
    margin: 0 auto;
    padding:0 0 calc(var(--late)*47) 0;
    width: calc(var(--late)*345);
}

.layer3{
    width:calc(var(--late)*346);
    pointer-events: none;
    position: absolute;
    top:calc(var(--late)*25) !important;
    left:50%;
    transform: translateX(-50%);
    border:1px solid rgba(255,255,255,0.4);
}

.make_description{
    font-size:calc(var(--late)*16);
    letter-spacing: calc(var(--late)*1.4);
    line-height: calc(var(--late)*24);
    text-align: left;
    border:1px solid rgba(255,255,255,0.4);
    border-width: 0 1px 0 1px;
    width: calc(var(--late)*345);
    margin: 0 auto;
    padding:calc(var(--late)*25) calc(var(--late)*16) calc(var(--late)*31) calc(var(--late)*16);
}

.make_description_en{
    font-size:calc(var(--late)*11);
    line-height: calc(var(--late)*20);
    letter-spacing: calc(var(--late)*.8);
}

.block{
    width:calc(var(--late)*345);
    margin: 0 auto;
    pointer-events: none;
    border:1px solid rgba(255,255,255,0.4);
    border-width: 0 1px 0 1px;
}

.uploaded-image{
    position: relative;
    width: calc(var(--late)*311);
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,0.4);
}

.uploaded-image > img{
    width: 100%;
}

.uploaded-image > .frame{
    width: 100%;
    height: 100%;

}

.cornes > .frame > img.corner:nth-child(2){
    transform: scaleX(-1);
}
.cornes > .frame > img.corner:nth-child(3){
    transform: scaleY(-1);
}
.cornes > .frame > img.corner:nth-child(4){
    transform: scale(-1,-1);
}

.dl-info{
    margin: calc(var(--late)*10) auto calc(var(--late)*47) auto;
}

.no-bottom{
    margin-bottom: 0;
}

.long-press{
    font-size: calc(var(--late)*14);
    width: 100%;
    color:#AE1D10;
}

.dl-limit{
    font-size: calc(var(--late)*12);
    width: 100%;
    color:#666666;
}

.items{
    border:1px solid rgba(255,255,255,0.4);
    border-width: 0 1px 0 1px;
    position: relative;
    width: calc(var(--late)*345);
    height: calc(var(--late)*986);
    margin: 0 auto;
    padding-top: calc(var(--late)*51);
    box-sizing: border-box;
}

.items > .frame{
    width: 100%;
    border-top: solid 1px rgba(255,255,255,0.4);
}

.items > .item-title{
    font-size: calc(var(--late)*16);
    line-height: calc(var(--late)*23);
}

.items > .item-list{
    width: calc(var(--late)*311);
    margin: calc(var(--late)*26) auto 0 auto;
    position: relative;
}

.items > .item-list > .item{
    width: calc(var(--late)*310);
    height: calc(var(--late)*130);
    position: relative;
    margin-bottom: calc(var(--late)*20);
}

.items > .item-list > .item > img{
    width: calc(var(--late)*130);
    position: absolute;
    left:0;
    top:0;
}

.items > .item-list > .item > div{
    width: calc(var(--late)*180);
    height: calc(var(--late)*130);
    position: absolute;
    right:0;
    top:0;
    font-size:calc(var(--late)*16);
    text-align: left;
    word-wrap: break-word;
    padding-left:calc(var(--late)* 10);
}

.items > .item-list > .item > div > span{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    word-wrap: break-word;
}

.shelf{
    width: calc(var(--late)*311);
    height: calc(var(--late)*182);
    margin: calc(var(--late)*35) auto 0 auto;
    position: relative;
    border: 1px solid #fff;
}

.shelf > .frame{
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.shelf > img{
    margin-top: calc(var(--late)* -14.5);
    width: calc(var(--late)*312);
    max-width: none;
    pointer-events: none;
}

.shelf > .number {
    width: calc(var(--late)*36);
    height: calc(var(--late)*36);
    font-size:calc(var(--late)*19);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute ;
    top:calc(var(--late)* 13);
    left:calc(var(--late)* 13);
}

.shelf > .find-item{
    position: absolute;
    left:calc(var(--late)* 58);
    top:calc(var(--late)* 14);
    text-align: left;
    font-size: calc(var(--late)*14);
    line-height: calc(var(--late)*18);
}

.share{
    border:1px solid rgba(255,255,255,0.4);
    border-width: 0 1px 0 1px;
    width: calc(var(--late)*344);
    height: calc(var(--late)*233);
    position: relative;
    margin: 0 auto;
    padding-top:calc(var(--late)*47.8);
}

.share-text{
    font-size: calc(var(--late)*18);
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.share-text-en{
    font-size: calc(var(--late)*16) !important;

}

.share> .frame{
    position: absolute;
    width: 100%;
    height: 100%;
    border-top: solid 1px rgba(255,255,255,0.4);
}

.share > img.icons{
    width: calc(var(--late)*171);
    margin: calc(var(--late)*20.8) auto 0 auto;
    display: block;
    cursor: pointer;
}

.share > img.kate{
    width: calc(var(--late)*154);
    margin: calc(var(--late)*68.6) auto 0 auto;
}

.bottom{
    background-image: url(img/footer.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: var(--w);
    height: calc(var(--late)*27);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--late)*10);
}

#camera{
    position: relative;
}
  #container { 
    position: relative;
    background-color: aliceblue;
    margin: 0 auto;
  }

  #YMK-module,
  #point-view{
    position: absolute;
    top:0;
    left:0;
  }

  #point-view {
    pointer-events: none;
  }

  #container,
  #YMK-module,
  #point-view{
    width:calc(var(--late)*344);
    height:calc(var(--late)*344);
    z-index: 100;
  }
  .camera-frame{
    width:calc(var(--late)*345);
    height:calc(var(--late)*345);
    position: absolute;
    top:0;
    left:50%;
    z-index:300;
    transform: translateX(-50%);
    z-index:1060;
    border:1px solid rgba(255,255,255,0.4);
  }

  .frame{
    position: absolute;
    pointer-events: none;
    top:0;
  }

  .frame > img.corner{
    position: absolute;
    width: calc(var(--late)*4);
    height: calc(var(--late)*4);
  }

  .frame > img.corner:nth-child(1){
    left:calc(var(--late)*-4/2);
    top:calc(var(--late)*-4/2);
  }

  .frame > img.corner:nth-child(2){
    right:calc(var(--late)*-4/2);
    top:calc(var(--late)*-4/2);
  }

  .frame > img.corner:nth-child(3){
    left:calc(var(--late)*-4/2);
    bottom:calc(var(--late)*-4/2);
  }

  .frame > img.corner:nth-child(4){
    right:calc(var(--late)*-4/2);
    bottom:calc(var(--late)*-4/2);
  }