/*46px*/
/*38px*/
/*31px*/
/*26px*/
/*24px*/
/*21px*/
/*18px*/
html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  font-family: Noto Sans TC, Prompt;
  font-size: 1rem; /*16px*/
  letter-spacing: 0.06em;
}

.container-xl, .container-lg, .container-md, .container-sm, .container {
  max-width: 1204px;
}
@media (max-width: 1366px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 916px;
  }
}
@media (max-width: 1024px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 768px;
  }
}
@media (max-width: 810px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 810px;
  }
}
@media (max-width: 550px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 373px;
  }
}

@media (max-width: 810px) {
  .container-pad {
    padding-left: 33px;
    padding-right: 33px;
  }
}
@media (max-width: 550px) {
  .container-pad {
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (max-width: 375px) {
  .container-pad {
    padding-left: 3px;
    padding-right: 3px;
  }
  .container-pad > .row {
    margin-left: -3px;
    margin-right: -3px;
  }
}

.modal-lg {
  --bs-modal-width: 800px;
}
@media (max-width: 810px) {
  .modal-lg {
    --bs-modal-width: 500px;
  }
}

li {
  list-style-type: none;
}

.ck-content li {
  list-style-type: inherit;
}

input {
  background-color: rgb(255, 255, 255);
  margin: 0em;
  padding: 1px 2px;
  border-width: 1px;
  border-style: inset;
  border-color: black;
  border-image: initial;
  appearance: auto;
  /* &:not([type='radio']):not([type='checkbox']):read-only {
       cursor: default;
       background-color: rgba(59, 59, 59, 0.1);
       color: black;
       border-color: rgba(118, 118, 118, 0.3);
   }*/
}
input[type=checkbox] {
  height: 17px;
  width: 17px;
}

textarea {
  vertical-align: top;
  resize: vertical;
}

table {
  table-layout: fixed;
}

a {
  text-decoration: none;
  color: black;
}
a:hover {
  color: #6271C2;
  text-decoration: underline;
}
a.btn:hover {
  text-decoration: none;
}

p {
  word-break: break-word;
}

img {
  transform-box: fill-box;
  transform-origin: center;
}

.swal2-shown .select2-container--open {
  z-index: 1100;
}

.select2-results__option {
  height: 100%;
}
.select2-results__option[aria-selected] {
  height: 100%;
}

.text-truncate-multi {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pop-info {
  cursor: pointer;
}
.pop-info .info-svg {
  color: #F3CD50;
}

.not-found, .remind-info {
  background-color: rgba(243, 205, 80, 0.25);
  width: 100%;
  border-radius: 5px;
  text-align: center;
  padding: 24px;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08);
}

.not-found-list {
  padding: 150px 0;
  text-align: center;
  margin: auto;
}

.card-link {
  cursor: pointer;
}
.card-link:hover {
  transform: scale(1.03);
}
@media (max-width: 810px) {
  .card-link:hover {
    transform: none;
  }
}

.form-control::placeholder {
  color: #CBCBCB;
}

/* #region font-size */
h1, h2, h3, h4, h5, h6, h7 {
  font-weight: 500;
  color: #1B1B1B;
  margin-bottom: 0;
  letter-spacing: 0.1em;
}

h1, .h1 {
  font-size: 2.875rem; /*46px*/
}

h2, .h2 {
  font-size: 2.375rem; /*38px*/
}

h3, .h3 {
  font-size: 1.9375rem; /*31px*/
}

h4, .h4 {
  font-size: 1.625rem; /*26px*/
}

h5, .h5 {
  font-size: 1.5rem; /*24px*/
}

h6, .h6 {
  font-size: 1.3125rem; /*21px*/
  letter-spacing: 0.08em;
}

.h7 {
  display: block;
  font-size: 1.125rem; /*18px*/
  letter-spacing: 0.08em;
}

.body-1 {
  font-size: 1.125rem; /*18px*/
  letter-spacing: 0.05em;
}

.body-2 {
  font-size: 1.0625rem; /*17px*/
  letter-spacing: 0.07em;
}

.body-3 {
  font-size: 1rem; /*16px*/
  letter-spacing: 0.06em;
}

.body-4 {
  font-size: 0.875rem; /*14px*/
  letter-spacing: 0.08em;
}

.body-5 {
  font-size: 0.75rem; /*12px*/
  letter-spacing: 0.12em;
}

.digit-1 {
  font-size: 3.93755rem; /*63px*/
  font-weight: 500;
}

.digit-2 {
  font-size: 2.125rem; /*34px*/
  font-weight: 500;
}

.digit-3 {
  font-size: 1.3125rem; /*21px*/
  font-weight: 500;
}

.digit-4 {
  font-size: 1.125rem; /*18px*/
}

.digit-5 {
  font-size: 1.0625rem; /*17px*/
}

.digit-6 {
  font-size: 1rem; /*16px*/
}

.digit-7 {
  font-size: 0.875rem; /*14px*/
}

.digit-8 {
  font-size: 0.75rem; /*12px*/
}

/* #endregion */
/* #region button*/
.btn {
  border-radius: 47px;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08);
  border-style: solid;
  border-width: 1px;
  /* #region size*/
  padding: 8px 31px 8px;
  font-size: 1.125rem;
  /* #endregion*/
  /* #region color */
  --btn-color: #6271C2;
  /* #endregion*/
  /* #region type*/
  /* #endregion*/
}
.btn.btn-large {
  padding: 6px 31px 8px;
  font-size: 1.125rem;
}
.btn.btn-medium {
  padding: 4px 25px 5px;
  font-size: 1rem;
}
.btn.btn-small {
  padding: 3.5px 17px 4.5px;
  font-size: 0.6875rem;
}
.btn:hover {
  --btn-color: #2A3884;
}
.btn:active {
  --btn-color: #2A3884;
}
.btn:disabled {
  --btn-color: #CBCBCB;
}
.btn.btn-primary {
  --btn-color: #6271C2;
}
.btn.btn-primary:hover {
  --btn-color: #2A3884;
}
.btn.btn-primary:active {
  --btn-color: #2A3884;
}
.btn.btn-primary:disabled {
  --btn-color: #CBCBCB;
}
.btn.btn-alert {
  --btn-color: #F95C5C;
}
.btn.btn-alert:hover {
  --btn-color: #f61212;
}
.btn.btn-alert:active {
  --btn-color: #f61212;
}
.btn.btn-alert:disabled {
  --btn-color: #fca6a6;
}
.btn, .btn:hover, .btn:active, .btn:disabled {
  color: #FFFFFF;
  background-color: var(--btn-color);
  border-color: var(--btn-color);
}
.btn.btn-type-primary {
  color: #FFFFFF;
  background-color: var(--btn-color);
  border-color: var(--btn-color);
}
.btn.btn-type-secondary {
  color: var(--btn-color);
  background-color: #FFFFFF;
  border-color: var(--btn-color);
}
.btn.btn-type-ghost {
  color: var(--btn-color);
  background-color: transparent;
  border-color: var(--btn-color);
}
.btn.btn-type-dash {
  color: var(--btn-color);
  background-color: transparent;
  border-color: var(--btn-color);
  border-style: dashed;
}

/* #endregion*/
/* #region  cursor*/
.cursor-pointer {
  cursor: pointer;
}

/* #endregion*/
.swal2-styled.swal2-confirm, .swal2-styled.swal2-cancel {
  padding: 6px 31px 8px;
  font-size: 1.125rem;
  border-radius: 47px;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08);
  border-style: solid;
  border-width: 1px;
  /* #region size*/
  padding: 8px 31px 8px;
  font-size: 1.125rem;
  color: #FFFFFF;
  background-color: var(--btn-color);
  border: none;
}
.swal2-styled.swal2-confirm.swal2-confirm, .swal2-styled.swal2-cancel.swal2-confirm {
  --btn-color: #6271C2;
}
.swal2-styled.swal2-confirm.swal2-cancel, .swal2-styled.swal2-cancel.swal2-cancel {
  --btn-color: rgba(27, 27, 27, 0.5);
}

.multiline-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */
  white-space: pre-wrap; /* let the text wrap preserving spaces */
}

.search-input-div {
  position: relative;
  width: 274px;
}
.search-input-div input {
  width: 100%;
  padding: 9px 42px 9px 17px;
  border: 1px solid #A0A9DA;
  border-radius: 49px;
}
.search-input-div:after {
  content: url("/img/svg/magnifier.svg");
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 0;
}

.PeopleImage, .peopleImage {
  border-radius: 50%;
  border: 1px solid #E2E2E2;
}

/*46px*/
/*38px*/
/*31px*/
/*26px*/
/*24px*/
/*21px*/
/*18px*/
/*46px*/
/*38px*/
/*31px*/
/*26px*/
/*24px*/
/*21px*/
/*18px*/
/* #region navbar*/
.navbar {
  background-color: #FFFFFF;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08);
  z-index: 1020;
  padding-top: 14px;
  padding-bottom: 14px;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  /* #region unlogin */
  /* #endregion unlogin */
  /* #region login */
  /* #endregion login */
}
@media (max-width: 1024px) {
  .navbar.navbar-large {
    display: none;
  }
}
.navbar.navbar-small {
  display: none;
}
@media (max-width: 1024px) {
  .navbar.navbar-small {
    display: block;
  }
}
.navbar.navbar-small .menu-sidebar-toggle {
  position: absolute;
  right: 0;
  top: 0;
  padding: 14px;
  display: flex;
  width: auto;
  height: 100%;
  cursor: pointer;
}
@media (max-width: 810px) {
  .navbar.navbar-small .menu-sidebar-toggle {
    right: 33px;
  }
}
@media (max-width: 550px) {
  .navbar.navbar-small .menu-sidebar-toggle {
    right: 0;
  }
}
.navbar.navbar-small .organ-sidebar-toggle, .navbar.navbar-small .talent-sidebar-toggle {
  position: absolute;
  left: 0;
  top: 0;
  padding: 14px;
  display: flex;
  width: auto;
  height: 100%;
  cursor: pointer;
}
@media (max-width: 810px) {
  .navbar.navbar-small .organ-sidebar-toggle, .navbar.navbar-small .talent-sidebar-toggle {
    left: 33px;
  }
}
@media (max-width: 550px) {
  .navbar.navbar-small .organ-sidebar-toggle, .navbar.navbar-small .talent-sidebar-toggle {
    left: 0;
  }
}
.navbar .navbar-brand {
  margin: auto auto auto 0;
}
@media (max-width: 550px) {
  .navbar .navbar-brand {
    margin: auto;
  }
}
.navbar .navbar-info {
  margin-left: auto;
  width: 50%;
  flex: 0 0 auto;
}
.navbar .menu-link {
  text-decoration: none;
  border-bottom: transparent 3px solid;
}
.navbar .menu-link.active {
  color: #07145F;
  border-bottom: #07145F 3px solid;
}
.navbar .navbar-search {
  flex-wrap: nowrap;
  display: flex;
  flex-direction: row-reverse;
}
.navbar .navbar-search > * {
  flex: 0 0 auto;
}
.navbar .nav-login-btn {
  margin-top: 5px;
  margin-bottom: 5px;
}
.navbar .logged-in-menu li {
  margin-left: 48px;
}
@media (max-width: 1366px) {
  .navbar .logged-in-menu li {
    margin-left: 24px;
  }
}
@media (max-width: 1024px) {
  .navbar .logged-in-menu li {
    margin-left: 48px;
  }
}
.navbar .organ-info, .navbar .talent-info {
  margin-top: auto;
}
.navbar .organ-info .info-btn, .navbar .talent-info .info-btn {
  width: 200px;
  display: flex;
  border-radius: 47px;
  background-color: #DADEF3;
  border-color: #DADEF3;
  overflow: hidden;
  padding: 6px;
  margin-top: auto;
}
.navbar .organ-info .info-btn:after, .navbar .talent-info .info-btn:after {
  margin-top: auto;
  margin-bottom: auto;
  width: 10px;
  height: 10px;
  margin-left: 10px;
  margin-right: 10px;
  flex-shrink: 0;
  border: none;
  background-image: url("../../../img/svg/down-arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
}
.navbar .organ-info .info-btn.show:after, .navbar .talent-info .info-btn.show:after {
  transform: rotateX(180deg);
}
.navbar .organ-info .info-btn:hover, .navbar .organ-info .info-btn:focus, .navbar .talent-info .info-btn:hover, .navbar .talent-info .info-btn:focus {
  background-color: #A0A9DA;
}
.navbar .organ-info .info-image, .navbar .talent-info .info-image {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  margin-right: 5px;
}
.navbar .organ-info .info-image img, .navbar .talent-info .info-image img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.navbar .organ-info .info-name, .navbar .talent-info .info-name {
  width: 158px;
  padding-right: 30px;
  position: relative;
}
.navbar .organ-info .info-name .organ-message-count, .navbar .organ-info .info-name .talent-message-count, .navbar .talent-info .info-name .organ-message-count, .navbar .talent-info .info-name .talent-message-count {
  position: absolute;
  right: 0;
  top: 50%;
  width: 30px;
  transform: translateY(-50%);
  border-radius: 47px;
  background-color: #F95C5C;
  text-align: center;
  display: block;
  color: white;
}
.navbar .organ-info .info-dropdown-menu, .navbar .talent-info .info-dropdown-menu {
  padding: 15px;
  width: 260px;
}
.navbar .organ-info .info-dropdown-menu .info-image, .navbar .talent-info .info-dropdown-menu .info-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}
.navbar .organ-info .info-dropdown-menu .info-image img, .navbar .talent-info .info-dropdown-menu .info-image img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.navbar .organ-info .info-dropdown-menu .person-info, .navbar .talent-info .info-dropdown-menu .person-info {
  display: flex;
  border-bottom: 1px #E2E2E2 solid;
  padding-bottom: 20px;
}
.navbar .organ-info .info-dropdown-btn-div, .navbar .talent-info .info-dropdown-btn-div {
  padding-top: 20px;
  display: flex;
}
.navbar .organ-info .info-dropdown-btn-div .logout-btn, .navbar .talent-info .info-dropdown-btn-div .logout-btn {
  color: #6271C2;
}
.navbar .organ-info .info-dropdown-btn-div .logout-btn:hover, .navbar .talent-info .info-dropdown-btn-div .logout-btn:hover {
  color: #07145F;
}
.navbar .organ-info {
  width: 270px;
}
@media (max-width: 550px) {
  .navbar .nav-small {
    display: block;
  }
}

.nav-keyword-div .nav-search, .modal-keyword-div .nav-search {
  cursor: pointer;
  color: #6271C2;
}
.nav-keyword-div .nav-search:hover, .modal-keyword-div .nav-search:hover {
  color: #07145F;
}
.nav-keyword-div .keyword-search, .modal-keyword-div .keyword-search {
  border-radius: 49px;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08);
  padding: 6px 16px;
  border: 1px #6271C2 solid;
  background-color: white;
  display: flex;
  position: relative;
}
.nav-keyword-div .keyword-search .close-btn, .modal-keyword-div .keyword-search .close-btn {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.nav-keyword-div .keyword-div, .modal-keyword-div .keyword-div {
  border-right: 1px #7F7E80 solid;
  display: flex;
}
.nav-keyword-div .keyword, .modal-keyword-div .keyword {
  background-color: white;
  color: black;
  cursor: text;
  border: none;
  box-shadow: none;
  width: 140px;
  padding: 0;
}
.nav-keyword-div .keyword-type, .modal-keyword-div .keyword-type {
  background-color: white;
  border-radius: 5px;
  color: black;
  width: 80px;
  border: none;
  box-shadow: none;
  padding: 4px 23px 3px 7px;
  background-position: right 8px center;
  cursor: pointer;
}
.nav-keyword-div .keyword-type:focus, .modal-keyword-div .keyword-type:focus {
  background-color: #F2F2F2;
}
.nav-keyword-div .keyword-search-btn, .modal-keyword-div .keyword-search-btn {
  cursor: pointer;
  flex-shrink: 0;
}

@media (max-width: 550px) {
  .modal-keyword-div .keyword-search {
    padding: 6px;
  }
}
.modal-keyword-div .keyword {
  flex-grow: 1;
  border-right: 1px solid #E2E2E2;
  flex-shrink: 1;
}
@media (max-width: 550px) {
  .modal-keyword-div .keyword {
    width: auto;
    min-width: 0;
  }
}
.modal-keyword-div .keyword-type {
  margin: auto 12px;
}
@media (max-width: 550px) {
  .modal-keyword-div .keyword-type {
    margin: auto 4px;
  }
}
@media (max-width: 550px) {
  .modal-keyword-div .keyword-search-btn {
    padding: 4px 25px 5px;
    font-size: 1rem;
  }
}

/* #endregion*/
#menu-sidebar .modal-dialog {
  margin: auto 0 auto auto;
  width: 300px;
}
#menu-sidebar .modal-body {
  padding: 0;
  position: relative;
}
#menu-sidebar .close-menu-btn {
  position: absolute;
  left: 8px;
  top: 10px;
  padding: 8px;
  background-color: #e2e2e2;
  border-radius: 35px;
  font-size: 13px;
}
#menu-sidebar .navbar-brand {
  padding: 34px 34px 16px 34px;
  border-bottom: 1px #7F7E80 solid;
  /*text-align:center;*/
}
#menu-sidebar .login-region {
  text-align: center;
  padding: 19px 34px 19px 34px;
  border-bottom: 1px #7F7E80 solid;
}
#menu-sidebar #MenuCollapse {
  padding: 5px 0;
}
#menu-sidebar .accordion-button .menu-arrow {
  transform: rotate(-90deg);
}
#menu-sidebar .accordion-button:after {
  display: none;
}
#menu-sidebar .accordion-button.collapsed .menu-arrow {
  transform: rotate(0);
}
#menu-sidebar .person-info {
  display: flex;
}
#menu-sidebar .info-image {
  margin: auto 7px auto 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
#menu-sidebar .info-image img {
  width: 100%;
  height: 100%;
}
#menu-sidebar .info-text {
  color: #AEAEAE;
  margin-left: auto;
  flex-shrink: 0;
  margin-top: auto;
}
#menu-sidebar .info-btn-div {
  display: flex;
  margin-top: 8px;
}
#menu-sidebar .side-search-btn {
  cursor: pointer;
}
#menu-sidebar .more-link {
  color: #6271C2;
}
#menu-sidebar .more-link:hover {
  color: #07145F;
}

#organ-sidebar .modal-dialog, #talent-sidebar .modal-dialog {
  margin: auto auto auto 0;
  width: 140px;
}
#organ-sidebar .modal-body, #talent-sidebar .modal-body {
  padding: 0;
}
#organ-sidebar .organ-side-bar, #organ-sidebar .talent-side-bar, #talent-sidebar .organ-side-bar, #talent-sidebar .talent-side-bar {
  border-radius: unset;
  border: none;
}

.logo {
  height: 80px;
}
@media (max-width: 550px) {
  .logo {
    max-width: 50%;
  }
}

@media (max-width: 550px) {
  h1.navbar-brand {
    text-align: center;
  }
}

#menu-sidebar .logo {
  height: 50px;
  max-width: 230px;
}

.nav-keword-region {
  height: 45px;
  display: flex;
}

.nav-member-region {
  height: 45px;
  display: flex;
}
.nav-member-region .logout-btn {
  margin: auto 0 0 12px;
  padding: 6px 0;
}

/*46px*/
/*38px*/
/*31px*/
/*26px*/
/*24px*/
/*21px*/
/*18px*/
/* #region footer*/
.footer {
  background-color: #F2F2F2;
  padding: 59px 0;
  border-top: 1px solid #CBCBCB;
  margin-top: 64px;
}
.footer .footer-region-1 {
  border-bottom: 1px solid #CBCBCB;
  margin-bottom: 28px;
}
.footer .footer-region-1 .footer-link-region {
  width: 60%;
}
@media (max-width: 1024px) {
  .footer .footer-region-1 .footer-link-region {
    width: 100%;
    text-align: center;
  }
}
.footer .footer-region-1 .footer-link-region ul {
  padding-left: 0;
}
.footer .footer-region-1 .footer-link-region ul li {
  padding-bottom: 16px;
}
.footer .footer-region-1 .footer-link-region ul li a {
  color: #7F7E80;
}
.footer .footer-region-1 .footer-link-region h6 {
  padding-bottom: 16px;
}
.footer .footer-region-1 .company-info-region {
  width: 40%;
  padding: 0 28px 28px 40px;
}
@media (max-width: 1024px) {
  .footer .footer-region-1 .company-info-region {
    width: 100%;
    text-align: center;
    border-top: 1px solid #CBCBCB;
    padding-top: 40px;
  }
}
.footer .footer-region-1 .company-info-region .logo-img {
  padding-bottom: 32px;
  display: block;
}
@media (max-width: 1024px) {
  .footer .footer-region-1 .company-info-region .logo-img {
    display: none;
  }
}
.footer .footer-region-1 .company-info-region .contact-us-btn {
  margin-top: 12px;
}
@media (max-width: 1024px) {
  .footer .footer-region-1 .company-info-region .contact-us-btn {
    width: 100%;
  }
}
.footer .footer-region-1 .company-info-region .info-span {
  color: #7F7E80;
}
@media (max-width: 1024px) {
  .footer .footer-region-1 .pad-none {
    display: none;
  }
}
.footer .footer-region-1 .pad-break {
  display: none;
}
@media (max-width: 1024px) {
  .footer .footer-region-1 .pad-break {
    display: block;
  }
}
.footer .footer-region-2 {
  color: #7F7E80;
  font-size: 14px;
}
.footer .footer-region-2 .footer-contact-link {
  padding-left: 24px;
}
@media (max-width: 1024px) {
  .footer .footer-region-2 .footer-contact-link {
    padding-top: 24px;
  }
  .footer .footer-region-2 .footer-contact-link:first-child {
    margin-left: auto;
    padding-left: 0;
  }
  .footer .footer-region-2 .footer-contact-link:last-child {
    margin-right: auto;
  }
}
.footer .footer-region-2 .footer-contact-region {
  width: 30%;
}
@media (max-width: 1024px) {
  .footer .footer-region-2 .footer-contact-region {
    width: 100%;
  }
}
.footer .footer-region-2 .footer-contact-region > * {
  display: flex;
}
@media (max-width: 1024px) {
  .footer .footer-region-2 .footer-contact-region > * {
    display: block;
    text-align: center;
    padding-bottom: 40px;
  }
}
.footer .footer-region-2 .footer-right-region {
  width: 70%;
}
@media (max-width: 1024px) {
  .footer .footer-region-2 .footer-right-region {
    width: 100%;
  }
}
.footer .footer-region-2 .footer-right-region > * {
  display: flex;
}
@media (max-width: 1024px) {
  .footer .footer-region-2 .footer-right-region > * {
    display: block;
    text-align: center;
    padding-bottom: 40px;
  }
}
@media (max-width: 1024px) {
  .footer .footer-region-2 .footer-right-region .footer-right-info {
    padding-bottom: 24px;
  }
}

/* #endregion*/
/*46px*/
/*38px*/
/*31px*/
/*26px*/
/*24px*/
/*21px*/
/*18px*/
/* #region ad*/
.adbar-section .ad-carousel {
  width: 100%;
}
.adbar-section .ad-carousel img {
  width: 100%;
}
.adbar-section .ad-carousel .adclick {
  position: absolute;
  width: 100%;
  display: block;
  top: 0;
  left: 0;
}
.adbar-section .ad-bar-1080x300 img, .adbar-section .ad-bar-1080x300 .adclick {
  aspect-ratio: 1080/300;
}
.adbar-section .ad-bar-1080x150 {
  border-radius: 5px;
  overflow: hidden;
}
.adbar-section .ad-bar-1080x150 img, .adbar-section .ad-bar-1080x150 .adclick {
  aspect-ratio: 1080/150;
}
.adbar-section .ad-bar-220x220 {
  border-radius: 5px;
  overflow: hidden;
}
.adbar-section .ad-bar-220x220 img, .adbar-section .ad-bar-220x220 .adclick {
  aspect-ratio: 220/220;
}
.adbar-section .ad-bar-320x120 {
  border-radius: 5px;
  overflow: hidden;
}
.adbar-section .ad-bar-320x120 img, .adbar-section .ad-bar-320x120 .adclick {
  aspect-ratio: 320/120;
}
.adbar-section .ad-bar-full {
  border-radius: 0;
}
@media (max-width: 550px) {
  .adbar-section .col-4 {
    width: 100%;
    margin-bottom: 8px;
  }
}
.adbar-section .carousel-indicators {
  margin-bottom: 0px;
}

/* #endregion */
body {
  background-color: #F8F8F8;
  color: #1B1B1B;
}

.login-bg {
  background-image: url("../../../img/ViewImg/Index/login.png");
  background-size: auto 102%;
  background-repeat: no-repeat;
}
.login-bg.login-bg-o {
  background-image: url("../../../img/ViewImg/Index/login-o.png");
}
.login-bg.login-bg-t {
  background-image: url("../../../img/ViewImg/Index/login-t.png");
}

.regist-bg {
  background-image: url("../../../img/ViewImg/Index/Regist-bg.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
}

.primary-link {
  color: #6271C2;
}
.primary-link:hover {
  color: #07145F;
}

.gototop {
  position: fixed;
  right: 20px;
  bottom: 20%;
  width: 48px;
  height: 48px;
  background-color: #FFFFFF;
  border-radius: 50%;
  padding: 2px 0;
  cursor: pointer;
  text-align: center;
  border: 1px solid #6271C2;
  color: #6271C2;
}
@media (max-width: 810px) {
  .gototop {
    bottom: 10%;
  }
}
.gototop:hover {
  color: #FFFFFF;
  background-color: #6271C2;
}
.gototop i {
  width: 100%;
  text-align: center;
  font-size: 16px;
}
.gototop p {
  font-size: 14px;
  margin: -3px 0 0 0;
  line-height: 15px;
}

.fa-arrow-down-wide-short, fa-arrow-down-short-wide {
  color: #AEAEAE;
}

#howToRun .type-modal-btn {
  background-color: #E2E2E2;
  border: none;
}
#howToRun .type-modal-btn.btn-gray {
  background-color: #6271C2;
  border: none;
}

@media (max-width: 550px) {
  #LoginModal .login-bg {
    background-image: none;
  }
}
@media (max-width: 550px) {
  #LoginModal .modal-content {
    width: 300px;
    margin: auto;
  }
}
#LoginModal .login-type-region {
  min-width: 50%;
  margin-left: auto;
  text-align: center;
}
@media (max-width: 550px) {
  #LoginModal .login-type-region {
    width: 100%;
  }
}

@media (max-width: 810px) {
  #LoginAccountModal .login-bg {
    background-image: none;
  }
}
#LoginAccountModal .login-region {
  min-width: 50%;
  margin-left: auto;
}
@media (max-width: 810px) {
  #LoginAccountModal .login-region {
    width: 100%;
  }
}
@media (max-width: 375px) {
  #LoginAccountModal .login-btn-list {
    flex-wrap: wrap;
  }
  #LoginAccountModal .login-btn-list > * {
    width: 100%;
  }
  #LoginAccountModal .login-btn-list > *:nth-child(2) {
    order: -1;
    margin: 0 auto 12px auto;
  }
}
#LoginAccountModal .code-region {
  flex-grow: 1;
}
#LoginAccountModal .random-code-region {
  height: 38px;
  width: 90px;
  margin: 0 12px;
  flex-shrink: 0;
}
#LoginAccountModal .random-code-region img {
  border: 1px #CBCBCB solid;
  border-radius: 5px;
  overflow: hidden;
}
#LoginAccountModal .change-code-region {
  margin: auto 0;
}

.psd-div {
  position: relative;
}
.psd-div input {
  padding-right: 30px;
}
.psd-div .psd-show {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}

@media (max-width: 810px) {
  #PasswordForgetModal .forget-info-region {
    width: 100%;
  }
}
@media (max-width: 810px) {
  #PasswordForgetModal .side-pic-region {
    display: none;
  }
}

@media (max-width: 550px) {
  #RegistModal .regist-bg {
    background-image: none;
  }
}
@media (max-width: 550px) {
  #RegistModal .modal-content {
    width: 300px;
    margin: auto;
  }
}
#RegistModal .regist-type-region {
  min-width: 50%;
  margin-left: auto;
  text-align: center;
}
@media (max-width: 550px) {
  #RegistModal .regist-type-region {
    width: 100%;
  }
}

@media (max-width: 810px) {
  #RegistEmailModal .regist-info-region {
    width: 100%;
  }
}
@media (max-width: 810px) {
  #RegistEmailModal .side-pic-region {
    display: none;
  }
}
#RegistEmailModal .regist-check-div {
  background-color: #DADEF3;
  border-radius: 5px;
}

#RegistSuccessModal {
  word-break: break-word;
}

#LoadingModal .loading-div {
  animation: rotate 1s linear infinite;
  margin: auto;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.active-link:hover {
  color: #6271C2 !important;
}

.required-keyword::placeholder {
  color: #dc3545;
}