@font-face {
    font-family: 'Circular Air';
    src: url('../fonts/CircularAir-Light.eot');
    src: url('../fonts/CircularAir-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CircularAir-Light.woff2') format('woff2'),
        url('../fonts/CircularAir-Light.woff') format('woff'),
        url('../fonts/CircularAir-Light.ttf') format('truetype'),
        url('../fonts/CircularAir-Light.svg#CircularAir-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circular Std Book';
    src: url('../fonts/CircularStd-Book.eot');
    src: url('../fonts/CircularStd-Book.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CircularStd-Book.woff2') format('woff2'),
        url('../fonts/CircularStd-Book.woff') format('woff'),
        url('../fonts/CircularStd-Book.ttf') format('truetype'),
        url('../fonts/CircularStd-Book.svg#CircularStd-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circular Std';
    src: url('../fonts/CircularStd-Medium.eot');
    src: url('../fonts/CircularStd-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/CircularStd-Medium.woff2') format('woff2'),
        url('../fonts/CircularStd-Medium.woff') format('woff'),
        url('../fonts/CircularStd-Medium.ttf') format('truetype'),
        url('../fonts/CircularStd-Medium.svg#CircularStd-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "Circular Std Book";
}

body {
	overflow-y: auto;
}


.medium{
	font-family: "Circular Std";
}

.light{
	font-family: "Circular Air";
}
.container {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.page {
	float: left;
	width: 100%;
	position: relative;
	overflow-x: hidden;
	min-height: 100%;
}

.pg_1 {
	overflow-x: hidden;
	border-bottom: 2px solid #0090DA;

}

.pg_1::after {
	content: '';
	width: 50%;
	height: 150%;
	border-radius: 50%;
	background: #0061A0;
	position: fixed;
	z-index: -1;
	left: 74%;
	top: -10%;
}

.page_1_left {
	float: left;
	width: 50%;
}

.logo {
	float: left;
	width: 100%;
	padding-top: 50px;
	padding-left: 30px;
}

.logo img {
	max-width: 100%;
}

.logo_circ {
	float: left;
	width: 530px;
	height: 590px;
	position: absolute;
	border-radius: 50%;
	margin-left: -250px;
	margin-top: -380px;
	border: 1px solid rgba(0,144,218,0.5);
}

.pg1_text {
	float: left;
	width: 100%;
	padding-top: 140px;
	padding-left: 70px;
	padding-bottom: 20px;
}

.pg1_text p {
	font-size: 34px;
}

.pg1_text p::after {
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #0090DA;
	margin-left: 30px;
	margin-top: -20px;
}

.pg1_text h1 {
	font-size: 49px;
}

.scrl_dwn {
	float: left;
	width: 100%;
	padding-left: 70px;
	min-height: 100px;
}

.scrl_dwn img {
	float: left;
	-webkit-animation: MoveUpDown 1s linear infinite;
}

@-webkit-keyframes MoveUpDown {
    from {
        padding-top: 0px;
    }
    to { 
        padding-top: 10px;
    }
}

.scrl_dwn p {
	float: left;
	padding-left: 10px;
	padding-top: 10px;
	font-size: 12px;
}

.page_1_right {
	float: right;
	width: 50%;
}

.pg1_right_img {
	float: right;
	width: 62%;
	margin-top: 80px;
	margin-right: 100px;
}

.pg1_right_img img {
	width: 100%;
}

.pg1_right_img::before {
	content: '';
	width: 7vw;
	height: 7vw;
	border-radius: 50%;
	background: #0090DA;
	position: absolute;
	top: 75%;
	left: 60%;
}

/*
.pg1_right_img_bg {
	position: absolute;
	width: 60%;
	z-index: -1;
	right: 0;
	top: 0;
	overflow: hidden;
}

.pg1_right_img_bg img {
	width: 100%;
	float: left;
	margin-left: 60%;
	margin-top: -6%;
}
*/

/*
.pg1_btm_line {
	float: left;
	width: 100%;
	height: 2px;
	background: #0090DA;
	position: absolute;
	bottom: 0;
}
*/

.pg_2 {
	background: #fff;
}

.pg2_course_list {
	float: left;
	width: 100%;
	text-align: center;
	padding: 50px 0 30px 0;
	font-size: 36px;
}

.pg2_course_list::before {
	content: '';
	position: absolute;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #0090DA;
	margin-left: -20px;
}

.pg2_modules{
	float: left;
	width: 100%;
}

.module {
	float: left;
	width: 44%;
	margin: 0 3%;
	padding-bottom: 40px;
	min-height: 20vw;
}

.mod_left {
	float: left;
	width: 40%;
}

.mod_img {
	float: left;
	width: 100%;
	overflow: hidden;
	border-radius: 15px;
	height:176px;
}

.mod_img img {
	width: 100%;
	transition: 0.3s;
	-webkit-transition: 0.3s ease; 
	border-radius: 15px;
}

.mod_img img:hover {
	width: 100%;
	transform: scale(1.1);
}

.mod_right {
	float: left;
	width: 60%;
	padding-left: 40px;
}

.mod_text {
	float: left;
	width: 100%;
	font-size: 20px;
	min-height: calc(11.5vw - 46px);
}

.mod_text p {
	padding-bottom: 10px;
}

.start_learn {
	float: left;
	/*background-image: url("../images/btn.png"); background-size: 100%; background-repeat: no-repeat;*/
	width: 190px;
	height: 44px;
	text-align: center; 
	line-height: 1.4;
	color: #fff;
	font-size: 17px;
	cursor: pointer;
	text-transform:uppercase;
	transition:1s all;
	box-shadow: 0 0 20px rgba(0,0,0,0.1) inset; background: rgb(95,195,246); background: linear-gradient(90deg, rgba(95,195,246,1) 0%, rgba(86,186,238,1) 30%, rgba(35,133,191,1) 100%); border-radius:10px;
}

.start_learn a {
	text-decoration: none;
	color: inherit;
	padding: 11px 0 0 0;
	width:100%;
	height:44px;
	float:left;
}
.start_learn.wid2, .start_learn.wid3{
	width:calc(50% - 3px);
	margin: 5px 0 0 0;
	min-width: 110px;
}

.start_learn.wid2{
	float:left;
	min-width:190px;
	clear:both;
	display:block;
}

.start_learn.wid3:nth-child(odd){
	float:right;
}

.start_learn.wid2:nth-child(3){
	float:left;
}

.start_learn.wid3.t{margin-right:0;}
.mod_text.ht{min-height: calc(8.2vw - 56px);}
.start_learn:hover{
	/*background-image: url("../images/btn_hover.png");*/
	box-shadow: 0 0 20px rgba(0,0,0,0.1) inset; background: rgb(213,255,128); background: linear-gradient(90deg, rgba(213,255,128,1) 0%, rgba(208,250,123,1) 30%, rgba(178,220,92,1) 100%); border-radius:10px;
	color: #000;
	transition: 1s all;
}

.mosfet_tit{margin:20px 2% 60px 2%; width:96%; height:2px; background:#0090da; position:relative; float:left;}
.mosfet_tit div{width:320px; text-align:center; background:#fff; margin:0 auto; position:absolute; font-family: "Circular Std Book"; top:-14px; left:0; right:0; font-size:24px; font-weight:bold;}

.hide{display:none;}
.module.mods{width:320px; float:none; margin:0 auto; min-height:260px; clear:both;}
.module.mods .mod_left{width:100%; padding:0;}
.module.mods .mod_right{width:100%; padding:10px 0 0 0;}
.module.mods .mod_right .start_learn, .start_learn.wid{width:100%; background-image:none; box-shadow: 0 0 20px rgba(0,0,0,0.1) inset; background: rgb(95,195,246); background: linear-gradient(90deg, rgba(95,195,246,1) 0%, rgba(86,186,238,1) 30%, rgba(35,133,191,1) 100%); border-radius:10px;}
.module.mods .mod_right .start_learn:hover, .start_learn.wid:hover{background-image:none; box-shadow: 0 0 20px rgba(0,0,0,0.1) inset; background: rgb(213,255,128); background: linear-gradient(90deg, rgba(213,255,128,1) 0%, rgba(208,250,123,1) 30%, rgba(178,220,92,1) 100%); border-radius:10px;}

.overflow{background:rgba(0,0,0,0.8); position:fixed; top:0; left:0; width:100%; height:100%;}

.form_sec,.form_sec.in{width:515px; padding:55px 0 0 0; line-height:1.4; margin:auto; height:540px; position:fixed; font-family: "Circular Std Book"; left:0; right:0; top:0; bottom:0; z-index:1;} 
.form_sec.in{height:250px; padding:0;}
.form_sec .form_area{float:left; width:100%; padding:0 10% 44px 10%; background:#fff; border-radius:40px;}
.form_sec .form_area h1{float:left; width:100%; text-align:center; margin:-55px 0 10px 0; font-size:30px; font-weight:bold;}
.form_sec .form_area p{float:left; width:100%; text-align:center; font-size:30px; margin-bottom:30px;}
.form_sec .form_area p span{font-size:36px; font-weight:bold;}
.form_sec .form_area input[type="password"]{width:100%; font-size:14px; letter-spacing:1px; padding:10px 10px 10px 90px; float:left; margin:5px 0 30px 0; background: url("../images/password_bg.png") no-repeat; background-size:cover; min-height:67px; border:none; }
.form_sec .form_area .try_but{float:none; display:none; transition:0.5s all; position:relative; width:90px; border-radius:30px; transition:0.5s all; background:#fff; color:#35b1e0; padding:7px 10px 6px 10px; text-align:center; top:20px; margin:0 auto; clear:both; cursor:pointer;}
.form_sec .form_area .try_but:hover{background:#1488c0; color:#fff;}
.form_sec .view_but{background: url("../images/login_but_bg.png") repeat-x bottom; text-align:center; float:left; width:80%; margin:0 10%; height:67px; cursor:pointer; border-radius: 0 0 40px 40px;}
.container.hidden{overflow:hidden; scroll:bottom;}
.form_sec .form_area .forget_but {position: relative;float: right; margin:0 0 20px 0; color:#444; font-size:14px; font-style:italic;}
.form_sec .form_area .forget_but:hover{cursor: pointer;text-decoration:underline;}

.form_sec.in.forget .form_area, .form_sec.in.incorr .form_area{background:#35b1e0; border-radius:20px; padding:50px; color:#fff;}
.form_sec.in.forget .form_area p a{color:#fff;}
.form_sec.in .form_area h1{margin:0 0 10px 0;}
.form_sec.in .form_area p{font-size:20px; margin:0;}
.form_sec .form_area .close{position:absolute; right:15px; top:10px; cursor:pointer; font-size:20px; transition:0.5s all;}
.form_sec .form_area .close:hover{color:#bfd7e0;}

.new_window{position: relative;float: left;width: 100%;height: 100%;}


@media (max-width: 1480px){
	.start_learn.wid2,.start_learn.wid3{width:190px; margin:10px 0 0 0; clear:both;}
	.start_learn.wid{width:190px;}
	.start_learn.wid3:nth-child(odd){float:left;}
	.start_learn.wid2:nth-child(3){float:left;}
	.mod_11{clear:both;}
}

@media (max-width: 1320px){
	.module {
		min-height: 20vw;
	}
		.mod_left {
		width: 50%;
	}
		.mod_right {
		width: 50%;
	}

}

@media (max-width:1270px){
	.module {
	min-height: 22vw;
}
	.pg1_text {
	padding-top: 70px;
}
}

@media (max-width: 1120px){
	.module {
	min-height: 24vw;
}
	.mod_text {
	min-height: calc(14.5vw - 46px);
}
.pg1_right_img::before {
	display: none;
}
	
.pg1_text p::after {
	display: none;
}

}

@media (max-width: 1200px){

	.mod_text{
		font-size: 18px;
	}
}

@media (max-width: 1024px){

	.mod_text{
		font-size: 16px;
	}
}

@media (max-width: 1000px){
	.module {
	width: 70%;
	margin: 0 15%;
}
/*
	.start_learn {
	width: 125px;
	padding-top: 7px;
	font-size: 15px;
}
*/
}

@media (max-width: 900px){
	.pg1_text p {
	font-size: 30px;
}
	.pg1_text h1 {
	font-size: 44px;
}
}

@media (max-width: 740px){

	.pg_1::after{
	display: none;
	}
	
	.page_1_left {
	width: 100%;
}
	
	.page_1_right {
	width: 100%;
}
	
.pg1_right_img {
	width: 50%;
	margin-right: 110px;
}
	
.pg1_text {
	padding-top: 100px;
	padding-left: 120px;
	padding-bottom: 50px;
}

	
}

@media (max-width: 768px){
.pg1_text {
	padding-left: 50px;
	padding-top: 60px;
}
	.pg1_right_img {
	width: 70%;
	margin-top: 60px;
}
}

@media (max-width: 600px){
	.module {
	width: 90%;
	margin: 0 5%;
}
}

@media (max-width: 650px){
	.pg1_text {
	padding-left: 70px;
}
.mosfet_tit{margin:20px 1% 60px 1%; width:98%;}
.mosfet_tit div{width:280px; font-size:21px; top:-12px;}
}

@media (max-width: 500px){
.module {
	width: 80%;
	margin: 0 10%;
}
	.mod_left {
	width: 100%;
}
	.mod_right {
	width: 100%;
	padding-left: 0;
}
	.mod_text {
	padding-top: 15px;
}
	.pg2_course_list {
	font-size: 25px;
}
.module.mods .mod_right{padding:0;}	
	
	.logo {
	width: 30%;
	padding-top: 40px;
	padding-left: 30px;
}
	
.logo_circ {
	width: 480px;
	height: 570px;
}
	
	.page_1_left {
	width: 100%;
}
	
	.pg_1::after{
		display: none;
	}
	
	.page_1_right {
	width: 100%;
}
.pg1_right_img {
	width: 60%;
	margin-right: 70px;
	margin-top: 30px;
}
	.scrl_dwn {
	padding-top: 20px;
	padding-left: 40px;
}
	.start_learn.wid2,.start_learn.wid3{width:100%; margin:10px 0 0 0; clear:both;}
	.start_learn.wid,.start_learn{width:100%;}
	.module.mods{width: 80%; margin: 0 10%;}
}

@media (max-width: 550px){
	.pg1_text {
	padding-left: 100px;
}
.form_sec, .form_sec.in{width:96%; margin:auto 2%;}
}

@media(max-width:480px){
.form_sec .form_area{padding:0 5% 44px 5%;}
}

@media(max-width:450px){
	.pg1_text {
	padding-left: 60px;
}
.form_sec.in.forget .form_area, .form_sec.in.incorr .form_area{padding:50px 20px;}
}

@media (max-width: 430px){
	.pg1_text {
	padding-top: 90px;
	padding-left: 50px;
}
	.pg1_right_img {
	margin-right: 90px;
}
}

@media (max-width: 400px){
	.logo {
	width: 27%;
}
	.logo_circ {
	width: 460px;
	height: 540px;
}
	.pg1_text {
	padding-left: 40px;
}
.form_sec, .form_sec.in{height:430px;}	
.form_sec .form_area p{font-size:24px; margin-bottom:10px;}
.form_sec .form_area p span{font-size:28px;}
.form_sec .form_area img{width:80px;}
.form_sec .form_area h1{margin:-45px 0 0 0;}
.form_sec .form_area{padding:0 5% 10px 5%; width:96%; margin:auto 2%; border-radius:30px;}
.form_sec .view_but{border-radius:0 0 40px 40px;}
.form_sec.in .form_area h1{font-size:24px;}
.form_sec.in .form_area p{font-size:16px;}
.form_sec.in.forget .form_area, .form_sec.in.incorr .form_area{padding:50px 30px;}
}

@media (max-width: 380px){
	.pg1_right_img {
	margin-right: 70px;
}
.pg1_text {
	padding-left: 20px;
	padding-top: 50px;
}
}
@media (max-height: 550px){
.form_sec, .form_sec.in{height:430px;}	
.form_sec .form_area p{font-size:24px; margin-bottom:10px;}
.form_sec .form_area p span{font-size:28px;}
.form_sec .form_area img{width:80px;}
.form_sec .form_area h1{margin:-45px 0 0 0;}
.form_sec .form_area{padding:0 5% 10px 5%; width:96%; margin:auto 2%; border-radius:30px;}
.form_sec .view_but{border-radius:0 0 40px 40px;}	
.form_sec.in.forget .form_area, .form_sec.in.incorr .form_area{padding:50px 30px;}
.form_sec.in .form_area h1{font-size:24px;}
.form_sec.in .form_area p{font-size:16px;}
}