@font-face {
    font-family:'Lato';
    src: url('../fonts/Lato Regular.eot');
	src: url('../fonts/Lato Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Lato Regular.woff2') format('woff2'),
		url('../fonts/Lato Regular.woff') format('woff'),
		url('../fonts/Lato Regular.svg#Lato Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-02DC;
} 

body {
  font-family:Arial; 
  font-style: normal;
  background:#fff;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: 400;
  line-height: 1.5;
  color: #191919;
  font-size:1rem;
  overflow-x:hidden;
  text-size-adjust:none; 
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

h1,h2,h3,h4,h5,h6,ul,ol,ul li,ol li{margin:0; padding:0; list-style:none; font-weight:normal;}

.normalList{
	margin:1rem;
	padding: 0rem 1rem;
	list-style: disc outside !important;
}

.normalList li{
	font-size:28px;
	list-style: disc outside !important;
}

img{max-width:100%;}  
*{
	box-sizing: border-box;
}

.page_container{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #fff;
	overflow-y: auto;
	overflow-x:hidden;
}
.bottom_border{
	border-bottom: 10px solid #33d196;
}
.begin{
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
	background: #10069f; 
}
.page_icon {
	position: absolute;
	width:70%;
	right: 0;
	top: 0;
	background:url(../images/ally.jpg) no-repeat center;
	height:100%;
	background-size:cover;
}
.tittle_container {
	position: absolute;
	width: 20%;
	bottom: 0;
	left: 5%;
	height: 400px;
	top: 0;
	margin: auto;
}
.begin_tittle {
	float: left;
	width: 100%;
	color: #fff;
	font-size: 5vw;
	line-height: normal;
	font-weight: bold;
}
.tittle_container::before {
	content: '';
	position: absolute;
	width: 26px;
	height: 300px;
	bottom: 0;
	top:0;
	margin:auto;
	right: -29%;
	background: #33d196; 
}
.begin_button {
	float: left;
	width: 140px;
	text-align: center;
	padding: 5px;
	margin-top: 40px;
	color: #33d196;
	font-size: 24px;
	font-weight: bold;
	border: 2px solid #33d196;
	clear: left;
	cursor: pointer;
	transition:0.5s all;
}
.begin_button:hover{
	background:#33d196;
	color:#120a54;
}
.intract_container{
	float: left;
	width: 100%;
	height: 100%;
}
.header_section {
	position: relative;
	float: left;
	width: 100%;
	background:url(../images/welcome_bg.jpg) repeat-y center;
	background-size:cover;
	min-height:100%;
	padding:5%;
	color:#fff;
}
.header_section h1{font-size:48px; font-weight: bold;}
.header_section p{font-size:28px;}
 
.intract_body {
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	min-height:100%;
}
.intract_content { 
	float: left;
	width: 100%; 
	height: 100%;
}
.question{
  float:left; 
  font-size:32px;
  padding:15px 20px 20px 120px;
  background:#753bbd;
  min-height:110px;
  position:relative;
  line-height:1.3;
  color:#fff;
  width:100%;
  margin:0 0 20px 0;
}
.question::before{content:'';background:url(../images/icon_ques.png) no-repeat; background-size:90px; position:absolute; z-index:0; left:10px; top:10px; width:90px; height:90px;}
.question.pad,.question.pad1{padding:30px 0 20px 110px;}
.question::after{
	content:'';
	background:url(../images/icon_lineq.png) no-repeat;
	background-size:100%;
	width:200px;
	height:18px;
	position:absolute;
	bottom:-9px;
	right:20px;
}
.game_section {
	float: left;
	width: 100%;
	height: auto;
	background: url(../images/game_bg.jpg) no-repeat;
	background-size: cover;
	background-position: right center;
	min-height: 100%;
}

.intract_box_contain{
	width:100%;
	height:100%;
}

.question_section {
	float: left;
	width: 100%;
	min-height:100%;
	padding:0 0 50px 0;
}

.question_content {
	float: left;
	width: 100%;
	font-size: 2vw;
}

.question_number {
	float: left;
	width: 20%;
	font-weight: bold;
	padding: 0.5vw 0 0 2.6vw;
}

.question_ui {
	float: left;
	width: 80%;
	margin: 0.5vw 0;
	padding: 0 0 0 0;
	font-style: italic;
	color: #c60000;
	font-size: 1.7vw;
}
.questions_section {
	float: left;
	width: 70%;
	margin: 0.5vw 15% 15px;
}

.question_text {
	float: left;
	width: 80%;
	color: #6c7682;
	font-weight: bold;
	margin: 0.5vw 0;
}

.ques_options {
	float: left;
	width: 100%;
	margin-top: 0.5vw;
}

.ques_options li {
	float: left;
	width: 100%;
	margin:5px 0; 
	font-size: 1.8vw;   
	padding:0 6%;
}

.ques_options li.enable {
	cursor: pointer;
}

.feedbackText {
	float: left;
	padding: 1.8vw;
	display: none;
	font-weight: bold;
} 
 
.gameBtns {
	position: relative;
	float: right;
	margin-right:20px;
}

 
.leftText_align {
	width: 358px !important;
	margin-left: 13px;
}
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 40px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 5px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #e0d0f4;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container input .checkmark {
  background-color: #753bbd;
}

/* When the radio button is checked, add a blue background */
.selected .checkmark{
  background-color: #753bbd;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.selected .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 7px;
	left: 7px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: white;
}
.end_container,.end_2 {
	position: relative;
	float: left;
	width: 100%;
	background:#10069f;
	height: 100%;
	color:#fff;
	overflow-y:auto;
}
.champion{
	float: left;
	width: 100%;
	height: auto;
	background: url(../images/champion.jpg) no-repeat;
	background-size: 82%;
	background-position: left bottom;
	background-attachment:fixed;
	min-height: 100%;
}
.amplifier{
	float: left;
	width: 100%;
	height: auto;
	background: url(../images/amplifier.jpg) no-repeat;
	background-size: 80%;
	background-position: left bottom;
	background-attachment:fixed;
	min-height: 100%;
}
.scholar{
	float: left;
	width: 100%;
	height: auto;
	background: url(../images/scholar.jpg) no-repeat;
	background-size: 82%;
	background-position: right bottom;
	background-attachment:fixed;
	min-height: 100%;
}
.future{
	float: left;
	width: 100%;
	height: auto;
	background: url(../images/future_ally.jpg) no-repeat;
	background-size: 82%;
	background-position: right bottom;
	background-attachment:fixed;
	min-height: 100%;
}
.support{
	float: left;
	width: 100%;
	height: auto;
	background: url(../images/support.jpg) no-repeat;
	background-size: 82%;
	background-position: left bottom;
	background-attachment:fixed;
	min-height: 100%;
}
.right_section{
	float:right;
	width:52%;
	padding:4% 4% 1% 0;
	text-shadow:0 0 5px #000;
}
.scholar .right_section{float:left; padding:4% 1% 1% 3%; width:65%;}
.future .right_section{float:left; padding:4% 1% 1% 3%; width:65%;}
.right_section h1{font-size:48px; font-weight: bold; padding:0 30px 0 0; float:left; width:100%; margin:0 0 30px 0;}
.right_section h1::after{content:''; background:#33d196; position:absolute; width:15%; left:auto; right:0; height:70px;}
.scholar .right_section h1::after{right:0; left:0; width:2%;}
.future .right_section h1::after{right:0; left:0; width:2%;}
.right_section p{font-size:28px;}
.end_2{float:left; width:100%; height:100%; position:relative;}
.wid50{float:left; width:50%;}
.champion.wid50{background-size:730px; background-position:500px 100%; background-attachment: local; padding:0 0 0 50px;}
.champion.wid50 .right_section{width:65%; padding:4% 0 1% 0; float:left;}
.champion.wid50 .right_section h1::after{content:''; background:#33d196; position:absolute; width:2%; left:0; right:auto; height:55px;}
.scholar.wid50{background-size:750px; background-position:-400px 100%; background-attachment: local;}
.scholar.wid50 .right_section{width:65%; padding:4% 4% 1% 0; float:right;}
.scholar.wid50 .right_section h1::after{content:''; background:#33d196; position:absolute; width:2%; left:auto; right:0; height:55px;} 
.future.wid50{background-size:750px; background-position:-400px 100%; background-attachment: local;}
.future.wid50 .right_section{width:65%; padding:4% 4% 1% 0; float:right;}
.future.wid50 .right_section h1::after{content:''; background:#33d196; position:absolute; width:2%; left:auto; right:0; height:55px;} 
.amplifier.wid50{background-size:850px; background-position:550px 100%; background-attachment: local;}
.amplifier.wid50 .right_section{width:65%; padding:4% 0 1% 5%; float:left;}
.amplifier.wid50 .right_section h1::after{content:''; background:#33d196; position:absolute; width:2%; left:0; right:auto; height:55px;}
.amplifier.left.wid50{padding:0 0 0 50px;}
.amplifier.left.wid50 .right_section{padding:4% 0 1% 0;}
.amplifier.right.wid50{background-size:850px; background-position:0 100%; background-attachment: local;}
.amplifier.right.wid50 .right_section{width:65%; padding:4% 4% 1% 0; float:right;}
.amplifier.right.wid50 .right_section h1::after{content:''; background:#33d196; position:absolute; width:2%; left:auto; right:0; height:55px;}
.support.wid50{background-size:750px; background-position:25% 100%; background-attachment: local;}
.support.wid50 .right_section{width:65%; padding:4% 4% 1% 0; float:right;}
.support.wid50 .right_section h1::after{content:''; background:#33d196; position:absolute; width:2%; left:auto; right:0; height:55px;}
.support.left.wid50{background-size:750px; background-position:500px 100%; background-attachment: local;}
.support.left.wid50 .right_section{width:65%; padding:4% 0 1% 5%; float:left;}
.support.left.wid50 .right_section h1::after{content:''; background:#33d196; position:absolute; width:2%; left:0; right:auto; height:55px;}
.wid50 .right_section h1{font-size:40px; margin:0 0 20px 0;}
.wid50 .right_section p{font-size:20px;}
.wid50 .right_section .normalList li{font-size:20px;}
.end_cnt{float:left; width:100%; color:#10069f; background:#33d196; padding:20px 10%; font-size:20px; text-align:center;}
.next_button,.game_submit,.gameNext{
	position: relative;
	float: right;
	margin: 10px 0;
	width: 130px;
	text-align: center;
	padding: 6px 5px;
	background-color: #33d196;
	color: #120a54;
	font-size: 24px;
	font-weight: bold;
	right: 2.3%;
	border: 2px solid transparent;
	cursor: pointer;
	transition: 0.5s all;
	height: 50px;
}
.game_submit, .gameNext { 
	margin:10px 5px;
	cursor: default;
	opacity: 0.5;
}
 
.game_submit.enable,.gameNext.enable {
	opacity: 1;
	cursor: pointer;
}

.next_button:hover,.game_submit.enable:hover,.gameNext.enable:hover {
	color: #33d196;
	border: 2px solid #33d196;
	background-color: transparent;
} 

.ques_num{color:#fff; width:90px; height:90px; text-align:center; position:absolute; top:10px; left:10px; line-height:90px; font-size:40px; font-weight:bold;}
.page_num{background:#33d196; width:250px; text-align:center; color:#fff; margin:0 auto; position:absolute; left:0; right:0; bottom:0; font-size:20px; border-radius:5px 5px 0 0; padding:10px 0; line-height:20px;}
.page_num ul{float:left; width:100%;}
.page_num ul li{float:left; width:20px; height:20px; margin:0 0 0 10px; border-radius:50%; background:rgba(255,255,255,0.8);}
.page_num ul li.active{background:#753bbd;}
.hide{display: none;}

@media (max-width:1827px) { 
.question.pad1{padding:10px 20px 20px 100px;}
}

@media (max-width:1750px) {  
.champion.wid50{background-position:430px 100%; background-size:730px;} 
.support.left.wid50{background-size:750px; background-position:400px 100%;} 
}

@media (max-width:1600px) {  
.champion.wid50{background-position:350px 100%; background-size:730px;} 
.scholar.wid50{background-position:-400px 100%;} 
.future.wid50{background-position:-400px 100%;} 
.amplifier.wid50{background-position:400px 100%;} 
.support.wid50{background-position:45% 100%;}
.support.left.wid50{background-size:750px; background-position:300px 100%;} 
.right_section h1{font-size:40px;}
.right_section h1::after{width:10%; height:60px;}
.right_section p{font-size:22px;}
.question{font-size:28px; padding:15px 20px 20px 100px; min-height:100px;}
.question::before{background-size:80px; width:80px; height:80px;}
.question.pad, .question.pad1{padding:30px 20px 20px 100px;}
.ques_num{width:80px; height:80px; line-height:80px; font-size:36px;}
.normalList li{font-size:22px;}
}

@media (max-width:1462px) {
.question.pad1{padding:20px 20px 20px 100px;}
}


@media (max-width:1400px) {  
.champion.wid50{background-position:300px 100%; background-size:100%; padding:0 0 0 40px;} 
.amplifier.wid50{background-position:350px 100%; background-size:120%;} 
.amplifier.left.wid50{padding:0 0 0 40px;}
.scholar.wid50{background-position:-400px  100%; background-size:100%;} 
.future.wid50{background-position:-400px  100%; background-size:100%;} 
.support.wid50{background-position:45% 100%; background-size:100%;}
.support.left.wid50{background-position:300px 100%; background-size:100%;} 
.right_section h1{font-size:36px;}
.right_section h1::after{width:5%; height:55px;}
.right_section p{font-size:20px;}
.wid50 .right_section h1{font-size:32px;}
.wid50 .right_section p{font-size:18px;}
.wid50 .right_section .normalList li{font-size:18px;}
.champion.wid50 .right_section h1::after{height:45px;} 
.scholar.wid50 .right_section h1::after{height:45px;} 
.future.wid50 .right_section h1::after{height:45px;} 
.amplifier.wid50 .right_section h1::after{height:45px;} 
.support.wid50 .right_section h1::after{height:45px;}
.amplifier.wid50 .right_section{padding:4% 4% 1% 0;}
.champion.wid50 .right_section{padding:4% 4% 1% 0;}
.amplifier.right.wid50 .right_section h1::after{height:45px;}
.normalList li{font-size:20px;}
}

@media (max-width:1366px) {  
  .right_section h1::after{width:10%;}
  .champion.wid50 .right_section{width:80%;}
  .amplifier.wid50 .right_section{width:80%;}
  .scholar.wid50 .right_section{width:80%;}
  .future.wid50 .right_section{width:80%;}
  .support.wid50 .right_section{width:80%;}
  .support.left.wid50 .right_section{width:80%;}
  .amplifier.right.wid50 .right_section{width:80%;}
} 
 
@media (max-width:1280px) {   
  .right_section{width:65%;}
  .scholar .right_section{width:75%;}
  .future .right_section{width:75%;}
  .champion.wid50 .right_section{width:95%;}
  .amplifier.wid50 .right_section{width:95%;}
  .scholar.wid50 .right_section{width:95%;}
  .future.wid50 .right_section{width:95%;}
  .support.wid50 .right_section{width:95%;}
  .support.left.wid50 .right_section{width:95%;}
  .amplifier.right.wid50 .right_section{width:95%;}
  .champion.wid50{background-position:270px 100%; background-size:100%;} 
  .scholar.wid50{background-position:-340px  100%; background-size:100%;}
  .future.wid50{background-position:-340px  100%; background-size:100%;}
  .amplifier.wid50{background-position:300px 100%; background-size:120%;} 
  .support.left.wid50{background-position:200px 100%; background-size:100%;} 
} 

@media (max-width:1130px) {
  .champion.wid50{background-position:220px 100%; background-size:100%;} 
  .scholar.wid50{background-position:-300px  100%; background-size:100%;}
  .future.wid50{background-position:-300px  100%; background-size:100%;}
  .amplifier.wid50{background-position:250px 100%; background-size:120%;}
  .tittle_container{height:350px;}
  .question{font-size:24px;}
} 

@media (max-width:980px) {
  .container{padding:2px 0 0 40px; font-size:20px;}
  .next_button, .game_submit, .gameNext{font-size:20px; padding:8px 5px;}
  .champion.wid50{background-position:120px 100%; background-size:600px; padding:0 0 0 30px;}
  .amplifier.left.wid50{padding:0 0 0 30px;}
  .scholar.wid50{background-position:-300px 100%; background-size:600px;}
  .future.wid50{background-position:-300px 100%; background-size:600px;}
  .support.left.wid50{background-position:100px 100%; background-size:600px;} 
  .amplifier.right.wid50{background-position:0 100%; background-size:700px;}
}

@media (max-width:900px) {
  .tittle_container{height:300px;}
  .begin_tittle{font-size:5.5vw;}
  .header_section h1{font-size:32px;}
  .header_section p{font-size:20px;}
  .right_section h1{font-size:28px;}
  .champion.wid50 .right_section h1::after{height:40px;}
  .scholar.wid50 .right_section h1::after{height:40px;}
  .future.wid50 .right_section h1::after{height:40px;}
  .wid50 .right_section p{font-size:17px;}
  .wid50 .right_section .normalList li{font-size:17px;}
  .champion.wid50{background-position:80px 100%; background-size:600px;}
  .question.pad{padding:20px 20px 20px 100px;}
}

@media (max-width:800px) {
  .page_icon{width: calc(100% - 258px);}
  .tittle_container{width:180px; left:40px;}
  .begin_tittle{font-size:45px;}
}

@media (max-width:768px) {
  .question{font-size:20px; padding:20px 20px 25px 100px;}
  .container{padding:5px 0 0 40px; font-size:17px; margin:10px 0 0 0; line-height:1.3;} 
  .gameBtns{margin:10px 20px 0 0;}
  .question.pad{padding:30px 20px 25px 100px;}
  .right_section h1{font-size:28px;}
  .right_section p{font-size:18px;}
  .scholar .right_section{padding:4% 1% 1% 30px;}
  .scholar .right_section h1::after{width:20px; height:45px;}
  .future .right_section{padding:4% 1% 1% 30px;}
  .future .right_section h1::after{width:20px; height:45px;}
  .champion.wid50{width:100%; padding:0;}
  .amplifier.wid50{width:100%;}
  .scholar.wid50{width:100%;}
  .future.wid50{width:100%;}
  .support.wid50{width:100%;}
  .support.left.wid50{width:100%;}
  .amplifier.left.wid50{padding:0 4%;}
  .champion.wid50,.amplifier.wid50,.support.wid50,.support.left.wid50{background-position:left bottom; background-size:600px; border-bottom:1px solid #33d196;}
  .champion.wid50 .right_section,.amplifier.wid50 .right_section,.support.wid50 .right_section,.support.left.wid50 .right_section{float:right; width:80%;}
  .champion.wid50 .right_section h1::after,.amplifier.wid50 .right_section h1::after,.support.wid50 .right_section h1::after{left:auto; right:0; width:20px;}
  .support.left.wid50 .right_section h1::after{left:auto; right:0; width:20px;}
  .amplifier.right.wid50 .right_section h1::after{left:0; right:auto; width:20px;}
  .amplifier.right.wid50 .right_section{float:left; width:80%; padding:4% 0 1% 30px;}
  .scholar.wid50{background-position:left bottom; background-size:100%;}
  .scholar.wid50 .right_section{float:left; width:80%; padding:4% 0 1% 30px;}
  .scholar.wid50 .right_section h1::after{left:0; right:auto; width:20px;} 
  .future.wid50{background-position:left bottom; background-size:100%;}
  .future.wid50 .right_section{float:left; width:80%; padding:4% 0 1% 30px;}
  .future.wid50 .right_section h1::after{left:0; right:auto; width:20px;} 
}	

@media (max-width:600px) {
  .right_section,.scholar .right_section{width:100%; padding:4% 4% 0 5%;}
  .right_section,.future .right_section{width:100%; padding:4% 4% 0 5%;}
  .right_section h1{margin:0 0 20px 0;}
  .right_section h1::after{height:45px;}
  .champion,.scholar,.support{background-size:600px;}
  .champion,.future,.support{background-size:600px;}
  .amplifier{background-size:700px;}
  .champion.wid50 .right_section,.amplifier.wid50 .right_section,.support.wid50 .right_section{width:100%; padding:4%;}
  .scholar.wid50 .right_section{width:100%; padding:4% 4% 4% 30px;}
  .future.wid50 .right_section{width:100%; padding:4% 4% 4% 30px;}
  .support.left.wid50 .right_section{width:100%; padding:4% 4% 4% 30px;}
  .amplifier.right.wid50 .right_section{width:100%; padding:4% 4% 4% 30px;}
  .wid50 .right_section h1{font-size:28px;}
  .end_cnt{font-size:18px;}
  .page_icon{width:100%;}  
  .tittle_container{left:0; right:0; margin:auto; height:350px; width:260px; padding:20px; background:rgba(16,6,159,0.9);}
  .tittle_container::before{right:-13px; height:260px;}
  .question{min-height:80px; padding:10px 20px 15px 85px;}
  .question::before{background-size:60px; width:60px; height:60px;} 
  .ques_num{width:60px; height:60px; line-height:60px; font-size:32px;}
  .question.pad,.question.pad1{padding:15px 20px 15px 85px;}
}	

@media (max-width:480px) {  
  .question{font-size:17px;}
  .container{font-size:16px;}
  .right_section h1{font-size:24px;}
  .right_section p{font-size:17px;}
  .right_section h1::after{height:40px;}
  .scholar .right_section h1::after{height:40px;}
  .future .right_section h1::after{height:40px;}
  .support.left.wid50 .right_section h1::after{height:40px;}
  .amplifier.right.wid50 .right_section h1::after{height:40px;}
}