.f12 {font-size: 12px; line-height: 16px;}
.f17 {font-size: 17px; line-height: 20px;}
.f16 {font-size: 16px; line-height: 24px;}
.f18 {font-size: 18px; line-height: 26px;}
.f20 {font-size: 20px; line-height: 30px;}
.f22 {font-size: 22px; line-height: 30px;}
.f23 {font-size: 23px; line-height: 30px;}
.f25 {font-size: 25px;}
.f28 {font-size: 28px; line-height: 40px;}
.f30 {font-size: 30px; line-height: 40px;}

.mtop10 {margin-top: 30px;}
.mtop20 {margin-top: 20px;}
.mtop30 {margin-top: 30px;}
.mtop50 {margin-top: 50px;}
.mtop70 {margin-top: 70px;}
.mtop90 {margin-top: 90px;}

.ocolor {color: #ffff00;}
.intro {text-align: center; line-height: 40px;}
.gheadline {height: 50px; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-left-radius:25px;  border-bottom-right-radius: 25px; background-color: #e37525; padding: 0 5px; max-width: 300px; margin: 0 auto;}
.midhead {height: 50px; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-left-radius:25px;  border-bottom-right-radius: 25px; background-color: #ffffff; width: 100%; padding: 0 8px;}
.inhead  {height: 50px; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-left-radius:25px;  border-bottom-right-radius: 25px; width: 100%; margin: 0 auto; background-color: #005bac; text-align: center; line-height: 50px; margin-top: 50px;}

.sbox-area {display: flex; flex-wrap: wrap;}
.sbox {display: inline-block; padding:0px 15px; width: 266px;  cursor: pointer; margin-top: 30px;}
.boxs { padding: 0px;  }
.bicon {text-align: center; margin-top: 10px;}
.bicon img {width: 130px; transition: transform .2s;}
.bword {text-align: center; color: #005bac; margin-top: 15px; font-weight: bold;}
.bhight {height: 40px;}
.bhighd {height: 70px;}
.arro {text-align: center;}
.arro img {width: 20px;}
#container  img {transition: transform 0s;   /* smoother zoom */}
#container:hover img {transition: all 3s; transform: rotateY(360deg); }
.pointnew {margin-top: 10px; text-align: center;}
.high1 {min-height: 170px;}
.high2 {min-height: 50px;}
.pointnew li::before {content: "•"; color: #005bac;}
.pointnew li::before {content: "•";color: #005bac; display: inline-block; width: 1em; margin-left: -1em}

.winbox {width: 100%; background-color: #fff;  border-radius: 40px; box-shadow:0 0 10px rgba(0, 0, 0, 0.5);  padding-bottom: 20px;}
.inwinbox:after{display:table; clear:both; content:"";}
.inwinbox {padding: 20px; width: 100%; margin: 0 auto; }
.oicon img {width: 90px;}
.ohead {font-weight: bold; text-align: center; color:#005bac; }
.otable {margin-top: 10px;  border-collapse: collapse; width: 100%;}
.otable .td-50 {width: 50%;}
.otable td {padding: 2px 2px;}
.otable td:first-child {text-align: right;}
.sampleword {text-align: center;}

.gbox {border: 1px solid #949598; padding: 20px; }

.gbg {background-color: #e9eef3; border-radius: 40px; padding: 20px;}
.gheadlinebg {height: 50px; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-left-radius:25px;  border-bottom-right-radius: 25px; background-color: #e37525; padding: 0 5px; max-width: 300px; margin: 0 auto;}
.midheadbg {height: 50px; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-left-radius:25px;  border-bottom-right-radius: 25px; background-color: #e9eef3; width: 100%; padding: 0 8px;}
.inheadbg  {height: 50px; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-left-radius:25px;  border-bottom-right-radius: 25px; width: 100%; margin: 0 auto; background-color: #005bac; text-align: center; line-height: 50px;}

.gheadline_long {height: 50px; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-left-radius:25px;  border-bottom-right-radius: 25px; background-color: #e37525; padding: 0 5px; max-width: 360px; margin: 0 auto;}
.midhead_long {height: 50px; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-left-radius:25px;  border-bottom-right-radius: 25px; background-color: #ffffff; width: 100%; padding: 0 8px;}
.inhead_long  {height: 50px; border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-left-radius:25px;  border-bottom-right-radius: 25px; width: 100%; margin: 0 auto; background-color: #005bac; text-align: center; line-height: 50px; margin-top: 50px;}

.other-area:after{display:table; clear:both; content:"";}
.other-area {margin-top: 30px;}
.actbtn {text-align: center; margin-top: 30px;}

.btn3 { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; padding: 13px 20px; height: 70px; line-height: 40px; font-weight: bold; display: inline-block; background-color: #ffffff; border: 3px solid #005bac; color: #005bac; min-width: 100px; text-align: center;}
.btn3:hover {color: #ffffff; background-color: #005bac; }
.btn3 img {float: right; margin-left: 0px; width: 40px; margin-top: 0px;}

.btnbox3 {-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 13px; padding: 15px 10px; background-color: #ffffff; border: 3px solid #005bac; color: #005bac; margin-top: 20px; font-size: 22px; text-align: center; font-weight: bold; width: auto; height: 70px;}
.btnbox3img {float: right; margin-right: 10px; width: 40px; margin-top: 0px;}

.btnbox4 {-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; padding: 10px 15px; background-color: #ffffff; border: 3px solid #005bac; color: #005bac; margin-top: 20px; font-size: 22px; text-align: left; font-weight: bold; width: 530px;}
.btnbox4img {float: right; margin-left: 10px; width: 40px; margin-top: 10px;}

.btn5 { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; padding: 13px 20px; height: 70px; line-height: 40px; font-weight: bold; display: inline-block; background-color: #ffffff; border: 3px solid #005bac; color: #005bac; min-width: 100px; text-align: center;}
.btn5:hover {color: #ffffff; background-color: #005bac; }
.btn5 img {float: right; margin-left: 10px; width: 40px; margin-top: 0px;}	


.btn6 { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; padding: 13px 20px; height: 70px; line-height: 40px; font-weight: bold; display: inline-block; background-color: #005bac;  color: #ffffff; min-width: 100px; text-align: center;}
.btn6:hover {color: #ffffff; background-color: #00388e; }
.btn6 img {float: right; margin-left: 10px; width: 40px; margin-top: 0px;}


.btnbox6 {-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; padding: 10px 10px; background-color: #005bac; color: #ffffff; margin-top: 20px; font-size: 22px; line-height: 38px; text-align: left; font-weight: bold; text-align: center; width:480px;}
.btnbox6img {float: right; margin-right: 10px; width: 40px; margin-top: 5px;}


.actbtn1 {text-align: left; margin-top: 15px;}
.oword {color: #005bac; font-weight: bold; }
.otherpic {width: 200px; float: left;}
.otherpic img {width: 170px; }
.otherdec {padding-left: 220px;}


.infoarea {margin-top: 30px; text-align: center;}
.btn4:first-child {margin-right: 10px;}
.btn4:last-child {margin-left: 10px;}
.btn4 { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 5px 5px; line-height:60px; font-weight: bold; display: inline-block; background-color: #e5eff6;  color: #005bac;  text-align: center; height: 75px; min-width: 250px; }
.btn4:hover {color: #ffffff; background-color: #005bac; }
.btn4 img {height: 65px; float: left;  margin-right: 10px;}

.float-cfa{
background-color: #efefef;
position: fixed;
bottom: 0;
width: 100%;
z-index: 121;
}
.cfa-row{
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.cfa-col1{ 
padding: 0;
}
.cfa-col2{
padding: 0px 20px 10px;
font-size: 20px;
line-height: 140%;
}
.more-btn{
padding: 5px 15px;
display: inline-block;
font-size: 18px;
font-weight: bold;
}
@media (max-width: 576px){
.cfa-row{
align-items: flex-start;
}
.cfa-col1{
display: none;
}
.cfa-col2{
padding: 20px 30px 20px 10px;
font-size: 16px;
}
.more-btn{
font-size: 16px;
}
}

.new-blue{ line-height: 35px;
color: #0066b3;
}

.tick {flex-wrap: wrap; width: 100%; text-align: center; margin-bottom: 30px;}

.tick img {width: 35px; margin-top: -12px; margin-left: 5px; margin-right: 5px;}
.tickins { color: #e37525; font-weight: bold;}

.desktop {display: block;}
.mobile {display: none;}

.act-area {display: flex; flex-wrap: wrap;}
.act-area {margin-top: 50px;}
.act-col {width: 33%; color: #005bac; font-weight: bold; text-align: center;}
.act-col:last-child {width: 100%; color: #005bac; font-weight: bold; margin-top: 30px; text-align: center;}

.act-colimg {width: 60px; margin-right: 5px; margin-top: -20px;}
.act-col a {color: #0066b3;}
.act-col a:hover{color: #003e8b;} 

.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.horizontalcssmenu ul li{
margin: 0;
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li {
display: block;
width: 253px; /*Width of top level menu link items*/
padding: 2px 8px;
border-left-width: 0;
text-decoration: none;
}
.horizontalcssmenu ul li img {width: 16px; margin-top: -2px; margin-right: 10px;}


.pointarea { flex-wrap: wrap; text-align: center;}
.p-col {white-space: nowrap; line-height: 30px;}
.p-col img {width: 16px; margin-top: -2px; margin-right: 10px; margin-left: 10px;}


 @media screen and (max-width: 1023px) {
.btnbox3 {-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 13px; padding: 15px 10px; background-color: #ffffff; border: 3px solid #005bac; color: #005bac; font-size: 22px; text-align: center; font-weight: bold; width:500px; height: 90px; margin: 0 auto; margin-top: 20px; }
.btnbox3img {float: right; margin-right: 10px; width: 40px; margin-top: 15px;}	 
	 
.btnbox4 {-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; padding: 10px 15px; background-color: #ffffff; border: 3px solid #005bac; color: #005bac; margin-top: 20px; font-size: 22px; text-align: left; font-weight: bold; width: 480px;}
.btnbox4img {float: right; margin-left: 10px; width: 40px; margin-top: 15px;}
	 
.inwinbox {padding: 20px; width: 80%; margin: 0 auto; }	 
.sbox { width: 240px;}
.tickins {width: 100%; text-align: center; color: #e37525; font-weight: bold;}
.act-col {width: 33.33%; color: #005bac; font-weight: bold; text-align: center; }
.act-col:last-child {width: 100%; color: #005bac; font-weight: bold; text-align: center; margin-top: 40px;}	 
}

 @media screen and (max-width: 970px) {
.inwinbox {padding: 20px; width: 88%; margin: 0 auto; }
.sbox-area {margin: 0 auto;}	 
.desktop {display: none;}
.mobile {display: block;}	 
}

 @media screen and (max-width: 700px) {
.inwinbox {padding: 20px; width: 100%; margin: 0 auto; } 
}

.desktop1 {display: block;}
.mobile1 {display: none;}

 @media screen and (max-width: 750px) {
.desktop1 {display: none;}
.mobile1 {display: block;}	 
.sbox {display: inline-block; padding:0px 10px; width: 50%;  cursor: pointer; margin-top: 30px;}
.bicon img {width: 80px; transition: transform .2s;}
.bword {text-align: center; color: #005bac; margin-top: 15px; font-weight: bold;  height: 100px;}
.tickins {width: 100%; text-align: center; color: #e37525; font-weight: bold; }

.btn3 { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; padding: 13px 20px; height: 90px; line-height: 40px; font-weight: bold; display: inline-block; background-color: #ffffff; border: 3px solid #005bac; color: #005bac; min-width: 100px; text-align: center; line-height: 30px;}	
.btn3 img {float: right; margin-left: 10px; margin-top: 10px; }	

.btn6 { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; padding: 13px 20px; height: 90px; line-height: 40px; font-weight: bold; display: inline-block; background-color: #005bac;  color: #ffffff; min-width: 100px; text-align: center; line-height: 30px;}
.btn6 img {float: right; margin-left: 10px; margin-top: 10px; }	
	 
.otherpic {width: 160px; float: left;}
.otherpic img {width: 150px; }
.otherdec {padding-left: 160px;}
.btn4:first-child {margin-right: 0px;}
.btn4:last-child {margin-left: 0px; margin-top: 20px;}
.btn4 { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 5px 5px; line-height:60px; font-weight: bold; display: inline-block; background-color: #e5eff6;  color: #005bac;  text-align: center; height: 75px; min-width: 250px; }
.btn4:hover {color: #ffffff; background-color: #005bac; }
.btn4 img {height: 65px; float: left; margin-right: 10px;}	 
}

 @media screen and (max-width: 730px) {
.otherpic {width: 100%; float: none; text-align: center;}
.otherpic img {width: 150px; }
.otherdec {padding-left: 0px;}
.btnbox4 {-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; padding: 10px 15px; background-color: #ffffff; border: 3px solid #005bac; color: #005bac;  font-size: 22px; text-align: center; font-weight: bold; width: 480px; margin: 0 auto; margin-top: 20px;}
.btnbox4img {float: right; margin-left: 10px; width: 40px; margin-top: 15px;}	 
}


 @media screen and (max-width: 600px) {
.inwinbox {padding: 20px; width: 280px; margin: 0 auto; } 	 
}
 @media screen and (max-width: 500px) {


.actbtn1 {text-align: center; margin-top: 15px;}
.act-colimg {width: 40px; margin-right: 5px; margin-top: -20px;}	 
.act-col {width: 100%; color: #005bac; text-align: center; font-weight: bold;}
.act-col:nth-child(2) {margin-top: 40px;}
.act-col:nth-child(3) {margin-top: 40px;} 	 
.act-col:last-child {width: 100%; color: #005bac; font-weight: bold; text-align: center; margin-top: 40px;}	 	 
}

.sampleword:after{display:table; clear:both; content:"";}
.sleft {width: 45%; float: left; text-align: center;}
.sright {width: 55%; float: left; text-align: center;}

.samplearea:after{display:table; clear:both; content:"";}
.samplearea {padding: 40px 20px 30px; background-color: #efefef; margin-top: 15px;}
.sleftimg {width: 45%; float: left; text-align: center;}
.srightimg {width: 55%; float: left; text-align: center; margin-top: -20px;}
.insrightimg:after{display:table; clear:both; content:"";}
.bbox {background-color: #005bac; padding: 20px 0px 0 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; height: 120px; color: #ffffff; width: 320px; font-weight: bold;}

#bboxr {position: relative;}
#bboxr::after {
	position: absolute;
	right: -60px;
	width: 60px;
	top:-20px;
	content: url("../images/principal_protected_deposit/left_arr.svg");}

.cleft {width: 48%; float: left; text-align: center;  font-weight: bold;}
.cleft b {color: #e37525; }
.mid {width: 4%; float: left; font-size: 36px; font-weight: bold;color: #005bac; text-align: center; padding-top: 20px;}
.cleft img {width: 60px; margin-bottom: 10px;}
.totalbox {background-color: #e37525; border-radius: 20px; font-weight: bold; text-align: center; color: #ffffff;padding: 10px; max-width:450px; margin: 0 auto;  margin-top: 10px; }
.shead {text-align: center; margin-top: 20px; margin-bottom: 20px;}

.sdesktop {display: block;}
.smobile {display: none;}
.barr {display: none;}
 @media screen and (max-width: 1023px) {
.sleftimg {width: 42%; float: left; text-align: center;}
.srightimg {width: 58%; float: left; text-align: center; margin-top: -20px;}	 
.sdesktop {display: none;}
.smobile {display: block;}		 
.bbox {background-color: #005bac; padding: 5px 0px 0 10px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; height: 120px; color: #ffffff; width: 220px;}	 
.sleft {width: 50%; float: left; text-align: center;}
.sright {width: 50%; float: left; text-align: center;}	
#bboxr::after {
	position: absolute;
	right: -55px;
	width: 55px;
	top:-15px;
	content: url("../images/principal_protected_deposit/left_arr.svg");}
}
.hword {display: none;}
 @media screen and (max-width: 768px) {
.sleftimg {width: 100%; float: none; text-align: center;}
.srightimg {width: 100%; float: none; text-align: center; margin-top: 20px;}
.sampleword {display: none;}
#bboxr::after { display: none;}
.bbox {background-color: #005bac; padding: 10px; border-top-left-radius: 20px; border-bottom-left-radius: 0px;  border-top-right-radius: 20px; border-bottom-right-radius: 0px; height: auto; color: #ffffff; text-align: left; width: 100%; text-align: center;}
.hword {margin-bottom: 10px; display: block;} 
.barr {display: block; text-align: center;}
.barr img {width: 100px;}
.samplearea {padding: 20px; background-color: #efefef; margin-top: 15px;}	 
}

 @media screen and (max-width: 576px) {
	.btn6 { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; padding: 15px 10px; height: 90px; line-height: 40px; font-weight: bold; display: inline-block; background-color: #005bac;  color: #ffffff; min-width: 100px; text-align: center; line-height: 30px;} 
	 .bbtn {margin-left: 20px;}
	 }
.video-area {background-color: #000000; text-align: center;} 
.video-area img {width: 80%;}

.url4 {height: 25px;}
.url3  {height: 25px;}
.url6 {height: 25px;}
.arrm {display: block;}

 @media screen and (max-width: 530px) { 
.arrm {display: none;}	 
.btnbox4 {width: auto;}	
.btnbox3 {width: auto; height: auto;}
.btnbox6 {width: auto; height: auto; line-height: 30px;}	 	 	 
.url4 {height: 20px;}
.url3 {height: 20px;}
.url6 {height: 20px;}	 
	 }

.botbg {background-color: #0066cc; height: 50px;}
 @media screen and (max-width: 740px) { 
.botbg {background-color: #0066cc; height: 80px;}	 
	 }