:root {
--background-body: #fff;
--background-intro:  #fff;
--color-primary: #833dcc;
--color-secondary: #833dcc;
--color-footer: #000000;
--color-footer-hover: #000000;
--background-footer: #fff;
}
/* 
////
//// Easing general purpose
////
--------------------------------------------------------------*/
.easeOut { -webkit-transition-property: all; -webkit-transition-duration: 350ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition-property: all; -moz-transition-duration: 350ms; -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: all; transition-duration: 350ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
/* 
////
//// Default Font
////
--------------------------------------------------------------*/
html, body { height: 100%; min-height: 100%; }
body { font-family: "Open Sans", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 400; background: var(--background-body);  letter-spacing:  -0.01em;  }
strong { font-weight: 700; }
.genC1 { color: var(--color-primary); }
.genC2 { color: var(--color-secondary); }
#fullWrp { margin: 0 auto; min-height: 100%;  background: var(--background-body); position: relative;  }
.genPad1 { padding-top: 6rem; padding-bottom: 6rem;}
.FntPoBk { font-family:  "Poppins", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 900!important; }
.FntPoMd { font-family:  "Poppins", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 500!important; }
.FntPo { font-family:  "Poppins", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 400!important; }
@media all and (max-width: 576px) {
.genPad1 { padding-top: 4.5rem; padding-bottom: 4.5rem;}
}

/* logo 
-----------------------------*/
#mainLogo { float: left; }
#mainLogo a { display: block; background: url(../images/main_logo_2x.png) no-repeat left center; background-size: contain!important; width: 205px; height: 68px; white-space: nowrap; text-indent: -8000px;   }
@media all and (max-width: 767px) {
#mainLogo  { max-width: calc(100% - 185px); width: 205px; }
#mainLogo  a { width: 100%; }
}
@media all and (max-width: 576px) {
.nav-hamburger + #mainLogo { margin-left: 54px!important; }
#mainLogo a { height: 46px; width: calc(100% - 13px);  }
}
/* Main Header
--------------------------------------------------------------*/
#mainHdr { z-index: 2; padding: 20px  0; }
#fullWrp .mainIntroHeader { position: absolute; left: 0; top: 0px; width: 100%;  }
#mainHdr .nav-hamburger { display: none; }
#mainHdr  .ctr { padding: 0 2rem; margin: 0 auto; position: relative; display: flex; justify-content: space-between; align-items: center; }
#mainLogo { margin: 0; display: block; float: left; position: relative;  z-index:  10; position: relative; }
#mainHdr .mainHdrOpt li { position: relative; }
#mainNav .site-nav  li a { color: #000; }
#mainNav .site-nav  li a span.bonus {  position: absolute; top: -1.6em; line-height: 1.45em; background: #f15641; padding: 0 0.55em; color: #fff;  left: 50%; transform: translate(-50%, 0%); font-size: 12.5px; }
#mainSignNav {  display: flex; justify-content: flex-end; height: 53px; align-items: center; white-space: nowrap; font-size: 16px; color: #104968; text-shadow: 0.02em 0.02em 0 #fff;   }
#mainSignNav a { line-height: 1.1em;display: inline-block; padding: 0.7em 0; color: #fff; font-weight: 700!important; }
#mainSignNav a.btn { padding: 0.7em 0.8em!important; font-size: 1em!important; line-height: 1.1em!important; font-weight: 700!important;}
#mainSignNav a:last-child  { margin-left: 0px; }
#mainLogo .planType { position: absolute; top: 0; line-height: 1.45em; background: #1c6ac7; padding: 0 0.55em;color: #fff; font-size: 12.5px; left: 104%; text-indent: 0; text-transform: uppercase; }
@media all and (max-width: 1480px) {
#mainHdr .mainHdrOpt, #mainSignNav a.btn {  font-size: 14.5px; }
#mainHdr .mainHdrOpt li span.bonus  {  font-size: 11.5px; }
#mainSignNav a:last-child  { margin-left: 0px; }
}
@media all and (max-width: 1360px) {
#mainHdr .mainHdrOpt, #mainSignNav {  font-size: 16px; }
#mainHdr .mainHdrOpt li span.bonus  {  font-size: 10.5px; }
}
@media all and (max-width: 767px) {
#fullWrp .mainIntroHeader { top: 0px;}
#mainHdr {padding: 15px  0; }
#mainSignNav {  font-size: 13.5px; }
}
@media all and (max-width: 576px) {
#mainHdr {padding: 5px  0; }
#mainSignNav {  font-size: 12.5px; }
#mainLogo .planType { display: none;}
#mainSignNav a:last-child { margin-left: 0px; }
}

/* Main Intro
--------------------------------------------------------------*/
#mainIntro { background: var(--background-intro); background-size: cover; padding-top: 106px;}
#mainIntroBg .FrmCtr  {  min-height: 745px;  display: flex; justify-content: space-between;  align-items: center;  max-width: 1455px; flex-direction: row;  }
#mainIntroBg .FrmCtr .sideIntro { width: 100%; max-width: 580px;  color: #1c1c1c; padding: 8rem 0 8rem 0; }
#mainIntroBg .FrmCtr .sideIntro .ln0 { font-size: 22px; line-height: 1.15em; font-weight: 600; margin: 0;  padding: 0; }
#mainIntroBg .FrmCtr .sideIntro .ln1 { font-size: 76px; line-height: 1.15em; font-weight: 600; margin: 0; max-width: 8em;  padding: 0.35em 0;  letter-spacing: -0.025em; }
#mainIntroBg .FrmCtr .sideIntro .ln2 { font-size: 24px; line-height: 2em; font-weight: 400; padding: 0 0 2.2em 0; max-width: 23em; letter-spacing: -0.04em; }
#mainIntroBg .FrmCtr .sideIntro .ln2 u { font-weight: 600;}
#mainIntroBg .FrmCtr .sideTmb { width: 82%; max-width: 610px; background: url("../images/main_intro_tmb.jpg") no-repeat center center; background-size: contain;   }
#mainIntroBg .FrmCtr .sideTmb:after { content: ' '; display: block;  padding-top: 100%; }
@media all and (max-width: 1380px) {
#mainIntroBg .FrmCtr .sideIntro .ln1 { font-size: 60px;  }
#mainIntroBg .FrmCtr .sideIntro .ln2 { font-size: 19px; }
}
@media all and (max-width: 1270px) {
#mainIntroBg .FrmCtr  {  min-height: 675px; }
}
@media all and (max-width: 992px) {
#mainIntro { padding-top: 63px; }
#mainIntroBg .FrmCtr  { flex-direction: column; justify-content: center;  }
#mainIntroBg .FrmCtr .sideIntro { text-align: center; padding-top: 4rem; padding-right: 0;   }
#mainIntroBg .FrmCtr .sideIntro .ln1 { margin: 0 auto; max-width: 9.6em; }
#mainIntroBg .FrmCtr .sideIntro .ln2 { margin: 0 auto 0 auto; }
#mainIntroBg .FrmCtr .sideTmb { width: 60%; max-width: 429px; margin-top: 0; }
}
@media all and (max-width: 576px) {
#mainIntroBg .FrmCtr  {  min-height: 530px; } 
#mainIntroBg .FrmCtr .sideIntro  { text-align: center; width: 100%; max-width: 425px; margin: 0 auto; padding-top: 0;  padding-bottom: 4rem;  }
#mainIntroBg .FrmCtr .sideIntro .ln0 { font-size: 18px; }
#mainIntroBg .FrmCtr .sideIntro .ln1 { font-size: 40px;  margin-bottom:  0;  }
#mainIntroBg .FrmCtr .sideIntro .ln2 { font-size: 14px; max-width: 26em; margin: 0 auto;  padding: 0.4em 0 1.8em 0; }
}
@media all and (max-width: 448px) { 
#mainIntroBg .FrmCtr  {  min-height: 95vw }
#mainIntroBg .FrmCtr .sideIntro .ln0 { font-size: 4vw; }
#mainIntroBg .FrmCtr .sideIntro .ln1 { font-size: 8.8vw; }
#mainIntroBg .FrmCtr .sideIntro .ln2 { font-size: 3.2vw; }    
}
/* Main Btm
--------------------------------------------------------------*/
#mainBtm .FrmCtr { display: flex; justify-content:space-between; align-items: center; max-width: 1120px; } 
#mainBtm .FrmCtr  .tmb { max-width: 442px; width: 100%; display: flex; justify-content: center; align-items: center; background: url("../images/main_btm_tmb_bg_01.png") no-repeat center center; background-size: contain;  } 
#mainBtm .FrmCtr  .tmb img { width: 81.44%; margin: 9.28% 0;}
#mainBtm .FrmCtr  .txt  { font-size: 10px; margin-left: 5em; max-width: 550px;  }
#mainBtm .FrmCtr  .txt .title { font-size: 4.4em; line-height: 1.2em; letter-spacing: -0.06em; padding-bottom: 0.6em; }
#mainBtm .FrmCtr  .txt  p { font-size: 1.5em; letter-spacing: 0.01em; line-height: 1.8em; max-width: 30em; }
#mainBtm .FrmCtr  .txt  ul { font-size: 1.5em; line-height: 1.4em;  letter-spacing: 0.01em;}
#mainBtm .FrmCtr  .txt  ul li { padding: 0.65em 0; }
#mainBtm .FrmCtr  .txt  ul li .ico svg { width: 1.33em; height: 1.4em; vertical-align: top; fill: currentColor;  }
#mainBtm .btmRow { padding-top: 0!important; }
#mainBtm .btmRow .FrmCtr  { flex-direction: row-reverse; max-width: 1000px;  }
#mainBtm .btmRow .FrmCtr .tmb { background-image: url("../images/main_btm_tmb_bg_02.png"); }
#mainBtm .btmRow .FrmCtr .txt  { margin-right: 5em; margin-left: 0;  }
@media all and (max-width: 992px) {
#mainBtm .FrmCtr, #mainBtm .btmRow .FrmCtr  { flex-direction: column-reverse;  }
#mainBtm .FrmCtr  .tmb { width: 70%; }
#mainBtm .FrmCtr  .txt, #mainBtm .btmRow .FrmCtr .txt  { margin: 0 auto 4rem auto;  display: flex; flex-direction: column; justtify-content: center; text-align: center; font-size: 9px; }
#mainBtm .FrmCtr  .txt .title { max-width: 12em;  margin: 0 auto; }
#mainBtm .FrmCtr  .txt p { margin: 0 auto; max-width: 31em; }
#mainBtm .FrmCtr  .txt  ul  { text-align: left; margin: 0 auto; }
}
@media all and (max-width: 576px) {
#mainBtm .FrmCtr  .txt, #mainBtm .btmRow .FrmCtr .txt { font-size: 1.8vw; }
}
/* Main Footer
--------------------------------------------------------------*/
.mainFtr { padding: 30px 15px; text-align: center;  box-shadow:  0 4000px 0 4000px  var(--background-footer); background: var(--background-footer); ; font-size: 14px; color: var(--color-footer);  font-weight: 400; }
.ftrNav { list-style:none; margin:  0 0  0.5em 0;  padding: 0;  }
.ftrNav li  { display: inline-block; } 
.ftrNav li a { text-decoration: none;  color: var(--color-footer); }
.ftrNav li a:hover { text-decoration: underline; color: var(--color-footer-hover); }
.ftrCopy { padding: 0; margin: 0; }
@media all and (max-width: 1160px ) { 
.ftrNav  { max-width: 31em; margin-left: auto; margin-right: auto; line-height :1.4em;   }
.ftrNav  span { display: none; }
}
@media all and (max-width: 480px ) { 
.ftrNav, .ftrCopy  { font-size: 2.7vw; line-height: 1.5em; }
}


/* 
////
//// Login 
////
--------------------------------------------------------------*/
/* Form
--------------------------------------------------------------*/
#loginWrp { background: #efefef; display: flex; justify-content: flex-start; align-content: stretch; }
#loginFormBg { flex-grow: 1 ; display: flex; justify-content:  center; align-items: stretch; padding: 6rem 2rem;  }
#loginForm {  padding: 4rem; max-width: 370px; background: #fff; color: #414141; border-radius: 5px;  }
#loginForm p { padding-bottom: 15px; }
#loginForm  .formTitle { font-size: 24px; line-height: 1.3em; font-weight: 500; padding-bottom: 0.15em;   } 
#loginForm  .formSubtitle  { color: #6b6b6b; font-size: 14px; font-weight: 400; line-height: 1.43em; margin-bottom: 20px; }
#loginForm .inputIco { position: relative; display: block;  }
#loginForm .inputIco input { padding-right:40.63px;}
#loginForm .passwordToggle { position: absolute; right: 0; top: 24px; height: 40.63px; width: 40.63px; display: flex; justify-content:  center; align-items: center; }
#loginForm .passwordToggle svg { width: 44%; height: 100%; }
#loginForm .passwordToggle svg path { fill: #919191; }
#loginForm .passwordToggle svg .st1 { display: none; }
#loginForm input[type=text] + .passwordToggle svg .st0 { display: none; }
#loginForm input[type=text] + .passwordToggle svg .st1 { display: block; }
#loginForm label .cards { float: right; white-space: nowrap; }
#loginForm label img { display: inline;  vertical-align:  top; height: 21.4px!important; width: auto!important;  margin-left: 2px;  }
#loginForm .cvvInfo { background-color: #4d64fd; color: #fff; display: block; position: absolute; right: 10px; top: 12px; width: 1.2em; height: 1.2em; line-height: 1.2em; font-size: 14px; font-weight: 500; text-align: center; z-index: 40;  border-radius: 3px; }
#loginForm .cvvInfo:hover { background-color: #277add; }
#loginForm .passwordStrength { font-size: 11px; line-height: 1.2em; color:#919191; clear: both;  } 
#loginForm .passwordStrength svg { width: 1.2em; height: 1.2em; margin-right: 0.4em; position: relative; top: 0.2em;  }
#loginForm .tos { font-size: 12px; padding: 15px 0 0px 0; clear: both;   }
#loginForm .tos input[type="checkbox"] { position: relative;  display: inline-block; vertical-align:  top; width: 1.05em!important; height: 1.05em!important; font-size: 1.05em!important;  top: 0.225em    }
#loginForm .tos a {color: #090946; }
#loginForm .tos a:hover { text-decoration: underline; }
#loginForm .creat {  padding-top: 15px; text-align: center; font-size: 13px; padding-bottom: 0;  }
#loginForm .creat a { color: #090946; }
@media all and (max-width:1240px){

}
@media all and (max-width:980px){
#loginWrp { background: #fff; }
#loginFormBg { align-items: center; padding: 6rem 2rem; flex-direction: column; }
}
@media all and (max-width:576px){
#loginForm .formTitle { font-size: 20px; adding-bottom: 0.2em; }
#loginForm .buttonSoc { height: 36px; line-height: 36px;  }
#loginForm .buttonSoc span { display: none; }
#loginForm .buttonSoc svg { margin: 0 auto;  }
}
@media all and (max-width:472px){
#loginForm {  padding: 2rem; } 
}
@media all and (max-width:364px){
#loginForm .formSubtitle  {font-size: 13px; }
#loginForm .passwordStrength { font-size: 10.5px; }
#loginForm .tos { font-size: 11px;}
}