* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
}

div,
p {}

.clear {
    clear: both;
}

img {
    max-width: 100%!important;
    height: auto;
    display: block;
}

.wap_container {
    max-width: 100%;
}

.container1 {
    /* width: 100%; */
    height: 100%;
    background: url('../image/bg1.jpg');
    background-size: 100% 100%;
    position: relative;
}

.container2 {
    height: 100%;
    background: url('../image/bg3.jpg');
    background-size: 100% 100%;
    position: relative;
}

.abs_container2 {
    position: absolute;
    bottom: 21.5%;
    width: 79%;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 0 0 0 0px;
}

.container3 {
    height: 100%;
    background: url('../image/bg2.jpg');
    background-size: 100% 100%;
    position: relative;
}

.container4 {
    height: 100%;
    background: url('../image/bg3.jpg');
    background-size: 100% 100%;
    position: relative;
}

.container5 {
    height: 100%;
    background: url('../image/bg5.jpg');
    background-size: 100% 100%;
    position: relative;
}

.inputX {
    display: block;
    padding: 2px;
    margin: 5px 0 0 0;
}

.btnStart {}

.buttonX {
    position: absolute;
    bottom: 16px;
    width: 28%;
    left: 50%;
    transform: translate(-50%, 0);
}

.buttonX2 {}

.option {
    width: 46%;
    transition: 2s;
}

.option.active {
    animation: blink 1s infinite;
}

.opt1 {
    margin: 0 0% 0 0;
    float: left;
}

.opt2 {
    float: right;
}

.btnConfirm {
    bottom: 7%;
    width: 35%;
}

.wap_button {
    position: absolute;
    width: 46%;
    left: 50%;
    bottom: 2%;
    transform: translate(-50%, -50%);
}

.btnTakePhoto {
    margin: 0 0 30px;
}

.btnGallery {
    position: relative;
}

.result {}

.btnPrint {
    width: 35%;
    bottom: 7%;
}

.none {
    display: none;
}

.block {
    display: block;
}

.abs_container1 {
    position: absolute;
    bottom: 17.5%;
    right: 9%;
}

.inputGallery {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.pageTakePhoto {}

.wapPhoto {
    position: relative;
    height: 100%;
    width: 100%;
}

.relative_camera {}

#camera {
    position: relative;
    /* height: 80%; */
    transform: scaleX(-1);
    width: 1080px;
    max-width: 100%;
}

#capture {
    background-image: url(../image/capture.png);
    width: 80px;
    height: 80px;
    position: absolute;
    background-size: cover;
    left: 50%;
    bottom: 6%;
    transform: translate(-50%, 0);
}

#canvas {
    display: none;
    width: 970;
    height: 1655;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#canvasRollon {
    /* display: none; */
    position: absolute;
    left: 0;
    bottom: 13px;
    width: 100%;
    height: 57%;
    /* height: 43%; */
    /* transform: translate(-50%, 0); */
}

#canvas2in1 {
    /* display: none; */
    position: absolute;
    left: 50%;
    bottom: 1.5%;
    width: 85%;
    height: 75%;
    transform: translate(-50%, 0);
}

#canvas2 {
    /* display: none; */
    position: absolute;
    left: 15;
    bottom: 10;
    width: 80%;
    
    height: 76%;
    /* transform: translate(-50%, 0); */
}

.loader {
    height: 30px;
    aspect-ratio: 2.5;
    --_g: no-repeat radial-gradient(farthest-side, #000 90%, #0000);
    background: var(--_g), var(--_g), var(--_g), var(--_g);
    background-size: 20% 50%;
    animation: l43 1s infinite linear;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%);
}

@keyframes l43 {
    0% {
        background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50%
    }
    16.67% {
        background-position: calc(0*100%/3) 0, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50%
    }
    33.33% {
        background-position: calc(0*100%/3) 100%, calc(1*100%/3) 0, calc(2*100%/3) 50%, calc(3*100%/3) 50%
    }
    50% {
        background-position: calc(0*100%/3) 50%, calc(1*100%/3) 100%, calc(2*100%/3) 0, calc(3*100%/3) 50%
    }
    66.67% {
        background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 100%, calc(3*100%/3) 0
    }
    83.33% {
        background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 100%
    }
    100% {
        background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50%
    }
}

.wapLoader {}

.chai {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    top: 38%;
    width: 40%;
}

.chai2in1 {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    top: 38%;
    width: 40%;
}

.chaiRollon {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    top: 38%;
    width: 27%;
}

.chai img {}

.wapType {
    position: absolute;
    left: 5%;
    bottom: 10%;
    width: 90%;
}

.optionType {
    width: 31%;
    float: left;
    margin-right: 3.5%;
}

.optionType:nth-child(3) {
    float: right;
    margin-right: 0;
}

.optionType.active {
    animation: blink 1s infinite;
}