@font-face {
    font-family: "FivoSans-Bold";
    src: url(../fonts/FivoSans-Bold.otf);
}
@font-face {
    font-family: "Kompeni";
    src: url(../fonts/Kompeni-Regular_2.otf);
}
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;

    vertical-align: top;
}
div,
span,
img,
video {
    margin: 0;
    padding: 0;
}
.app {
    position: relative;
    width: 100%;
    height: 100%;
    vertical-align: top;
    font-size: 24px;
    color: #000;
    background-color: rgb(241, 242, 222);
    text-align: center;
}
.page {
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}
.max {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.paddingX10{
    padding-left: 10%;
    padding-right: 10%;
    box-sizing: border-box;
}
.abs {
    position: absolute;
}
.pre {
    position: relative;
}
.fixed {
    position: fixed;
}
.flex {
    display: flex;
}
.top0 {
    top: 0;
}
.w100 {
    width: 100%;
}
.pdetail {
    z-index: 999;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    background-size: cover;
    overflow: hidden;
}
.animate {
    transition: all 2s linear;
}
.animate300 {
    /* transition: all 400ms linear; */
}
.videohide{
    /* opacity: 0.6;
    transform: scale(1.25); */
}
.videorighthide{
    /* opacity: 0.6;
    transform: translateX(50%); */
}
#homepage{
    background: rgb(0, 61, 44) url(../img/final-output-bg1.png) no-repeat center calc(7vh - 100px);
    background-size: cover;
}
#finaloutput {
    background: rgb(0, 61, 44) url(../img/final-output-bg1.png) no-repeat center top;
    background-size: cover;
}
.homepage-title{
    top: 5%;
    margin-top: 20px;
    left:10%;
    width: 80%;
    z-index: 1;
    margin-bottom: 5%;
}
.coffeebox{
    top: 28%;
    width: 100%;
    left: 0;
}
.coffeebox .kvtcoffee{
    width: auto;
    max-width: 50vw;
    height: 33vh;
    object-fit: contain;
}

.page-title{
    top: 2%;
    left:10%;
    width: 80%;;
    display: flex;
    justify-content: space-between;
    z-index: 1;
    margin-bottom: 4vh;
}
.kvtbox{
    width: 36vh;
    position: relative;
}
.bottomkv{
    bottom: 6%;
    left: 0;
    width: 100%;
    /* margin-top: 50px; */
}
.bottomkv2{
    bottom: 7.5%;
    left: 0;
    width: 100%;
    margin-bottom: -30px;
}
.camerfooter{
    bottom: 10px;
    left: 0;
    width: 100%;
}
.kvtimg{
    width: 100%;
}
.kvtlogo{    
    width: 28%;
}
.kvttextimg{
    display: block;
    width: auto;
    max-width: 30vh;
    height: 7vh;
    margin: 1.5vh auto ;
}
.infobox{
    width: 100%;
    color: #000;
    font-size: 1.25em;
}
.logo{
    width: 28vw;
}
.icon-text{
    width: 15vw;
}
.icon-info{
    width: 5vw;
}
.btnimg{
    width: 100%;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
}
.title{
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.1;
    font-family: "Kompeni", sans-serif;
    color:rgb(0, 61, 44);
    letter-spacing: 1px;
}
.pbox-body{
    font-family: "FivoSans-Bold", sans-serif;
    font-size: 0.8em;
    line-height: 1.2;
    color:rgb(0, 61, 44);
}
.subtitle{
    font-size: 0.90em;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1;
}
.tipbox{
    font-family: 'FivoSans-Bold', sans-serif;
    margin-top: 0.2em;
    font-size: 0.6em;
    line-height: 1.6;
    color: #fff;
}
.btn{
    width: 80vw;
    margin: 0 auto 0.8vh;
    color: #000;
    padding: 0;
    font-weight: bold;
    border-radius: 0.4em;
    cursor: pointer;
    text-align: center;
    font-family: "FivoSans-Bold", sans-serif;
    transition: opacity 0.3s ease;
}
.btn img{
    user-select: none;
    -webkit-user-select: none;
}
.btn.mt5{
    margin-top: 0.5em;
}

.icon{
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    margin-top: -0.2em;
}
.page .mideilvideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}
.camerabox{
    position: relative;
    margin: 0 auto;
    width: 90vw;
    height: 126vw;
    /* background-color: rgba(0, 0, 0, 0.5); */
     margin-top: 14vh;
    top: -40px;
}
.camerabox.move{
    transition: all 0.5s ease-in-out;
    margin-top: 10vh;
}
.camera-tip{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5%;
    width: 90%;
}
.canvas {
    display: none;
    top: 50%;
    left: 5%;
    width: 81vw;
    height: 108vw;
    transform: translateY(-50%);
}
.btnfile{
    position: relative;
}
#fileInput {
   opacity: 0;
   position: absolute;
   top:0;
   left: 0; 
   width: 100%;
   height: 100%;
   z-index: 9;
}
.showphoto{
    position: absolute;
    top: 20vh;
    left: 5vw;
    width: 90vw;
    margin: 0 auto;
    margin-top: 20px;
}
#poster{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(0,61,44);
    box-sizing: border-box;
    padding: 0.8em;
}
.topleft_icon{
    position: absolute;
    top: 1.24em;
    left: 1.24em;
    width: 27.13%;
    height: auto;
    object-fit: contain;
}
.bottomleft_icon{
    position: absolute;
    bottom: 0.2em;
    left: 3.99%;
    width: 29.79%;
    height: auto;
}
.bottomright_icon{
    position: absolute;
    bottom: 1.24em;
    right: 1.24em;
    width: 20.74%;
    height: auto;
}
.bottomlogo_icon{
    position: absolute;
    bottom: 0.2em;
    left: 1.2%;
    width: 3.06%;
    height: auto;
}
.sharebox{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}
.showinput{
    width: 100%;
    margin: 0 auto 0.5em;
}
.outputimg{
    width: 100%;
    height: auto;
}
.my-1{
    margin-top: 1em;
    margin-bottom: 1em;
}
#uploadpicture{
    background: url(../img/bg1.png) no-repeat center center fixed;
    background-size: cover;
}
#previewpicture,#previewfile{
    background: url(../img/bg2.png) no-repeat center center fixed;
    background-size: cover;
}
#uploadpicture .kvttextimg{
    margin-top: 1.5vh;
    height: 10vh;
}
#previewfile .camerabox{
    width: 80vw;
}
.canvasfile{
    width: 100%;
    height: auto;
    max-height: 126vw;
    object-fit: contain;
}
.showdemo{
    width: 30vh;
    position: relative;
    margin: 0 auto;
    max-width: 90%;
}
.blackbox{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 18vh;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
}
.btnbox2{
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    margin: 0 auto;
}

.btnbox2 .btn{
    width: auto;
}
.btnflip{
    right:10%;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
}
.btncapture{
    width: 20vw;
    height: 20vw;
    margin: 0 auto;
}
.btnretake,.btnnext{
    width: 50%;
}
.icon-shoot{
    width: 100%;
    height: auto;
    object-fit: contain;
}
.icon-flip{
    width: 8vw;
    height: 8vw;
    object-fit: contain;
}
.right_icon{    
    right: -5vw;
    width: 15vw;
    bottom: 50%;
}
.left_icon{
    width: 20vw;
    bottom: -4vw;
    left: -5vw;
}
#loading{
    background: url(../img/loadingbg.png) no-repeat center center;
    background-size: cover;
}
.loadingimg{
    width: 180px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.loadingtxt{
    margin-top: 0.5em;
    color: #fff;
    font-size: 0.8em;
    overflow: hidden;
    height: 4em;
    /* display: flex;
    align-items: end; */
}
.loader {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
  border: 4px solid #FFF;
  box-sizing: border-box;
  animation: fill 2s linear infinite alternate;
  color: rgba(0, 63, 47, 0.9);
  border-radius: 0 0 4px 4px;
}
.loader::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid #FFF;
  width: 20px;
  height: 25px;
  border-radius: 0 4px 4px 0;
}

@keyframes fill {
  0% {
    box-shadow: 0 0  inset;
  }
  100% {
    box-shadow: 0 -48px inset;
  }
} 
.textunder{
    text-decoration: underline;
}
#fqdetail{
    background: rgba(0, 0, 0, 0.4);
}
#palert{
    background-color: rgba(0, 0, 0, 0.4);
}
.contant{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
}
.pbox{
    width: 90%;
    height: auto;
    padding-top: 30px;
    background-color: #fff;
    position: relative;
    /* box-shadow: 0 4px 8px rgb(0, 0, 0); */
}
.pbox .pbox-title{
    color: rgb(0,61,44);
    font-size: 1.6em;
    font-weight: bold;
}
.pbox .pbox-contant{
    position: relative;
    max-height: 70vh;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    background-color: rgb(255, 255, 255);
    color: #000;
}
.fqdetail-body {
    margin-top: 20px;
    font-size: 0.8em;
    line-height: 1.25;
    text-align: left;
}

.fqdetail-body  ol{
    font-size: 1em;
    list-style: inside;
    padding-inline-start: 0;
}
.pclose{
    top: 12px;
    right: 12px;
    width: 18px;
    height: 18px;
    text-align: center;
    object-fit: contain;
    z-index: 1;
}
.footerbox{
    position: relative;
    margin-top: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
}

.footerbox .btn{
    flex:1;
    display: none;
}
.pc{
    width: 100%;
    height: 100%;
    background-color: rgb(0, 61, 44);
}
.pcflex{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    /* overflow-y: auto; */
    flex-wrap: wrap;
}
.bbgkv{
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../img/69fff09585b94985211de5ae67eb654.png) no-repeat left top;
    background-size: cover;
}.minw{
    min-width: 100%;
}
.qrcodebox{
    background:linear-gradient(to left,rgba(0, 61, 44,1),rgba(0, 61, 44,1),rgba(0, 61, 44,1),rgba(0, 61, 44,1),rgba(0, 61, 44,1),rgba(0, 61, 44,0));
    top: 0;
    bottom: 0;
    left: 68%;
    right: 0;
    box-sizing: border-box;
    padding: 5%;
}
.qrcode{
    background: url(../img/fdfd0b645983d5fbab96f32fe6714d0.png) no-repeat center center ;
    background-size: contain;
}
.btnimg—icon{
	height: 1em;
}
.btntry{
	width: 90vw;
	background: #fff;
	font-size: 1em;
	padding: 0.3em 0;
	border-radius: 0;
	font-weight: normal;
	letter-spacing: 1px;
    font-family: "Kompeni", sans-serif;
	color:rgb(0, 61, 44);
}
.btnimg—icon{
	height: 1em;
}