body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
	  background-color:black;
      /*display: flex;
      justify-content: center;
      align-items: center;*/
    }

    canvas {
      position: absolute;
    }

	#live-column{
		position: absolute;
		left:72px;
		top:32px;
	}

	#focus-frame {
    position: absolute;
	  z-index:98;
		top:290px;/* <- */
		left:918px;/* <- */
		width:300px;
		height:300px;
	  display:none;
		clip-path: circle(50% at 50% 50%);
    }

	#focus-frame div {
		width:300px;
		height:300px;
		clip-path: circle(50% at 50% 50%);
	}


	img#focus-image{
		position: absolute;
		z-index:95;
		display:block;
	}

	#frame-alpha{
		position: absolute;
	  z-index:101;
		top:290px;/* <- */
		left:918px;/* <- */
		width:300px;
		height:300px;
	}

	#count-frame {
    position: absolute;
	  left:940px;/* <- */
	  top:312px;/* <- */
	  z-index:92;
	  display:none;
    }

	#smile-frame{
		position:absolute;
		left:965px;
	  top:505px;
	  z-index:105;
	  display:none;
	}

	#processing-frame{
		position:absolute;
		left:557px;
	  top:360px;
	  z-index:94;
	  display:none;
	}


	#result{
		position:absolute;
		top:0px;
		left:0px;
		display:none;
		/*width:300px;
		height:300px;
		background-image: url("project-files/face-detect/css/frame01.png");*/

	}


	/*
	#result img{
		position:absolute;
		top:0px;
		left:0px;
		width:300px;
		height:300px;
		background-color:transparent;
		mask-image: url("project-files/face-detect/ref-faces/giant01.svg");
		-webkit-mask-image: url("project-files/face-detect/ref-faces/giant01.svg");
	}
	*/

	div#head-single{
		position:absolute;
		top:287px;
		left:150px;
		width:645px;
		height:300px;
		background-image: url("../images/head-single-ordinary.png");
		background-size: contain;
	}

  div#tx-head-frame{
    position:absolute;
		top:61px;
		left:415px;
    /* display: none; */
    /* opacity: 0; */
		/* width:645px;
		height:300px; */
  }

  div#dot-green-frame{
    position:absolute;
    display: none;
		top:301px;
		left:1065px;
    z-index: 200;
  }
	/*
	img#head-single-img{
		position:relative;
		top:180px;
		left:110px;
		width:300px;
		height:300px;
		backgroud-color:red;
	}
	*/

	.bgFrame01{
		position:absolute;
		top:300px;
		left:900px;
		width:200px;
		height:200px;
		background-image: url("bg-frame01.png");
		background-size: contain;
	}

	.bgFrame02{
		position:absolute;
		top:300px;
		left:900px;
		width:200px;
		height:200px;
		background-image: url("bg-frame02.png");
		background-size: contain;
	}

	.bgFrame03{
		position:absolute;
		top:300px;
		left:900px;
		width:200px;
		height:200px;
		background-image: url("bg-frame03.png");
		background-size: contain;
	}

	.bgFrame04{
		position:absolute;
		top:300px;
		left:900px;
		width:200px;
		height:200px;
		background-image: url("bg-frame04.png");
		background-size: contain;
	}

	.giant01{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces-4/giant01.svg");
		-webkit-mask-image: url("../ref-faces-4/giant01.svg");
	}

  .giant02{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces-4/giant02.svg");
		-webkit-mask-image: url("../ref-faces-4/giant02.svg");
	}

  .giant03{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces-4/giant03.svg");
		-webkit-mask-image: url("../ref-faces-4/giant03.svg");
	}

	.human01{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human01.svg");
		-webkit-mask-image: url("../ref-faces/human01.svg");
	}

  .human02{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human02.svg");
		-webkit-mask-image: url("../ref-faces/human02.svg");
	}

  .human03{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human03.svg");
		-webkit-mask-image: url("../ref-faces/human03.svg");
	}

  .human04{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human04.svg");
		-webkit-mask-image: url("../ref-faces/human04.svg");
	}

  .human05{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human05.svg");
		-webkit-mask-image: url("../ref-faces/human05.svg");
	}

  .human06{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human06.svg");
		-webkit-mask-image: url("../ref-faces/human06.svg");
	}

  .human07{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human07.svg");
		-webkit-mask-image: url("../ref-faces/human07.svg");
	}

  .human08{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human08.svg");
		-webkit-mask-image: url("../ref-faces/human08.svg");
	}

  .human09{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human09.svg");
		-webkit-mask-image: url("../ref-faces/human09.svg");
	}

  .human10{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human10.svg");
		-webkit-mask-image: url("../ref-faces/human10.svg");
	}

  .human11{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human11.svg");
		-webkit-mask-image: url("../ref-faces/human11.svg");
	}

  .human12{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human12.svg");
		-webkit-mask-image: url("../ref-faces/human12.svg");
	}

  .human13{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human13.svg");
		-webkit-mask-image: url("../ref-faces/human13.svg");
	}

  .human14{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human14.svg");
		-webkit-mask-image: url("../ref-faces/human14.svg");
	}

  .human15{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human15.svg");
		-webkit-mask-image: url("../ref-faces/human15.svg");
	}

  .human16{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human16.svg");
		-webkit-mask-image: url("../ref-faces/human16.svg");
	}

  .human17{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human17.svg");
		-webkit-mask-image: url("../ref-faces/human17.svg");
	}

  .human18{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human18.svg");
		-webkit-mask-image: url("../ref-faces/human18.svg");
	}

  .human19{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human19.svg");
		-webkit-mask-image: url("../ref-faces/human19.svg");
	}

  .human20{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/human20.svg");
		-webkit-mask-image: url("../ref-faces/human20.svg");
	}

	.midget01{
		position:absolute;
		/*top:0px;
		left:0px;*/
		/*width:170px;
		height:170px;*/
		margin-left:auto;
		margin-right:auto;
		margin-top:auto;
		margin-bottom:auto;
		background-color:transparent;
		mask-image: url("../ref-faces/midget01.svg");
		-webkit-mask-image: url("../ref-faces/midget01.svg");
	}

	.dbl-spinner {
		display:none;
		position: absolute;
		top: 328px;
	  left: 955px;
    z-index: 100;
		width: 216px;
		height: 216px;
		border-radius: 50%;
		background-color: transparent;
		border: 4px solid transparent;
		border-top: 4px solid #9A6644;
		border-left: 4px solid #9A6644;
		-webkit-animation: 2s spin linear infinite;
		animation: 2s spin linear infinite;
	}

	.dbl-spinner:nth-child(2) {
		display:none;
		border: 4px solid transparent;
		border-right: 4px solid #FFE88A;
		border-bottom: 4px solid #FFE88A;
		-webkit-animation: 1s spin linear infinite;
		animation: 1s spin linear infinite;
	}

  #processing-loading1 {
		display:none;
		position: absolute;
		top: 305px;
	  left: 510px;
    z-index: 111;
		width: 260px;
		height: 260px;
		border-radius: 50%;
		background-color: transparent;
		border: 4px solid transparent;
		border-top: 4px solid #9A6644;
		border-left: 4px solid #9A6644;
		-webkit-animation: 2s spin linear infinite;
		animation: 2s spin linear infinite;
	}

	#processing-loading2 {
		display:none;
    position: absolute;
		top: 305px;
	  left: 510px;
    z-index: 110;
		width: 260px;
		height: 260px;
		border-radius: 50%;
		border: 4px solid transparent;
		border-right: 4px solid #FFE88A;
		border-bottom: 4px solid #FFE88A;
		-webkit-animation: 1s spin linear infinite;
		animation: 1s spin linear infinite;
	}

  #delay-time {
		display:block;
    position: absolute;
		top: 360px;
	  left: 985px;
    z-index: 102;
		width: 160px;
		height: 160px;
    /* background-color: red; */
    background-image:url("/project-files/face-detect/images/tx-sec.png");
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    background-position: 50% 75%;
    /* background: url("/project-files/face-detect/images/tx-sec.png") no-repeat fixed 50% 70%; */
	}


	@-webkit-keyframes spin {
		from {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		to {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@keyframes spin {
		from {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		to {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}


	/* div#head-single{
		display:block;
	}

  div#head-single img{
    position: relative;
    top:150px;
    left:150px;
  } */

	div#head-0{
		position:absolute;
		top:315px;
		left:425px;
		width:240px;
		height:240px;
		/*background-color:red;*/
		/* background-image: url("../images/bg-head-00.png");
		background-size: contain; */
    /* opacity: 0; */
	}

	div#head-1{
		position:absolute;
		top:210px;
		left:230px;
		width:150px;
		height:150px;
		/*background-color:red;*/
		/* background-image: url("../images/bg-head-01.png");
		background-size: contain; */
    /* opacity: 0; */
	}

	div#head-2{
		position:absolute;
		top:255px;
		left:750px;
		width:100px;
		height:100px;
		/*background-color:red;*/
		/* background-image: url("../images/bg-head-02.png");
		background-size: contain; */
    /* opacity: 0; */
	}

	div#head-3{
		position:absolute;
		top:550px;
		left:765px;
		width:130px;
		height:130px;
		/*background-color:red;*/
		/* background-image: url("../images/bg-head-03.png");
		background-size: contain; */
    /* opacity: 0; */
	}

	div#head-4{
		position:absolute;
		top:630px;
		left:470px;
		width:100px;
		height:100px;
		/*background-color:red;*/
		/* background-image: url("../images/bg-head-04.png");
		background-size: contain; */
    /* opacity: 0; */
	}

  div#head-5{
		position:absolute;
		top:560px;
		left:200px;
		width:110px;
		height:110px;
		/*background-color:red;*/
		/* background-image: url("../images/bg-head-04.png");
		background-size: contain; */
    /* opacity: 0; */
	}

  div#head-6{
		position:absolute;
		top:390px;
		left:90px;
		width:110px;
		height:110px;
		/*background-color:red;*/
		/* background-image: url("../images/bg-head-04.png");
		background-size: contain; */
    /* opacity: 0; */
	}