* {
    box-sizing: border-box;
}
html, body {
    padding: 0;
    margin : 0;
    height : 100dvh;
    overflow:hidden;
}

.nt-wrapper {

    width: 100dvw;
    height: 100dvh;
    background-color: #000000;

    display: flex;
    justify-content: center;
    align-items: center;
}

.nt-progress-bar-cont {
    width: 45%;
    max-width: 250px;
    height : 7px;
    /* border : 1px solid red; */
    position: relative;
}

.nt-progress-bar {

    width: 100%;
    height : 100%;
    border : 1px solid #333;
    border-radius: 3px;
    overflow: hidden;
    position: absolute;
}

.nt-progress {
    width : 1%;
    height : 100%;
    background-color: white;
    position: absolute;
}

.nt-ad-container {

    width: auto;
    height : auto;
    overflow: hidden;
    background-color: #ffffff;
    position: absolute;
    display: none;
}


.nt-ad-container * {
    width: 100%;
    height : 100%;
    position:absolute;
    pointer-events: none;
}

.border {
    border : 1px solid #000;
    z-index: 999;
    pointer-events: none;
}

.hs{
   /*background-color: #ff000090;*/
   pointer-events: all;
   width:100%;
   left:50%;
   transform: translateX(-50%);
}
.hs-bgclick,.hs-start{
   height: 100%;
 }

.hs-a2-ans,.hs-a2-ansb{
    width: 46%;
    height: 6%;
    /* background-color: #ff000090; */
}

.hs-a3-ans,.hs-a3-ansb,.hs-a4-ans,.hs-a4-ansb{
    width: 32%;
    height: 18%;
    /* background-color: #ff000090; */
}
.hs-a1-ans{
    
    width: 20%;
    height: 5%;
    /* background-color: #ff000090; */
}

.hs-a1-ans1{
    top: 17%;
    left: 52%;
}
.hs-a1-ans2{
    top: 17%;
    left: 73%;
}

.hs-a2-ans1,.hs-a2-ans1b{
    top: 36.6%;
    left: 28%;
}
.hs-a2-ans2,.hs-a2-ans2b{
    top: 36.6%;
    left: 74%;
}

.hs-a3-ans1,.hs-a3-ans1b,.hs-a4-ans1,.hs-a4-ans1b{
    top: 57%;
    left: 36%;
}
.hs-a3-ans2,.hs-a3-ans2b,.hs-a4-ans2,.hs-a4-ans2b{
    top: 57%;
    left: 69%;
}

.introbg { 
    background: url('images/introbg.png') no-repeat center center;
    background-size: contain;
}
.endbg { 
    background: url('images/endbg.png') no-repeat center center;
    background-size: contain;
}
.bgq { 
    background: url('images/bgq.png') no-repeat center center;
    background-size: contain;
}


/*===sprite*/

.a1-ans1,.a1-ans2,.a1,.a2,.a3,.ans2-food1,
.ans2-food2,.ans2-treat1,.ans2-treat2,.ans3-bliz1,.ans3-bliz2,.ans3-burger1,
.ans3-burger2,.ans3-chicken1,.ans3-chicken2,.ans3-class1,.ans3-class2,.art,
.endcta,.introcopy,.introcta,.introimg,.intrologo,.introtxt,
.q1-ans1,.q1-ans2,.q1,.q2-food,.q2-food1,.q2-food2,
.q2-treat,.q2-treat1,.q2-treat2,.q3-bliz,.q3-bliz1,.q3-bliz2,
.q3-burger,.q3-burger1,.q3-burger2,.q3-chicken,.q3-chicken1,.q3-chicken2,
.q3-class,.q3-class1,.q3-class2
{ max-width: 100%; background-size: 100%; background-image: url('images/sprite.png'); }

.a1-ans1 {  background-position: 0 0.00%;  background-size: 100%;}
.a1-ans2 {  background-position: 0 2.27%;  background-size: 100%;}
.a1 {  background-position: 0 4.55%;  background-size: 100%;}
.a2 {  background-position: 0 6.82%;  background-size: 100%;}
.a3 {  background-position: 0 9.09%;  background-size: 100%;}
.ans2-food1 {  background-position: 0 11.36%;  background-size: 100%;}
.ans2-food2 {  background-position: 0 13.64%;  background-size: 100%;}
.ans2-treat1 {  background-position: 0 15.91%;  background-size: 100%;}
.ans2-treat2 {  background-position: 0 18.18%;  background-size: 100%;}
.ans3-bliz1 {  background-position: 0 20.45%;  background-size: 100%;}
.ans3-bliz2 {  background-position: 0 22.73%;  background-size: 100%;}
.ans3-burger1 {  background-position: 0 25.00%;  background-size: 100%;}
.ans3-burger2 {  background-position: 0 27.27%;  background-size: 100%;}
.ans3-chicken1 {  background-position: 0 29.55%;  background-size: 100%;}
.ans3-chicken2 {  background-position: 0 31.82%;  background-size: 100%;}
.ans3-class1 {  background-position: 0 34.09%;  background-size: 100%;}
.ans3-class2 {  background-position: 0 36.36%;  background-size: 100%;}
.art {  background-position: 0 38.64%;  background-size: 100%;}
.endcta {  background-position: 0 40.91%;  background-size: 100%;}
.introcopy {  background-position: 0 43.18%;  background-size: 100%;}
.introcta {  background-position: 0 45.45%;  background-size: 100%;}
.introimg {  background-position: 0 47.73%;  background-size: 100%;}
.intrologo {  background-position: 0 50.00%;  background-size: 100%;}
.introtxt {  background-position: 0 52.27%;  background-size: 100%;}
.q1-ans1 {  background-position: 0 54.55%;  background-size: 100%;}
.q1-ans2 {  background-position: 0 56.82%;  background-size: 100%;}
.q1 {  background-position: 0 59.09%;  background-size: 100%;}
.q2-food {  background-position: 0 61.36%;  background-size: 100%;}
.q2-food1 {  background-position: 0 63.64%;  background-size: 100%;}
.q2-food2 {  background-position: 0 65.91%;  background-size: 100%;}
.q2-treat {  background-position: 0 68.18%;  background-size: 100%;}
.q2-treat1 {  background-position: 0 70.45%;  background-size: 100%;}
.q2-treat2 {  background-position: 0 72.73%;  background-size: 100%;}
.q3-bliz {  background-position: 0 75.00%;  background-size: 100%;}
.q3-bliz1 {  background-position: 0 77.27%;  background-size: 100%;}
.q3-bliz2 {  background-position: 0 79.55%;  background-size: 100%;}
.q3-burger {  background-position: 0 81.82%;  background-size: 100%;}
.q3-burger1 {  background-position: 0 84.09%;  background-size: 100%;}
.q3-burger2 {  background-position: 0 86.36%;  background-size: 100%;}
.q3-chicken {  background-position: 0 88.64%;  background-size: 100%;}
.q3-chicken1 {  background-position: 0 90.91%;  background-size: 100%;}
.q3-chicken2 {  background-position: 0 93.18%;  background-size: 100%;}
.q3-class {  background-position: 0 95.45%;  background-size: 100%;}
.q3-class1 {  background-position: 0 97.73%;  background-size: 100%;}
.q3-class2 {  background-position: 0 100.00%;  background-size: 100%;}






/*====sprite-end*/

.end-burger1-copy1,.end-burger1-copy2,.end-burger1-img,.end-burger2-copy2,.end-burger2-img,.end-chicken1-copy2,
.end-chicken1-img,.end-chicken2-copy2,.end-chicken2-img,.end-class1-copy1,.end-class1-copy2,.end-class1-img,
.end-class2-copy1,.end-class2-img,.end-treat1-copy1,.end-treat1-copy2,.end-treat1-img,.end-treat2-copy1,
.end-treat2-img
{ max-width: 100%; background-size: 100%; background-image: url('images/sprite-end.png'); }

.end-burger1-copy1 {  background-position: 0 0.00%;  background-size: 100%;}
.end-burger1-copy2 {  background-position: 0 5.56%;  background-size: 100%;}
.end-burger1-img {  background-position: 0 11.11%;  background-size: 100%;}
.end-burger2-copy2 {  background-position: 0 16.67%;  background-size: 100%;}
.end-burger2-img {  background-position: 0 22.22%;  background-size: 100%;}
.end-chicken1-copy2 {  background-position: 0 27.78%;  background-size: 100%;}
.end-chicken1-img {  background-position: 0 33.33%;  background-size: 100%;}
.end-chicken2-copy2 {  background-position: 0 38.89%;  background-size: 100%;}
.end-chicken2-img {  background-position: 0 44.44%;  background-size: 100%;}
.end-class1-copy1 {  background-position: 0 50.00%;  background-size: 100%;}
.end-class1-copy2 {  background-position: 0 55.56%;  background-size: 100%;}
.end-class1-img {  background-position: 0 61.11%;  background-size: 100%;}
.end-class2-copy1 {  background-position: 0 66.67%;  background-size: 100%;}
.end-class2-img {  background-position: 0 72.22%;  background-size: 100%;}
.end-treat1-copy1 {  background-position: 0 77.78%;  background-size: 100%;}
.end-treat1-copy2 {  background-position: 0 83.33%;  background-size: 100%;}
.end-treat1-img {  background-position: 0 88.89%;  background-size: 100%;}
.end-treat2-copy1 {  background-position: 0 94.44%;  background-size: 100%;}
.end-treat2-img {  background-position: 0 100.00%;  background-size: 100%;}