@import url("font-faces.css");
* 
{
  box-sizing: inherit;
}
body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
}
/*Header*/
.header {
  width: 100%;
  padding: 50px 200px;
  background-color: #FFFFFF;
  border-bottom: 1px solid #CFD8F9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.linebutton01 {
  border: 2px solid #0033DA;
  border-radius: 50px;
  justify-content: space-between;
  align-items: center;
  display: flex;
  color: #0033DA;
  gap: 10px;
  font-size: 16px;
  font-family: Roboto-Bold;
  padding: 15px 20px;
}
.linebutton01:hover {
  border: 2px solid #0033DA;
  background-color: #F1F4FF;
  color: #0033DA;
}
/*Welcome*/
.bluebg {
  background-color: #F1F4FF;
  border-radius: 50px;
  margin: 50px 200px 200px 200px;
  padding: 50px;
  display: flex;
  align-items: center;
}
.bluecontents {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding: 50px;
  align-items: flex-start;
}
.blueinfo {
  background-color: #0033DA;
  color: #FFFFFF;
  border-radius: 50px;
  font-family: Roboto-Regular;
  font-size: 12px;
  padding: 10px 15px;
}
.H1Blue {
  color: #0033DA;
  font-family: Roboto-Medium;
  font-size: 90px;
  line-height: 90px;
}
.textgroup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.SubHeading {
  color: #000;
  font-family: Roboto-Medium;
  font-size: 24px;
  width: 100%;
}
.Body-Text {
  color: #000;
  font-family: Roboto-Regular;
  font-size: 14px;
  line-height: 20px;
  width: 100%;
}
.bluebg img {
  width: 100%;
  height: 100%;
}
/*Band01*/
.band01 {
  width: 100%;
  height: 160px;
  position: relative;
  overflow: hidden;
  transform: rotate(-2.5deg);
  border-top: 1px solid #CFD8F9;
  border-bottom: 1px solid #CFD8F9;
  display: grid;
}
.bandtext01 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  animation: band01 25s linear infinite;
  align-items: center;
  gap: 50px;
  display: flex;
  white-space: nowrap;
  font-size: 25px;
  font-family: Roboto-Light;
  color: #00113E;
}
@keyframes band01 {
0% {
  transform: translateX(100%);
}
100% {
  transform: translateX(-100%);
}
}
/*Contents*/
.redbg {
  background-color: #FFF4F3;
  border-radius: 50px;
  margin: 200px 200px;
  padding: 50px;
  display: flex;
  align-items: center;
}
.redimg {
  width: 100%;
  height: 100%;
}
.redcontents {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 50px;
  align-items: flex-start;
  width: 100%;
}
.redinfo {
  background-color: #FF5352;
  color: #FFFFFF;
  border-radius: 50px;
  font-family: Roboto-Regular;
  font-size: 12px;
  padding: 10px 15px;
}
.H1Red {
  color: #FF5352;
  font-family: Roboto-Medium;
  font-size: 70px;
  line-height: 70px;
}
.textgroup2 {
  display: flex;
  gap: 30px;
  justify-content: space-between;
  width: 100%;
}
.textgroup3 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.listgroup {
  display: flex;
  gap: 30px;
  justify-content: space-between;
  width: 100%;
}
.list {
  font-family: Roboto-Regular;
  font-size: 12px;
  color: #333333;
  width: 100%;
}
.redbutton {
  background-color: #FF5352;
  border-radius: 50px;
  color: #FFFFFF;
  font-size: 14px;
  font-family: Roboto-Bold;
  padding: 18px 24px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.redbutton:hover {
  background-color: #D00000;
}
/*Band02*/
.band02 {
  width: 100%;
  height: 160px;
  position: relative;
  overflow: hidden;
  transform: rotate(2.5deg);
  border-top: 1px solid #CFD8F9;
  border-bottom: 1px solid #CFD8F9;
  display: grid;
}
.bandtext02 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  animation: band01 25s linear infinite;
  align-items: center;
  gap: 50px;
  display: flex;
  white-space: nowrap;
  font-size: 25px;
  font-family: Roboto-Light;
  color: #00113E;
}
@keyframes band01 {
0% {
  transform: translateX(100%);
}
100% {
  transform: translateX(-100%);
}
}
/*Info*/
.greybg {
  background-color: #F4F4F4;
  border-radius: 50px;
  margin: 200px 200px;
  padding: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.H2Grey {
  color: #000;
  font-size: 30px;
  font-family: Roboto-Medium;
}
.linebutton02 {
  border: 2px solid #000;
  border-radius: 50px;
  justify-content: space-between;
  align-items: center;
  display: flex;
  color: #000;
  gap: 10px;
  font-size: 16px;
  font-family: Roboto-Bold;
  padding: 15px 20px;
}
.linebutton02:hover {
background-color: #E2E2E2;
}
/*Line*/
.lines {
  margin: 0px 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.line {
  border: 1px solid #E2E2E2;
  width: 100%;
}
/*Footer-*/
.footer {
  margin: 120px 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.textgroup4 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.Caption1 {
  font-family: Roboto-Medium, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 16px;
  color: #919191;
}
.Caption2 {
  font-family: Roboto-Regular;
  font-size: 14px;
  color: #919191;
}
.Caption2 a {
  font-family: Roboto-Bold;
  font-size: 14px;
  color: #919191;
}
.Caption2 a:hover {
  color: #000;
}
@media only screen and (max-width: 1441px), (max-width: 1281px) {
.header {
  padding: 50px 50px;
}
.bluebg {
  margin: 50px 100px 100px 100px;
  padding: 30px;
}
.bluecontents {
  gap: 30px;
  padding: 30px;
}
.blueinfo {
  padding: 8px 15px;
}
.H1Blue {
  font-size: 70px;
  line-height: 70px;
}
.SubHeading {
  font-size: 18px;
}
.band01 {
  height: 120px;
}
.bandtext01 {
  gap: 30px;
  font-size: 18px;
}
.redbg {
  margin: 100px 100px;
  padding: 30px;
  gap: 30px;
}
.redcontents {
  gap: 20px;
  padding: initial;
}
.redinfo {
  padding: 8px 15px;
}
.H1Red {
  font-size: 50px;
  line-height: 50px;
}
.redbutton {
  padding: 12px 18px;
  gap: 5px;
}
.band02 {
  height: 120px;
}
.bandtext02 {
  gap: 30px;
  font-size: 18px;
}
.greybg {
  padding: 30px;
  margin: 100px 100px;
}
.H2Grey {
  font-size: 24px;
}
.linebutton02 {
  padding: 12px 18px;
}
.lines {
  margin: 0px 100px;
}
.footer {
  margin: 100px 100px;
}
}
@media only screen and (max-width: 1025px), (max-width: 961px) {
.header {
  padding: 30px 50px;
}
.logo {
  text-align: center;;
}
.logo img {
  width: 75%;
}
.linebutton01 {
  gap: 5px;
  font-size: 16px;
  padding: 10px 12px;
}
.bluebg {
  margin: 50px 50px;
  padding: 30px;
  gap: 30px;
}
.bluecontents {
  gap: 25px;
  padding: initial;
}
.blueinfo {
  padding: 6px 12px;
  font-size: 10px;
}
.H1Blue {
  font-size: 55px;
  line-height: 55px;
}
.SubHeading {
  font-size: 16px;
}
.Body-Text {
  font-size: 12px;
  line-height: 18px;
}
.band01 {
  height: 80px;
}
.bandtext01 {
  gap: 20px;
  font-size: 12px;
}
.bandtext01 img {
  width: 40px;
  height: 40px;
}
.redbg {
  margin: 50px 50px;
}
.redcontents {
  gap: 20px;
  padding: initial;
  width: 75%;
}
.redinfo {
  padding: 6px 12px;
  font-size: 10px;
}
.textgroup2 {
  gap: initial;
}
.H1Red {
  font-size: 36px;
  line-height: 36px;
}
.textgroup3 {
  gap: 5px;
}
.list {
  font-size: 11px;
}
.listgroup {
  gap: initial;
}
.redbutton {
  padding: 10px 15px;
  font-size: 12px;
}
.band02 {
  height: 80px;
}
.bandtext02 {
  gap: 20px;
  font-size: 12px;
}
.bandtext02 img {
  width: 40px;
  height: 40px;
}
.greybg {
  padding: 20px;
  margin: 50px 50px;
}
.H2Grey {
  font-size: 20px;
}
.linebutton02 {
  padding: 10px 16px;
  gap: 5px;
}
.lines {
  margin: 0px 50px;
}
.footer {
  margin: 50px 50px;
}
.textgroup4 {
  gap: initial;
}
.Caption1 {
  font-size: 13px;
}
.Caption2 {
  font-size: 11px;
}
.Caption2 a {
  font-size: 11px;
}
}

@media only screen and (max-width: 861px), (max-width: 811px),(max-width: 781px) {
}

@media only screen and (max-width: 431px), (max-width: 429px), (max-width: 391px) {
}