body{
    min-width: 300px;
    background: url("../img/background1.jpg") center;
}
.global{
    overflow: hidden;
}
.text{
    /* margin: 105px 0 0 0; */
    font-size: 28px;
    font-weight: bold;
    color:white;
}
#load{
    width: 255px;
    height: 255px;
    background: url("../img/loading1.gif") no-repeat center;
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left:-100px;
    display: flex;
  	justify-content: center;
  	align-items: center;
}
.text{

}
.text-main1 ,.text-main2,.text-main3,.text-main4,.text-main5,.text-main6,.text-main7,.text-main8,.text-main9,.text-main10,.text-main11,.text-main0{
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding-top: 73%;
    padding-bottom: 30%;
    position: relative;
    left: 0;
}
.text-main1{
    background: url("../img/q1/q1-bg.jpg") no-repeat;
    background-size: 100%;
}
.text-main2{
    background: url("../img/q2/q2-bg.jpg") no-repeat;
    background-size: 100%;
}
.text-main3{
    background: url("../img/q3/q3-bg.jpg") no-repeat;
    background-size: 100%;
}
.text-main4{
    background: url("../img/q4/q4-bg.jpg") no-repeat;
    background-size: 100%;
}
.text-main5{
    background: url("../img/q5/q5-bg.jpg") no-repeat;
    background-size: 100%;
}
.text-main6{
     background: url("../img/q6/q6-bg.jpg") no-repeat;
     background-size: 100%;
 }
.text-main7{
    background: url("../img/q7/q7-bg.jpg") no-repeat;
    background-size: 100%;
}
.text-main8{
    background: url("../img/q8/q8-bg.jpg") no-repeat;
    background-size: 100%;
}
.text-main9{
    background: url("../img/q9/q9-bg.jpg") no-repeat;
    background-size: 100%;
}
.text-main10{
    background: url("../img/q10/q10-bg.jpg") no-repeat;
    background-size: 100%;
}
.text-main11{
    background: url("../img/q11/q11-bg.jpg") no-repeat;
    background-size: 100%;
    /* padding-top: 82%; */
}
.text-main0{
    background: url("../img/q0/q0-bg.jpg") no-repeat;
    background-size: 100%;
    padding-top: 100%;
}
.question-text, .text-title{
    width: 70%;
    margin: 0 auto;
    overflow: hidden;
    left: 0;
}
.text-title{
    position: relative;
    left: 0;
}
.question-text{
	width:85%;
	height:150px;
	display:flex;
	background:url("../img/qt-background.png") no-repeat;
	background-size:100% 100%;
	/* background-position:center; */
	align-items:center;
	position:relative;
	left: 0;
}

.question-text img,.text-title img{
    width: 100%;
    position: relative;
    left: 0;
}
.q_text {
    font-size:20px;
    margin-left:5%;
    margin-top:-30px;
    margin-right:5%;
}

.question-act{
    animation: questionplay 0.5s;
    /* Firefox: */
    -moz-animation:questionplay 0.5s;
    /* Safari şışıChrome: */
    -webkit-animation: questionplay 0.5s;
    /* Opera: */
    -o-animation: questionplay 0.5s;
}
@keyframes questionplay {
    0%{left: 100%;}
    100%{left: 0;}
}
@-webkit-keyframes questionplay /* Safari and Chrome */
{
    0%{left: 100%;}
    100%{left: 0;}
}
.first-action{
    animation: first-action 1s ease both;
    /* Firefox: */
    -moz-animation: first-action 1s ease both;
    /* Safari şışıChrome: */
    -webkit-animation: first-action 1s ease both;
    /* Opera: */
    -o-animation: first-action 1s ease both;
}
.begin-icon{
    width: 216px;
    height: 65px;
    position: relative;
    background: url("../img/q0/icon1.png") no-repeat;
    background-size: 100% 100%;
    margin: 40px auto 0 auto;
    animation-delay: 1.0s;
    -webkit-animation-delay: 1.0s;
}
@keyframes first-action {
    0%{transform:scaleX(0)}
    50%{transform:scaleX(1.2)}
    100%{transform:scaleX(1)}
}
@-webkit-keyframes first-action /* Safari and Chrome */
{
    0%{transform:scaleX(0)}
    50%{transform:scaleX(1.2)}
    100%{transform:scaleX(1)}
}
.left-action{
    animation: left-action 1.2s;
    /* Firefox: */
    -moz-animation:left-action 1.2s;
    /* Safari şışıChrome: */
    -webkit-animation: left-action 1.2s;
    /* Opera: */
    -o-animation: left-action 1.2s;
    left: -100%;
}
@keyframes left-action {
    0%{left: 0}
    100%{left: -100%}
}
@-webkit-keyframes left-action /* Safari and Chrome */
{
    0%{left: 0}
    100%{left: -100%}
}
.right-action{
    animation: right-action 1.2s;
    /* Firefox: */
    -moz-animation:right-action 1.2s;
    /* Safari şışıChrome: */
    -webkit-animation: right-action 1.2s;
    /* Opera: */
    -o-animation: right-action 1.2s;
    left: -100%;
}
@keyframes right-action {
    0%{left: 0}
    100%{left: 100%}
}
@-webkit-keyframes right-action /* Safari and Chrome */
{
    0%{left: 0}
    100%{left: 100%}
}
.key-menu1,.key-menu2,.key-menu3,.key-menu4,.key-menu5,.key-menu6,.key-menu7,.key-menu8,.key-menu9,.key-menu10{
    width: 80%;
    margin: 15px auto 0 auto;
    overflow: hidden;
    padding-left:0;
}

.key-menu9 .key{
	height:100px;
	
}
.key-menu9 .key .key-t{
	margin-top:-20px;
	width:80%;
	font-size:18px;
}

.key{
    width: 100%;
    height: 60px;
    position: relative;
    left: 0;
    display:flex;
    justify-content:left;
    align-items:center;
     
}
.n,.y{
	background: url("../img/as-background1.png") no-repeat;
    background-size: 100% 85%;
}


.key-t{
	font-size:20px;
	font-weight:bold;
	margin-left:10%;
	margin-top:-3%;
}


.key-action{
    animation: keyplay 0.8s;
    /* Firefox: */
    -moz-animation:keyplay 0.8s;
    /* Safari şışıChrome: */
    -webkit-animation: keyplay 0.8s;
    /* Opera: */
    -o-animation: keyplay 0.8s;
}
@keyframes keyplay {
    0%{left: 100%;}
    20%{left: 100%;}
    100%{left: 0;}
}
@-webkit-keyframes keyplay /* Safari and Chrome */
{
    0%{left: 100%;}
    20%{left: 100%;}
    100%{left: 0;}
}
.key-action2{
    animation: keyplay2 1.0s;
    /* Firefox: */
    -moz-animation:keyplay2 1.0s;
    /* Safari şışıChrome: */
    -webkit-animation: keyplay2 1.0s;
    /* Opera: */
    -o-animation: keyplay2 1.0s;
}
@keyframes keyplay2 {
    0%{left: 100%;}
    30%{left: 100%;}
    100%{left: 0;}
}
@-webkit-keyframes keyplay2 /* Safari and Chrome */
{
    0%{left: 100%;}
    30%{left: 100%;}
    100%{left: 0;}
}
.key-action3{
    animation: keyplay3 1.2s;
    /* Firefox: */
    -moz-animation:keyplay3 1.2s;
    /* Safari şışıChrome: */
    -webkit-animation: keyplay3 1.2s;
    /* Opera: */
    -o-animation: keyplay3 1.2s;
}
@keyframes keyplay3 {
    0%{left: 100%;}
    40%{left: 100%;}
    100%{left: 0;}
}
@-webkit-keyframes keyplay3 /* Safari and Chrome */
{
    0%{left: 100%;}
    40%{left: 100%;}
    100%{left: 0;}
}
.key-action4{
    animation: keyplay4 1.4s;
    /* Firefox: */
    -moz-animation:keyplay4 1.4s;
    /* Safari şışıChrome: */
    -webkit-animation: keyplay4 1.4s;
    /* Opera: */
    -o-animation: keyplay4 1.4s;
}
@keyframes keyplay4 {
    0%{left: 100%;}
    40%{left: 100%;}
    100%{left: 0;}
}
@-webkit-keyframes keyplay4 /* Safari and Chrome */
{
    0%{left: 100%;}
    40%{left: 100%;}
    100%{left: 0;}
}
.texts{
    width: 147px;
    height: 25px;
    background: url("../img/q9/text.png") no-repeat;
    background-size: 100%;
    position: absolute;
    top: 73%;
    margin-top: -104px;
}
.icon-menu{
    width: 70%;
    height: 80px;
    margin: 0 auto;
    position:relative;
    top: 75%;
}
.icon-menu2{
    width: 70%;
    height: 80px;
    margin: 0 auto;
    position:relative;
    top: 75%;
}
.icon-menu li{
    width: 40%;
    height: 75px;
}
.icon1{
    float: left;
    margin-left: 20px;
    background: url("../img/q11/q11-icon1-1.png") no-repeat;
    background-size: 100%;
}
.icon-menu .icon2{
    float: right;
    margin-right: 20px;
    background: url("../img/q11/q11-icon2-1.png") no-repeat;
    background-size: 100%;
    
}
.icon-menu2 .icon2{
    /* display:flex;
    justify-content:middle;
    align-items:center; */
    margin: 0 auto;
    width:240px;
    height:80px;
    background: url("../img/q11/q11-icon2-1.png") no-repeat;
    background-size: 100%;
    /* border: 1px solid; */
}
.grade1{
    width: 250px;
    height: 250px;
    position: absolute;
    top: 35%;
    left: 35%;
    margin-left: -58px;
    
}
.grade2{
	width: 400px;
    height: 250px;
    position: absolute;
    top: 35%;
    left: 25%;
    margin-left: -58px;
    
}

.grades-n{
    width: 100%;
    height: 100%;
    float: left;
    background: url("../img/q11/f10.png") no-repeat;
    background-size: 100% 100%;
}

.share-menu{
    width: 100%;
    min-width: 300px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.music-icon{
    width: 50px;
    height: 50px;
    background: url("../img/micon1.png") no-repeat;
    background-size: 100%;
    position: absolute;
    right: 22px;
    top:22px;
}
.logo{
	width:425px;
	height:50px;
	background: url("../img/logo2.png") no-repeat;
	background-size:100% 100%;
	position: absolute;
	left:22px;
	top:22px;
}
.text-main11 .logo{
	top:10px;
}
.study-icon{
    width: 60%;
    height:200px;
    margin: 0 auto;
    display: block;
}
.study-text{
    width: 55%;
    height:120px;
    /* position:absolute; */
    margin: 0 auto;
    display: block;
    
}
.study-icon img,.study-text img{
    width: 100%;
}
.qr-code{
    width: 150px;
    height:150px;
    position:absolute;
    right:0;
    bottom:0;
    /* margin: 0 auto; */
    display: block;
    /* border:1px solid; */
    background: url("../img/q11/qr-code.png") no-repeat;
    background-size: 100%;
}
@media only screen and (max-width: 630px) and (min-width: 500px){
    #load{
    	width:25%;
    	height:25%;
    	margin-left:-60px;
    }
    .text-main1 .question-text, .text-main2 .question-text, .text-main10 .question-text{
    	width:85%;
		height:150px;
    }
    .text-main9 .question-text{
    	height:60px;
    }
    .question-text{
    	height:100px;
    }
    .text-main1 .q_text, .text-main2 .question-text .q_text{
    	font-size:18px;
    	margin-left:2%;
    }
    .text-main9 .q_text{
    	margin-top:-5px;
    }
    
    .key-menu9{
    	width:110%;
    }

    .text-main9 .key{
    	width:90%;
    	height:65px;
    	
    }
    .text-main9 .key .key-t{
    	width:90%;
    	font-size:13px;
    	margin-left:5%;
    }
    .icon-menu li{
        height: 65px;
    }
    .icon-menu2{
    	top:600px;
    }
    .icon-menu2 .icon2{
        width: 105px;
        height: 45px;
    }
    .grade1{
        width: 120px;
        height: 120px;
        top:35%;
        /* top: 16px;
        margin-left: 34px; */
    }
    .grade2{
    	width: 220px;
        height: 120px;
        top:35%;
    }
    .begin-icon{
        width: 175px;
        height: 48px;
        margin: 20px auto 0 auto;
    }
    .share-menu{
        height: 220%;
    }
    .qr-code{
    	width:60px;
    	height:60px;
    }
    canvas{
    	top:300px;
    }
}
@media only screen and (max-width: 499px) and (min-width: 396px){
    #load{
    	width:35%;
    	height:35%;
    	margin-left:-60px;
    }
    .texts{
        width: 120px;
        margin-top: -90px;
    }
    .text-main1 .question-text, .text-main2 .question-text, .text-main10 .question-text{
    	width:85%;
		height:150px;
    }
    .text-main9 .question-text{
    	height:60px;
    }
    .question-text{
    	height:100px;
    }
    .text-main1 .q_text, .text-main2 .question-text .q_text{
    	/* font-size:98%; */
    	margin-left:2%;
    }
    .text-main9 .q_text{
    	margin-top:-5px;
    }
    .q_text{
    	font-size:15px;
    }
    .key-menu9{
    	width:110%;
    }

    .text-main9 .key{
    	width:90%;
    	height:65px;
    	
    }
    .text-main9 .key .key-t{
    	width:90%;
    	font-size:13px;
    	margin-left:5%;
    }
    .key-t{
    	font-size:15px;
    }
  	
    .key{
    	height:45px;
    }
    .icon-menu li{
        height: 55px;
    }
    .icon-menu2{
        top:600px;    
    }
    .icon-menu2 .icon2{
        width: 105px;
        height: 45px;

    }
    .grade1{
        width: 120px;
        height: 120px;
        top:35%;
        /* top: 16px;
        margin-left: 34px; */
    }
    .grade2{
    	width: 220px;
        height: 120px;
        top:35%;
    }
    .study-icon{
    	height:70px;
	}
	.study-text{  	
    	height:70px;
	}
    .begin-icon{
        width: 175px;
        height: 48px;
        margin: 20px auto 0 auto;
    }
    .share-title{
        width: 270px;
        height: 255px;
    }
    .share-t{
        width: 100%;
        height: 100px;
    }
    .music-icon{
        width: 38px;
        height: 38px;
    }
    .logo{
    	width:298px;
    	height:35px;
    }
    .share-menu{
        height: 200%;
    }
    .qr-code{
    	width:60px;
    	height:60px;
    }
}
@media only screen and (max-width: 395px){
    #load{
    	width:30%;
    	height:30%;
    	margin-left:-50px;
    }
    .texts{
        width: 90px;
        margin-top: -73px;
        font-size:20px;
    }
    .text-main11{
    	height:100%;
    }
    .text-main1 .question-text, .text-main2 .question-text, .text-main10 .question-text{
    	width:85%;
		height:150px;
    }
    .text-main9 .question-text{
    	height:60px;
    }
    .question-text{
    	height:100px;
    }
    .text-main1 .q_text, .text-main2 .question-text .q_text{
    	/* font-size:95%; */
    	margin-left:2%;
    }
    .text-main9 .q_text{
    	margin-top:-5px;
    }
    .q_text{
    	font-size:15px;
    }
    .key-menu9{
    	width:110%;
    }

    .text-main9 .key{
    	width:90%;
    	height:65px;
    	
    }
    .text-main9 .key .key-t{
    	width:90%;
    	font-size:13px;
    	margin-left:5%;
    }
    .key-t{
    	font-size:15px;
    }
  	
    .key{
    	height:45px;
    }
    .icon-menu li{
        height: 45px;
    }
    .icon-menu2 .icon2{
        width: 105px;
        height: 45px;
    }
    .grade1{
        width: 120px;
        height: 120px;
        top:35%;
        /* top: 16px;
        margin-left: 34px; */
    }
    .grade2{
    	width: 220px;
        height: 120px;
        top:35%;
    }
    .begin-icon{
        width: 140px;
        height: 40px;
        margin: 20px auto 0 auto;
    }
    .study-icon{
    	height:70px;
	}
	.study-text{  	
    	height:70px;
	}
    .icon-menu{
    	bottom:30%;
    	padding-bottom:20%;
    }
    .share-t{
        width: 100%;
        height: 100px;
    }
    .music-icon{
        width: 30px;
        height: 30px;
    }
    .logo{
    	width:255px;
    	height:30px;
    }
    .share-menu{
        /* height: 180%; */
    }
    .qr-code{
    	width:60px;
    	height:60px;
    }
}
.yes-icon{
    width: 50px;
    height: 30px;
    position: absolute;
    background: url("../img/yes.png") no-repeat;
    background-size: 100%;
    bottom: 0;
    left: 12px;
}
.no-icon{
    width: 50px;
    height: 30px;
    position: absolute;
    background: url("../img/no.png") no-repeat;
    background-size: 100%;
    left: 2px;
    bottom: 0;
}
.dress{
    /* padding-top:10px; */
}
.hide{
    display: none;
}