@media(min-width:768px){
::-webkit-scrollbar{width:10px;height:6px}
::-webkit-scrollbar-track{background-color:#eee}
::-webkit-scrollbar-thumb{background-color:#3a3a3a}
::-webkit-scrollbar-thumb:hover{background-color:#444}

.custscroll::-webkit-scrollbar,.custscroll::-webkit-scrollbar-thumb{border-radius:13px;width:6px;height:6px;background-clip:padding-box;background:transparent}
.custscroll::-webkit-scrollbar-track{background:transparent}
.custscroll:hover::-webkit-scrollbar-thumb{background-color:#ccc}
.custscroll::-webkit-scrollbar-thumb:hover{background-color:#999}


.custscrollA::-webkit-scrollbar{border-radius:13px;width:6px;height:6px;background-clip:padding-box;background:transparent}
.custscrollA::-webkit-scrollbar-track{background:transparent}
.custscrollA::-webkit-scrollbar-thumb{background-color:#ccc;border-radius: 6px;}
.custscrollA::-webkit-scrollbar-thumb:hover{background-color:#999}

}

h1{
	font-weight: 700;
}
header{
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 550px);
	z-index: 999;
}
header .logo{
	width: 360px;
	padding: 10px 0;
}
.homebtn{
	display: block;
	margin-left: auto;
	margin-right: 1rem;
	margin-top: -2rem;
    z-index: 1;
    background-color: #FF9800;
    color: #fff;
    width: 100px;
    height: 40px;
    line-height: 40px;
    border-radius: .3rem;
    text-align: center;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}
.homebtn:hover{
	color: #fff;
    background-color: #df8500;
    text-decoration: none;
}
.applymain{
	background: #fff;
	display: flex;
	flex-flow: wrap;
}
.applymain .bgcol{
	height: 100vh;
	width: calc(100% - 550px);
	background: #0aaaf3;
	background-position: center;
	background-size: cover;
	position: relative;
}
.applymain .bgcol:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 250px;
	background: rgb(79,172,254);
	background: linear-gradient(180deg, rgba(79,172,254,0) 0%, rgba(0,0,0,0.5) 100%);
}
.applymain .formcol{
	width: 550px;
    height: 100vh;
    overflow: auto;
}

.infobox{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 550px;
    background-color: rgb(0 119 189 / 0.8);
    color: #fff;
    width: 360px;
    padding: 20px 15px;
    z-index: 1;
    display: flex;
    flex-flow: column;
    align-items: center;
    box-shadow: 20px 0px 20px -25px rgb(0 0 0 / 25%);
}
.infomain{
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 300px;
    max-height: 350px;
    overflow-y: auto;
}
.infobox h2{
	font-size: 1.3rem;
}
.infobox p{
	font-size: .875rem;
	color: #f7f7f7;
}
.mylist{
	display: flex;
	flex-flow: column;
	font-size: .875rem;
	color: #f7f7f7;
	padding: 0;
}
.mylist li{
	position: relative;
	padding-left: 15px;
	list-style-type: none;
}
.mylist li:before{
	content: '\f105';
	font-family: 'Font Awesome 5 Free';
	font-weight: 600;
	position: absolute;
	left: 0;
	color: #9ae8ff;
    font-size: .8rem;
    margin-top: 2px;
}
.morebtn{
	font-size: .875rem;
	font-family: 'poppinsmedium';
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    background-color: rgb(255 255 255 / 25%);
    padding: 5px 15px;
    border-radius: 0.3rem;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}
.morebtn i{
	margin-left: 5px;
}
.morebtn:hover{
	color: #fff;
	text-decoration: none;
    background-color: rgb(255 255 255 / 40%);
}

.caption{
	color: #607d8b;
}


.form-item{
    position: relative;
    margin-bottom: 20px;
}
.myform input,
.myform textarea,
.myform select{
	width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: .875rem;
	padding: 0 15px;
	border-radius: .3rem;
	border: 1px solid #ddd;
	outline: 0;
	color: #666;
	display: flex;
}
.myform textarea{
	height: 70px;
	line-height: normal;
	padding: 10px 15px;
}
.myform input[type="radio"],
.myform input[type="checkbox"]{
	height: auto;
	width: auto;
}

.form-item input:focus,
.form-item textarea:focus,
.form-item select:focus{
  border-color: #aaa;
}
.form-item label{
    position: absolute;
    cursor: text;
    z-index: 2;
    top: 9px;
    left: 15px;
    margin-bottom: 0;
    font-size: .875rem;
    background-color: #fff;
    padding: 0 5px;
    color: #999;
    transition: all .3s ease;
}
.form-item input:focus + label,
.form-item input:valid + label,
.form-item textarea:focus + label,
.form-item textarea:valid + label,
.form-item select:focus + label,
.form-item select:valid + label{
    font-size: 12px;
    top: -8px;
}
.form-item input:focus + label
.form-item textarea:focus + label,
.form-item select:focus + label,{
    color: #da3515;
}
.myform .form-check{
	display: inline-flex;
	margin-right: 10px;
}
.myform p{
	margin-bottom: 5px;
	color: #666;
}
.myform .form-check-label{
	font-size: .8rem;
    color: #666;
}
.submitbtn{
	background-color: #00a1ff;
	color: #fff;
	padding: 12px 20px;
	border-radius: .3rem;
	font-weight: 500;
    width: 100%;
    display: block;
    text-align: center;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
}
.submitbtn:hover{
	text-decoration: none;
	color: #fff;
	background-color: #0e6d99;
}

.apy_dialog
{
    width: 100%;
}
    
.apy_image{
    width : 100%;
}


footer{
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(100% - 550px);
	color: #f7f7f7;
	font-size: .875rem;
}
footer .ftlist{
	display: flex;
	flex-flow: wrap;
	padding: 0;
	list-style-type: none;
    border-bottom: 1px solid rgb(255 255 255 / 20%);
    padding-bottom: 10px;
}
footer .ftlist li{
	margin-right: 15px;
}
footer .ftlist li a{
	color:#f7f7f7;
}
footer .power-col{
	max-width: 220px;
	text-align: right;
}
footer .power-col a{
	color: #f7f7f7;
	text-decoration: none;
}


.mob-homebtn{    display: block; float: right;
    z-index: 1;
    background-color: #FF9800;
    color: #fff;
    width: 90px;
    height: 37px;
    line-height: 35px;
    border-radius: 0.3rem;
    text-align: center;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    text-decoration: none;
}

.btn-cont{text-align: right!important;
    float: right;
    display: block;
    width: 100%; margin-bottom: 5px; padding: 5px 15px 0px}

.clear-fix{clear: both; float: none;}



@media (min-width: 768px) and (max-width: 991px){
.applymain .formcol { width: 365px !important;}
.applymain .bgcol{width: calc(100% - 365px) !important;}
.infobox{ right: 365px !important;}
footer{width: calc(100% - 365px);}
footer .ftlist, .copy-col, .power-col{font-size: 10px;}
footer .ftlist li {margin-right: 8px;}
.col.copy-col, footer .col.power-col{width: 100% !important; max-width: 100% !important;flex-basis: auto;text-align: center;}
.col.copy-col p{margin-bottom: 0px}
footer .ftlist{margin-bottom: 5px}
.infobox h2 { font-size: 1.2rem;}
.morebtn { font-size: .75rem;}
h1 {font-size: 1.5rem;}
}

@media (min-width: 768px){
.mob-homebtn{display: none;}	
.apply-img-mob{display: none;}
.apply-mob-div{display: none;}
}

@media (max-width: 767px){
/*.applymain .formcol{width: 100%; position: absolute; top:10px; }*/
footer .row:nth-child(2){background: #ededed; padding-top: 8px}
.power-col p{margin-bottom: 8px}
.apply-mob-div{display: block;width: 100%;}
h1 {font-size: 1.5rem;}
.mob-homebtn{display: block;}
.applymain .formcol{width: 100%; height: auto}
.infobox h2{color: #068edd}
.morebtn{background-color: #00a1ff;}
.mylist li:before{color: #00a1ff;}
.infobox p,.mylist{color: #333}
.infobox {width: 100%;margin-bottom: 30px; background-color: white;
    position: static;
    top: 0px;
    transform: translateY(0%);
    right: auto; padding-right: 15px !important}
.applymain .bgcol, footer{ width: 100%;}
.infomain{height:auto; max-height: inherit !important; width: 100%;}
header, footer{position: static;}
header{background: #0697ec; width: 100%}
.bgcol{display: none;}
footer, footer .power-col a{color: #7f7f7f}
.formcol .homebtn{display: none;}
footer{ margin-top: 30px;}
.col.copy-col, .col.power-col{max-width: 100% !important; width: 100% !important; flex-basis: auto; text-align: center;}
.col.copy-col p{margin-bottom: 5px}
footer .ftlist{ align-items: center; justify-content: center;}
footer .ftlist li {margin-right: 6px; margin-left: 6px}
header .logo{margin: 0 auto; }
.formcol{display: none;}
.apply-tabs{border-bottom: 1px solid #85d2fe; position: relative;}
.apply-tabs li
{display: inline-block;
    width: 50%;
    height: 43px;
    text-align: center;
    background: #ffffff; 
    margin: 0;
    box-sizing: border-box;
    float: left;
    line-height: 43px;
    font-weight: 600;
    font-size: 12px;}

.apply-tabs:after{content: ''; width:1px; height: 100%; background: #85d2fe; position: absolute;left: 50%}
.apply-tabs li a{color: #104564; text-decoration: none; display: block;background: rgb(214 240 255 / 80%)}
.apply-tabs li a.active{background: rgb(183 229 255 / 80%)}

.apply-img-mob{height: 200px;display: block;
    object-fit: cover;
    width: 100%;
    background-size: cover;
    background-position: center;}

.infobox{padding: 5px 15px}
.apply-content{padding: 20px 0px;}

}



@media (max-width: 575px){
header .logo{ width: 300px;}
.morebtn { font-size: .75rem;}
h1 {font-size: 1.5rem;}
footer{font-size: 12px;}
footer .ftlist{margin-bottom: 5px;}
.mob-homebtn{ width: 80px;  height: 32px;line-height: 30px; font-size: 13px;}
.apply-img-mob{height: 150px;}
}


@media (max-width: 425px){
header .logo{ width: 248px;}
}

@media (max-width: 575px){
    .apy_image{
        width : 90%;
    }
    .apy_dialog{
        
        width: 100%;
    }
}