@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;
}

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

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;
}
.page_container.bottom_border{
	border-bottom: 8px solid #33d196;
}
.begin{
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
	background: url("../images/page_begin.png") no-repeat;
	background-size: cover;
}
.page_icon {
	position: absolute;
	width: 15%;
	right: 90px;
	top: 77px;
}
.tittle_container {
	position: absolute;
	width: 60%;
	bottom: 15%;
	left: 10%;
	min-height: 300px;
}
.begin_tittle {
	float: left;
	width: 80%;
	color: #fff;
	font-size: 3vw;
	line-height: normal;
	font-weight: bold;
}
.begin_tittle::before {
	content: '';
	position: absolute;
	width: 120px;
	height: 8px;
	bottom: 115%;
	left: 0;
	background-color: #33d196;
	border-radius: 2px;
}
.begin_button {
	float: left;
	width: 140px;
	text-align: center;
	padding: 5px;
	margin-top: 40px;
	color: #33d196;
	font-size: 23px;
	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%;
}
.header_icon {
	position: absolute;
	width: 7%;
	right: 7%;
	top: 15%;
}
.header_text {
	position: absolute;
	width: 70%;
	top: 25%;
	font-size: 1.6vw;
	left: 16%;
}
.intract_body {
	position: relative;
	float: left;
	width: 100%;
	height: calc(100% - 11.6vw);
}
.intract_content {
	position: relative;
	float: left;
	width: 90%;
	margin: 0 5%;
	height: 100%;
}
.intract_content {
	position: relative;
	float: left;
	width: 90%;
	margin: 0 5%;
	height: 100%;
}
.header_line {
	position: relative;
	float: left;
	width: 86%;
	margin: 10px 7%;
}
.intract_box_contain {
	position: relative;
	float: left;
	width: 100%;
	padding:20px 0;
}
.intract_box {
	position: relative;
	float: left;
	width: 20%;
	margin: 10px 2.5%;
	height: 22vw;
	background-color: #120a54;
	padding: 25px;
	min-height: 302px;
	text-align: center;
	color: #fff;
	font-size: 1.6vw;
	display: flex;
	align-content: center;
	-webkit-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
	transform: scale(1);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
}
.intract_box span {
	margin: auto;
}
.intract_box.enable{
	cursor: pointer;
}
.intract_box.visited{
	color: #33d196;
}
.intract_box.enable:hover{
	background-color: #0f059e;
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
}

.intract_box.active{
	background-color: #0f059e;
	transform: scale(1);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
}

.intract_ui {
	position: relative;
	float: left;
	width: 80%;
	margin: 2vw 10% 0;
	text-align: center;
	font-size: 1.6vw;
	color: #0b049d;
}
.next_button {
	position: relative;
	float: right;
	margin: 10px 0;
	width: 100px;
	text-align: center;
	padding: 6px 5px;
	background-color: #33d196;
	color: #120a54;
	font-size: 18px;
	font-weight: bold;
	right: 2.3%;
	border: 2px solid transparent;
	cursor: pointer;
	transition: 0.5s all;
	height: 40px;
}
.next_button:hover{
	color: #33d196;
	border: 2px solid #33d196;
	background-color: transparent;
}
.popup_container {
	position: absolute;
	width: 96%;
	height: 25.5vw;
	margin: 0 2%;
	min-height: 343px;
}
.popup_box {
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
	background-color: #dbdbdb;
	border-bottom: 8px solid #10069f;
	overflow: hidden;
}
.popup_image {
	position: relative;
	float: left;
	width: 30%;
	background: url("../images/popup_img1.png") no-repeat;
	background-position: top;
	background-size: cover;
	height: 100%;
}
.popup_image.img2{
	background: url("../images/popup_img2.png") no-repeat;
	background-position: top;
	background-size: cover;
	height: 100%;
}
.popup_image.img3{
	background: url("../images/popup_img3.png") no-repeat;
	background-position: top;
	background-size: cover;
	height: 100%;
}
.popup_image.img4{
	background: url("../images/popup_img4.png") no-repeat;
	background-position: top;
	background-size: cover;
	height: 100%;
}
.popup_content {
	position: relative;
	float: left;
	width: 70%;
	height: 100%;
	padding: 0 5%;
	font-size: 1.3vw;
	display: flex;
	align-items: center;
}
.popup_content span{
	margin: auto;
}
.close_button {
	position: absolute;
	width: 25px;
	border-radius: 50%;
	background-color: #000;
	right: 1%;
	top: 3%;
	color: #fff;
	text-align: center;
	font-size: 16px;
	display: flex;
	align-content: center;
	height: 25px;
	cursor: pointer;
	z-index: 2;
	transition:0.5s all;
}
.close_button:hover{
	background: red;
}
.close_button span{
	margin: auto;
}
.end_container {
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
}
.end_content {
	position: relative;
	float: left;
	width: 90%;
	margin: 10% 5% 0;
	background-color: #0f059e;
	min-height: 620px;
}
.images_container {
	position: relative;
	float: left;
	width: 100%;
	margin-top: -10%;
	padding: 0 2%;
}
.box_images {
	position: relative;
	float: left;
	width: 23%;
	margin: 0 1%;
}
.ended_txt {
	position: relative;
	float: left;
	width: 100%;
	padding: 0 3%;
	font-size: 1.2vw;
	margin: 2% auto;
	color: #fff;
}
.header_ques{display:none; width:70px; margin:2%; float:left;}
.line{display:none; width:96%; background:#3c3c3c; height:1px; position:relative; float:left; margin:5px 3% 0 3%;}
.line::after{content:''; width:0px; height:0px; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:10px solid #3c3c3c; position:absolute; right:0; top:-4px;}
.hide{display: none;}

@media (max-width:1600px) { 
  .page_icon{width:200px;}
  .begin_tittle{font-size:38px;}
  .tittle_container {min-height: 250px;}
  .end_content{min-height:500px;}
}

@media (max-width:1366px) { 
  .tittle_container{width:70%;}
  .intract_box{height:20vw; font-size:22px;}
  .header_text{font-size:22px;}
  .intract_ui{font-size:22px;}
  .header_icon{width:8%;}
  .ended_txt{font-size:20px;}
  .end_content {min-height: 540px;}	
  .tittle_container {min-height: 210px;}	
}

@media (max-width:1280px) { 
  .intract_box{width:22%; margin:10px 1.5%;}
  .header_line{width:94%; margin:10px 3%;}
  .intract_content{width:96%; margin:0 2%;}
  .intract_ui{width:96%; margin:20px 2% 0;}
  .header_text{left:14%;}
  .popup_container{width:98%; margin:0 1%}
  .popup_content{font-size:18px;}
  .header_icon{right:3%;}
  .header_text{width:75%;}
}

@media (max-width:1100px) { 
	.header_text{top:20%;}
	.popup_container{height:35vw;}
	.end_content{width:94%; margin:10% 3% 0;}
}

@media (max-width:1024px) { 
  .tittle_container{width:85%;}
  .begin_tittle{width:100%;}  
  .popup_content{font-size:17px;}
  .close_button{line-height:16px;}
  .header_text,.intract_box,.intract_ui{font-size:20px;}
  .intract_box{width:23%; margin:10px 1%; padding:20px; height:18vw;}
  .close_button span{margin:3px auto;}
  .ended_txt{font-size:18px;}
}

@media (max-width:900px) {
  .header_text,.intract_box,.intract_ui{font-size:18px;} 
  .ended_txt{font-size:17px;}
  .popup_content{line-height:1.3;}
}

@media (max-width:800px) {
  .header_text{font-size:17px;} 
  .intract_box{width:46%; margin:10px 2%; padding:20px; height:auto; min-height:160px;}
  .header_ques{display:block;}
  .header_line{display:none;}
  .header_icon{width:80px;} 
  .header_text{width:calc(100% - 200px); left:0; position:relative; float:left; top:20px;}
  .line{display:block;}
  .popup_container{margin:2% 1% 0 1%;}
  .popup_container {height: 50%;}		
}

@media (max-width:670px) {
	
  .header_text{top:10px;} 
  .line{width:95%;}
  .popup_container{height:auto; margin: 3% 1% 0 1%;}
  .popup_box{min-height:400px;}
  .header_text, .intract_box, .intract_ui{font-size:17px;}
  .ended_txt{font-size:16px;}
  .intract_box{min-height:180px;}
  .popup_image,.popup_image.img2,.popup_image.img3,.popup_image.img4{float:none; width:200px; height: 200px; margin: 10px auto;}
  .popup_content{font-size:16px; width:100%; padding:0 3% 3% 3%;}
  .header_text{line-height:1.3; margin:0 0 10px 0;}
}

@media (max-width:600px) { 
  .begin_tittle{font-size:30px;}
  .popup_image,.popup_image.img2,.popup_image.img3,.popup_image.img4{width:160px; height:180px;}
  .box_images{width:44%; margin:2% 3%;}
}

@media (max-width:530px) { 
  .popup_content{font-size:14px;} 
  .intract_box, .intract_ui{font-size:16px;}
  .ended_txt{font-size:15px;}
  .header_text{font-size:15px; min-height:80px;}
  .intract_box{min-height:90px; width:94%; margin:1% 3%;}
  .intract_box:hover{transform: scale(1.05); -webkit-transform:scale(1.05); -ms-transform:scale(1.05);}
  .header_icon{width:70px;}
  .header_ques{width:60px;}
  .header_text{width: calc(100% - 170px);}
}

@media (max-width:420px) { 
  .popup_content{font-size:13px;} 
  .intract_box, .intract_ui{font-size:15px;}
  .header_text{font-size:14px; min-height:90px;}
  .ended_txt{font-size:14px;}
}