.bg-login {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/eservice-web/javax.faces.resource/bglogin.jpg.xhtml?ln=images"); 
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@import url("https://fonts.googleapis.com/css2?family=Mitr:wght@300;400;500;700&family=Noto+Sans+Thai:wght@300;400;500;700&display=swap");
* {
  font-family: "Mitr", sans-serif;
  font-family: "Noto Sans Thai", sans-serif;
}
.pointer {
  cursor: pointer;
}
.bg-f3 {
  background-color: #f3f3f3;
}
.bg-yel {
  background: #ffc146;
}
.bg-c6 {
  background: #c6c6c6;
}
.text-f3 {
  color: #f3f3f3;
}
.text-c6 {
  color: #c6c6c6;
}
.bullet {
  display: list-item;
  list-style-type: disc;
  list-style-position: inside;
}
.radius-10 {
  border-radius: 10px;
}
.radius-s-10 {
  border-radius: 10px 0 0 10px;
}
.radius-e-10 {
  border-radius: 0 10px 10px 0;
}
.radius-t-10 {
  border-radius: 10px 10px 0 0;
}
.radius-b-10 {
  border-radius: 0 0 10px 10px;
}
.w-80 {
  width: 80%;
}
.w-60 {
  width: 60%;
}
.w-40 {
  width: 40%;
}

/* Top Header */
.header {
  width: 100%;
}
.header-top {
  height: 2rem;
  padding: 0 4.5rem;
  font-size: 0.8rem;
}
.header-top__item {
  margin-right: 0.4rem;
}
.header-top__item > a > * {
  margin: 0 0.2rem;
  color: #fff;
}
.header-top__item > div {
  height: 1rem;
  width: 0.1rem;
  background-color: #fff;
}
.header-top__item.user_sso > a > * {
  margin: 0 0.2rem;
  color: #fff;
}
.header-top__item.user_sso > div {
  height: 1rem;
  width: 0.1rem;
  background-color: #fff;
}

.header-top__item.bank_menu > div {
  height: 1rem;
  width: 0.1rem;
  background-color: #fff;
}
.header-top-color {
  background-color: #5b2d90;
}
.header-top__items {
  /* margin-left: 1rem; */
  font-size: 1rem;
}
.header-top__items > div {
  margin-left: 1rem;
  margin-right: 0;
}
.header-top__item > a > span {
  top: 3px;
  left: 70%;
}
.header-wrapper {
  height: 5rem;
  padding: 0 4.5rem;
}
.header_wrapper {
  height: 5rem;
  padding: 0 4.5rem;
}
.header-wrapper__img {
  width: 8rem;
}
.header-wrapper__item {
  margin-right: 5rem;
}
.b-white {
  background-color: #fff9f9;
}
.header-search {
  border: 1px solid #c6c6c6;
  border-radius: 0.7rem;
  width: 40rem;
  height: 2.7rem;
  /* padding-top: 0.2rem; */
}
.header-search__icon {
  padding-top: 0.2rem;
  text-align: center;
  font-size: 1.5rem;
  width: 3.5rem;
}
.header-search__input {
  flex: 1;
  border: none;
  height: 100%;
  border-radius: 0 0.7rem 0.7rem 0;
}
.header-search__input:focus {
  border-radius: 0 0.7rem 0.7rem 0;
  border: 1px solid #ad96c7;
  outline: 0;
}
.header-wrapper__login {
  height: 2.7rem;
  background: #f3f3f3;
  padding: 0 1.7rem;
  color: #5b2d90;
  cursor: pointer;
}
.header-wrapper__login:hover {
  background: #5b2d90;
  color: #fff;
}
.header-wrapper__login.active {
  background: #5b2d90;
  color: #fff;
}
.header-wrapper__login > div {
  margin: 0 0.5rem;
}
.header-login__dropdown {
  position: absolute;
  top: 2.5rem;
  left: 0;
  width: 100%;
  background-color: #f3f3f3;
}
.header-login__dropdown > a:hover {
  background: #5b2d90;
  color: #fff;
}

.header-sso__login {
  height: 2.7rem;
  background: #ddebf5;
  padding: 0 1.7rem;
  color: #1f2a85;
  cursor: pointer;
}
.header-sso__login:hover {
  background: #1f2a85;
  color: #fff;
}
.header-sso__login.active {
  background: #1f2a85;
  color: #fff;
}
.header-sso__login > div {
  margin: 0 0.5rem;
}

/* SSO */
.sso-login {
  height: 100vh;
  background: linear-gradient(180deg, #5b2d90 0%, rgba(91, 45, 144, 0.8875) 0.01%, rgba(91, 45, 144, 0) 100%);
}
.sso-login__wrapper {
  height: 80vh;
}
.sso-login__box {
  padding: 0 10rem;
}
.login-image {
  height: 23rem;
}
.login-logo {
  width: 10rem;
}
.login-input::placeholder {
  color: #c6c6c6;
  font-size: 0.8rem;
}
.login-btn {
  background: linear-gradient(90deg, #5b2d90 -35%, rgba(91, 45, 144, 0.517647) 124%, rgba(91, 45, 144, 0) 138%);
  filter: drop-shadow(0px 9px 20px rgba(0, 0, 0, 0.25));
  border-radius: 20px;
  color: #fff;
  padding: 0.5rem 1.5rem;
}
.sso-item {
  width: 12rem;
  height: 13.5rem;
  background-color: #5b2d90;
  box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 1rem;
  margin: 1rem 1rem;
}
.sso-item__logo {
  background-color: #fff;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  padding: 1rem;
}
.sso-item__logo > svg {
  fill: #5b2d90;
}
.sso-item__des {
  margin: 1rem 0.5rem 0.5rem 0.5rem;
  color: #fccb6b;
  font-size: 1.2rem;
}
.sso-item__sub {
  color: white;
  font-size: 0.8rem;
  margin: 0 0.5rem;
}
.sso-item:hover {
  background-color: white;
  border: 1px solid #5b2d90;
}
.sso-item:hover > .sso-item__logo {
  background-color: #5b2d90;
}
.sso-item:hover > .sso-item__logo > svg {
  fill: #fff;
}
.sso-item:hover > .sso-item__des {
  color: #5b2d90;
}
.sso-item:hover > .sso-item__sub {
  color: #fccb6b;
}
.bg-linear {
  background: linear-gradient(180deg, #5b2d90 0%, #d3c3e3 100%);
}
.box-header {
  background-color: #5b2d90;
  min-height: 3.5rem;
  color: #fff;
  text-align: center;
  border-radius: 2rem 2rem 0 0;
}
.box-header2 {
  background-color: #5b2d90;
  min-height: 3rem;
  color: #fff;
  text-align: center;
  border-radius: 0.5rem 0.5rem 2rem 2rem;
}
.text-sso {
  color: #5b2d90 !important;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
}
#scroll::-webkit-scrollbar {
  width: 0.7em;
}
#scroll::-webkit-scrollbar-thumb {
  background-color: #dadada;
}
.overflow-auto > p {
  text-indent: 1.5rem;
}
.button-1 {
  height: 2.8rem;
  width: 13rem;
  border-radius: 0.8rem;
  border: none;
  color: #fff;
  background: linear-gradient(#5b2d90, #8c6bb1);
}
.button-2 {
  height: 2.8rem;
  width: 6rem;
  border-radius: 0.8rem;
  border: none;
  color: #fff;
  background-color: #a3a3a3;
  margin-left: 1rem;
}
/* personal_information*/
.sso-form-v {
  border-radius: 0 1rem 1rem 0;
  border: 2px solid #5b2d90;
  /* width: 45rem; */
  height: 60rem;
  margin-left: 1rem;
}
/* .sso-tabs {
  border-bottom: 1px solid #1f2a85;
} */
.sso-border {
  background-color: #f3f3f3;
  margin-left: 10rem;
  border-radius: 1rem 0 0 1rem;
}

/* .sso-tabs .sso-link.active {
  border-color: #5B2D90 #5B2D90 #fff;
  background-color: #fff;
  color: #1f2a85;
  font-weight: bold;
  padding: 0.7rem 2rem;
  position: relative;
} */
/* .sso-tabs .sso-link.active::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  height: 1.5rem;
  width: 0.3rem;
  background-color: #1f2a85;
  transform: translate(0, -50%);
  border-radius: 0 10rem 10rem 0;
} */
/* .sso-tabs .sso-link {
  background-color: #1f2a85;
  padding: 0.5rem 2rem;
} */
.sso-tab-content {
  background-color: #fff;
  border-color: #5b2d90;
  border-radius: 1rem 0 0 1rem;
}
.sso-tabs-v {
  text-align: left;
}
.sso-tabs-v .sso-link {
  padding: 1rem;
  color: #2d427e;
}
.sso-tabs-v .sso-link.active {
  padding: 1rem;
  color: #fff;
  background-color: #2d427e;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-weight: bold;
  border-end-end-radius: 0;
  border-start-end-radius: 0;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  width: 13rem;
}
.sso-form__item {
  margin: 1rem 0;
}

.form-check {
  color: #5b2d90;
}
.btn-back {
  border-radius: 0.5rem;
  width: 8rem;
  background: #9e9fa3;
  color: #fff;
}
.btn-regis {
  border-radius: 0.5rem;
  width: 8rem;
  height: 3rem;
  background: #2d427e;
  color: #fff;
}
.btn-back:hover {
  border-radius: 0.5rem;
  width: 8rem;
  background: #9e9fa3;
  color: #fff;
}
.btn-regis2 { color: #fff; background-color: #2d427e; border-color: #2d427e; }
.btn-regis-2:hover {  color: #fff; background-color: #2d427e; border-color: #2d427e;}

.btn-regis:hover {
  border-radius: 0.5rem;
  width: 8rem;
  height: 3rem;
  background: #2d427e;
  color: #fff;
}

/* -- online-service ----- */
.logo-up-position {
  position: relative;
  bottom: 70px;
}
.online-service-wrapper {
  overflow: auto;
}
.online-service-items {
  width: 60rem !important;
}
.online-service {
  width: 20%;
  height: 8.5rem;
  background-color: #5b2d90;
  box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 1rem;
  margin: 4rem 1rem;
}
.online-service__logo {
  background-color: #fff;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  padding: 1rem;
  background-size: 56px 56px;
  background-position: center;
  background-repeat: no-repeat;
}
.online-service__logo > svg {
  fill: #5b2d90;
}
.online-service__des {
  margin: -3.6rem 0.5rem 0rem 0.5rem;
  color: #fccb6b;
  font-size: 1rem;
  font-weight: 700;
}
.online-service__sub {
  color: white;
  font-size: 0.8rem;
  margin: 0 0.5rem;
}

.online-service:hover {
  background-color: #eb9e00;
}
.online-service:hover .online-service__logo {
  background-color: #5b2d90;
}
.online-service:hover .online-service__logo > svg {
  fill: #ffffff;
}
.online-service:hover .online-service__des {
  margin: -3.6rem 0.5rem 0rem 0.5rem;
  color: #000000;
  font-size: 1rem;
  font-weight: 700;
}
.online-service:hover .online-service__sub {
  color: #000000;
  font-size: 0.8rem;
  margin: 0 0.5rem;
}
.online-service1 {
  background-image: url(""); 
}
.online-service2 {
  background-image: url("");
}
.online-service3 {
  background-image: url("");
}
.online-service4 {
  background-image: url("");
}
.online-service5 {
  background-image: url("");
}
.online-service6 {
  background-image: url("");
}
.online-service7 {
  background-image: url("");
}
.online-service8 {
  background-image: url("");
}
.online-service9 {
  background-image: url("");
}
.online-service10 {
  background-image: url("");
}
.online-service11 {
  background-image: url("");
}
.online-service:hover .online-service1 {
  background-image: url("");
}
.online-service:hover .online-service2 {
  background-image: url("");
}
.online-service:hover .online-service3 {
  background-image: url("");
}
.online-service:hover .online-service4 {
  background-image: url("");
}
.online-service:hover .online-service5 {
  background-image: url("");
}
.online-service:hover .online-service6 {
  background-image: url("");
}
.online-service:hover .online-service7 {
  background-image: url("");
}
.online-service:hover .online-service8 {
  background-image: url("");
}
.online-service:hover .online-service9 {
  background-image: url("");
}
.online-service:hover .online-service10 {
  background-image: url("");
}
.online-service:hover .online-service11 {
  background-image: url("");
}
.line-service {
  background-color: #5b2d90;
  height: 0.1rem;
  width: 80%;
  margin-top: -1rem;
}
/* -----services_legalentities----- */
.sso-items-2 {
  display: inline-block;
}
.services_legalentities {
  width: 12rem;
  height: 8.5rem;
  background-color: #5b2d90;
  box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 1rem;
  margin: 4rem 1rem;
}
.services_legalentities__logo {
  background-color: #fff;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  padding: 1rem;
}
.services_legalentities__logo > svg {
  fill: #5b2d90;
}
.services_legalentities__des {
  margin: -3.6rem 0.5rem 0rem 0.5rem;
  color: #fccb6b;
  font-size: 1rem;
  font-weight: 700;
}
.services_legalentities__sub {
  color: white;
  font-size: 0.8rem;
  margin: 0 0.5rem;
}
.services_legalentities:hover {
  width: 12rem;
  height: 8.5rem;
  background-color: #eb9e00;
  box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 1rem;
  margin: 4rem 1rem;
}
.services_legalentities:hover .services_legalentities__logo {
  background-color: #5b2d90;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  padding: 1rem;
}
.services_legalentities:hover .services_legalentities__logo > svg {
  fill: #ffffff;
}
.services_legalentities:hover .services_legalentities__des {
  display: none;
  margin: -3.6rem 0.5rem 0rem 0.5rem;
  color: #000000;
  font-size: 1rem;
}
.services_legalentities:hover .services_legalentities__sub {
  display: box text;
  color: #000000;
  font-size: 0.8rem;
  margin: -1.9rem 0.5rem 0rem 0.5rem;
}

/* ----login_member--- */
.login_pic > img {
  width: 27rem;
  height: auto;
  margin-top: 5.5rem;
}
.loginright_pic > img {
  width: 15rem;
  height: auto;
  margin-top: 2rem;
}
input[type="text"],
select {
  width: 90%;
  height: 50px;
  margin: 5px 0;
  border-radius: 10px;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 16px;
  color: #000;
}
input[type="text"]:focus {
  border-color: #5b2d90;
  box-shadow: 0 0 8px #5b2d90;
}
.inputWithIcon {
  margin: 1rem 0;
}
.inputWithIcon > input {
  padding-left: 3rem;
  margin: 0 auto !important;
}
.inputemail > input {
  margin: 0 auto;
}
.inputaccount > input {
  margin: 0 auto;
}
.inputemail[type="text"] {
  padding-left: 1rem;
}
.inputaccount[type="text"] {
  padding-left: 1rem;
}
input[type="password"],
select {
  width: 90%;
  height: 50px;
  margin: 5px 0;
  border-radius: 10px;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 16px;
  color: #000;
}
input[type="password"]:focus {
  border-color: #5b2d90;
  box-shadow: 0 0 8px #5b2d90;
}
/* .inputWithIcon [type="password"] {
  padding-left: 3rem;
} */
.inputWithIconlock [type="password"] {
  padding-left: 3rem;
}
.input-no-spinner::-webkit-outer-spin-button,
.input-no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-no-spinner {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"],
select {
  width: 30px;
  height: 50px;
  margin: 5px 0;
  border-radius: 10px;
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 16px;
  color: #000;
}
input[type="number"]:focus {
  border-color: #5b2d90;
  box-shadow: 0 0 8px #5b2d90;
}
.inputWithIcon [type="number"] {
  padding-left: 3rem;
}
.input-password > input {
  margin: 0 auto !important;
}
.input-password {
  position: relative;
}
.eye-password {
  position: absolute;
  left: 21.9rem;
  top: 0.9rem;
  color: #c6c6c6;
}
.inputWithIcon {
  position: relative;
}
.inputWithIcon i {
  position: absolute;
  left: 2.3rem;
  top: 1rem;
  color: #c6c6c6;
}
.inputWithIconlock i {
  position: absolute;
  left: 4.3rem;
  top: 21rem;
  color: #c6c6c6;
}
.eye {
  position: absolute;
  left: 23.3rem;
  top: 0.1rem;
  color: #5b2d90;
}
.eye > i {
  color: #5b2d90;
}
.hide1 {
  display: none;
}
/* **switch */
.switch {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 30px;
  margin: 0 10px;
  margin-top: 0.5rem;
  margin-left: 1.2rem;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #dbdbdb;
  transition: 0.4s;
  border-radius: 43px;
}
.switch input {
  display: none;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 3px;
  bottom: 2px;
  background: #fff;
  transition: 0.4s;
  border-radius: 50px;
}
input:checked + .slider {
  background-color: #f8b42d;
}
input:checked + .slider:before {
  transform: translateX(39px);
}
.login-buttom {
  display:block;
  width: 85%;
  height: 45px;
  background-image: linear-gradient(90deg, rgba(91, 45, 144, 1) 0%, rgba(91, 45, 144, 0.57) 100%);
  border-radius: 10px;
  margin: 1rem auto;
  
}
.login-buttom a {
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  position: absolute;
  margin: 0.7rem 8.5rem;
}
.login-buttom span {
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  position: absolute;
  margin: 0.7rem 10.9rem;
}
.account-buttom {
  width: 330px;
  height: 45px;
  background-color: #f8b42d;
  border-radius: 10px;
  margin: 1rem auto;
}
.next-buttom {
  width: 330px;
  height: 45px;
  background-image: linear-gradient(90deg, rgba(91, 45, 144, 1) 0%, rgba(91, 45, 144, 0.57) 100%);
  border-radius: 10px;
  margin: 1rem auto;
}
.login-appleid > i {
  color: #fff;
  margin: 0.6rem 0.5rem;
}
.login-facebook > i {
  color: #fff;
  margin: 0.6rem 0.5rem;
}
.login-Gmail > i {
  color: #fff;
  margin: 0.6rem 0.5rem;
}
.login-Lin > i {
  color: #fff;
  margin: 0.6rem 0.5rem;
}
/* ---password-success---- */
.text_success {
  font-size: 1rem;
  font-weight: 500;
  color: #5b2d90;
  margin: 0.5rem;
}
.text_success2 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #5b2d90;
  margin-top: 1rem;
}
.text_success3 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #eb9e00;
  margin-top: 1rem;
}
.box_success > svg {
  margin-top: 1rem;
  margin-left: 10rem;
}
.success-buttom {
  width: 200px;
  height: 45px;
  background-image: linear-gradient(90deg, rgba(91, 45, 144, 1) 0%, rgba(91, 45, 144, 0.57) 100%);
  border-radius: 10px;
  margin: 1rem auto;
}
.text1_switch:hover {
  text-decoration: underline;
}
.border-dropdown {
  background-color: #f3f3f3;
  border: #5b2d90 solid 1.5px;
  color: #5b2d90;
  width: 200px;
  height: 45px;
}
.border-dropdown:hover {
  background-color: #5b2d90;
  color: #fff;
}
.dropdown-menu {
  background-color: #f3f3f3;
  width: 200px;
}
.dropdown-item {
  color: #5b2d90;
}
.dropdown-item:hover {
  background-color: #5b2d90;
  color: #fff;
  width: 200px;
}
.header-top__item > i {
  color: #5b2d90;
}

.login_main {
  width: 60rem;
  margin: 0 auto;
  display: flex;
}
.login_box_left {
  width: 50%;
  background-image: linear-gradient(0deg, rgba(91, 45, 144, 1) 0%, rgba(91, 45, 144, 0.29) 100%);
  margin: 5rem 0;
}
.text_box-left {
  font-size: 1.2rem;
  color: #fff;
}
.text1_box-left {
  font-size: 1.2rem;
  color: #ffc859;
}
.textdetail_box-left {
  font-size: 0.9rem;
  color: #fff;
}
.login_box_right {
  width: 50%;
  position: relative;
  margin: 5rem 0;
}
.line {
  background-color: #5b2d90;
  height: 0.1rem;
  width: 10.2rem;
  margin: 1rem auto;
}
.login-member-box {
  width: 11.5rem;
  height: 2.6rem;
  border-radius: 1rem 1rem 0 0;
  color: #5b2d90;
  border: 1px solid #5b2d90;
}

.login-member-box.active {
  background-color: #5b2d90;
  color: #fff;
}
.login-member-text {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.login-member-text > .activate {
  font-size: 0.9rem;
  font-weight: 400;
  color: #5b2d90;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


.login-member-box.active .login-member-text > a {
  color: #fff;
}
.login-member {
  min-height: 35rem;
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0.5rem;
}
.text_switch {
  margin-left: 4.9rem;
  font-size: 0.7rem;
  color: #5b2d90;
  margin-top: 0.5rem;
  width: 5.5rem;
}
.text1_switch {
  margin-left: 17rem;
  font-size: 0.7rem;
  color: #5b2d90;
  margin-top: -1.01rem;
  width: 6rem;
  cursor: pointer;
}
.form-check-input:checked {
  background-color: #f8b42d;
  border-color: #f8b42d;
}
.box_success {
  height: 15rem;
  background-color: #fff;
  box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 2rem;
  border-radius: 1rem;
  text-align: center;
}
.set_password_text {
  width: 330px;
  margin: 0 auto;
}
.setpassword_detail1 {
  margin-top: 1rem;
  color: #469e75;
  font-size: 0.9rem;
}
.setpassword_detail2 {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}
.box1 {
  border-style: solid;
  border-radius: 0 0 2rem 2rem;
  border-color: #5b2d90;
  padding: 3rem;
}
.line-con {
  background-color: #5b2d90;
  height: 0.1rem;
  width: 25rem;
  margin-top: 1.5rem;
}
 .lay-btn-apple-id{
	 display: inline-block;
  	 width: 6.2rem;
     height: 2.2rem;
     background-color: #000;
     border-radius: 0.5rem;
     margin-left: 0.5rem;
     margin-top: 0.7rem;
  }
  
  .btn-social{
  	font-size: 0.7rem; 
  	font-weight: 400; 
  	color: #fff; 
  	margin: 0.7rem 0.5rem 0.7rem 0rem;
  }
  
  .btn-apple-id{
  	font-size: 0.7rem; 
  	font-weight: 400; 
  	color: #fff; 
  	position: absolute; 
  	margin: 0.7rem 0.1rem;
  }
  
  .lay-btn-fb{
  	display: inline-block;
  	width: 6.2rem;
	height: 2.2rem;
    background-color: #1f2a85;
	border-radius: 0.5rem;
 	margin-top: -2.1rem;
	margin-left: 5rem;
  }
  
  .lay-btn-gmail{
  	display: inline-block;
  	width: 6.2rem;
	height: 2.2rem;
	background-color: #f7513d;
    border-radius: 0.5rem;
    margin-left: 5rem;
    margin-top: 0.5rem;
  }
  
  .lay-btn-line{
 	display: inline-block;
  	width: 6.2rem;
    height: 2.2rem;
    background-color: #57c748;
    border-radius: 0.5rem;
    margin-top: -2.1rem;
    margin-left: 0.5rem;
  }
  
  .lay-btn-register{
    font-weight: 400;
    color: #eb9e00;
    position: inherit;

  }
  
  .lay-btn-forgetuser{
  	font-size: 0.9rem; 
  	font-weight: 400; 
  	color: #5b2d90; 
  	position: absolute; 
  	margin: 2.9rem -3rem
  }
@media (max-width: 575.98px) {
  .login-buttom span{
  	margin: 0.7rem 9.1rem;
  }
  .login-member{
  	width: 100%;
  }
  .header{
  	display: none;
  }
  .header_wrapper {
    background-color: #fff !important;
    height: 3rem !important;
    padding: 0 0.5rem !important;
  }
  .header-wrapper__img {
    width: 3rem;
  }
  .header-wrapper__item {
    margin-right: 1rem !important;
  }
  .header-wrapper__item > a {
    font-size: 10px !important;
    margin-left: 0 !important;
    margin-top: 0.3rem;
  }
  .header-top__item > a {
    font-size: 8px !important;
  }
  .header-top__item > div {
    background-color: #5b2d90 !important;
  }
  .login_main {
    width: 100% !important;
  }
  .login_box_left {
    display: none;
  }
  .login_box_right {
    width: 100% !important;
  }
  .eye-password {
    left: 19rem;
  }
  .box1 {
    padding: 1rem !important;
  }
  .box1 > #scroll {
    height: 30rem !important;
  }
  .line-con {
    width: 20rem;
  }
  .online-service-wrapper {
    width: 100%;
  }
  .online-service-items {
    justify-content: start !important;
  }
  .online-service {
    width: 20rem;
  }
  .eye {
  	left: 19.3rem;
  }
}