.text-left {
  text-align: right;
}

.text-center {
  text-align: right;
}

.text-right {
  text-align: right;
}

.btn-group {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
}
.btn-group button {
  background: #e4e4e4;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  padding: 1rem;
  border-radius: 2rem;
}
.btn-group button.active {
  background: #2f80ed;
  box-shadow: 0px 4px 10px rgba(47, 128, 237, 0.25);
}

body {
  width: 100%;
  height: 100%;
}

input {
  padding: 0.625rem 1rem;
}

input::placeholder {
  color: #aaa;
}

.wrap {
  position: relative;
  height: 100vh;
  background-image: url("/portal/js/user/default/style/img/background_left.png"), url("/portal/js/user/default/style/img/background_right.png");
  background-repeat: no-repeat;
  background-position: left top, right bottom;
  /*font: 180%;*/
  font-size: 1rem;
}

#header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: #fff;
  box-shadow: 0px 4px 20px 5px rgba(136, 158, 235, 0.05);
}
#header button, #header p {
  font-size: 1.125rem;
}
#header .head-container {
  width: 100%;
  max-width: 83.5rem;
  height: 4rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#header .head-container .logo img {
  width: 12.75rem;
}
#header #auth {
  display: none;
}
#header #auth .inner {
  display: flex;
  align-items: center;
  /*justify-content: center;*/
  justify-content: flex-start;
  width: 68rem;
}
#header #auth .inner .menu {
  display: flex;
  width: 100%;
  margin-top: 10px;
}
#header #auth .userInfo-group {
  width: 100%;
  background: #fff;
  text-align: center;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
#header #auth .userInfo-group p {
  display: inline-block;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 430;
  color: #222;
}
#header #auth .userInfo-group span {
  /*display: block;*/
  font-size: 0.8rem;
  margin-right: 0.7rem;
  margin-left: 0.25rem;
  width: 1.125rem;
  height: 1.125rem;
}
#header #auth .authLink {
  color: #898989;
}
#header #auth .authLink.active {
  color: #2f80ed;
}
#header #auth span {
  margin: 0 1rem;
}
#header #auth .homeBtn {
  background: url("/portal/js/user/default/style/img/layout/home_button.png") center no-repeat;
  width: 3.25rem;
  height: 1.25em;
  /*box-shadow: 0px 4px 10px rgba(47, 128, 237, 0.25);*/
  box-shadow: 6px 4px 12px rgb(47 128 237 / 25%);
}
#header #auth .homeBtn.active {
  background: url("/portal/js/user/default/style/img/layout/home_button_active.png") center no-repeat;
}
#header #auth .adminBtn {
  background: url("/portal/js/user/default/style/img/layout/admin_button.png") center no-repeat;
  width: 5.375rem;
  height: 1.25em;
}
#header #auth .adminBtn.active {
  background: url("/portal/js/user/default/style/img/layout/admin_button_active.png") center no-repeat;
}
#header #noAuth {
  display: block;
}

#header .header-btn {
  float: right;
  width: 100px;
  height: 30px;
  border-radius: 15px;
  border: solid 1px #818181;
  text-align: center;
  margin-top: -2px;
  margin-right: 10px;
}
#header .header-btn:hover {
  border: solid 1px #2F80ED;
}
#header .header-btn:hover > #myInfoBtn {
  color: #2F80ED;
}
#header .header-btn:hover > #logoutBtn {
  color: #2F80ED;
}
#header .header-btn .btn-text {
  font-family: S-CoreDream-5;
  font-size: 15px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 27px;
  letter-spacing: -0.5px;
  color: #818181;
  cursor: pointer;
}
/*#header .header-btn .btn-text:hover {*/
/*  color: #2F80ED;*/
/*}*/


#login {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#login .logo {
  text-align: center;
  margin-bottom: 5.25rem;
}
#login .logo img {
  width: 21.25rem;
}
#login .input-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
#login .input-group img.id_label {
  width: 2.25rem;
  margin-bottom: 0.5rem;
}
#login .input-group img.pw_label {
  width: 3.125rem;
  margin-bottom: 0.5rem;
}
#login .input-group label {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
}
#login .input-group input {
  border: 1px solid #ddd;
  height: 2.5rem;
  width: 26.25rem;
}

#changePw-link {
  color: #828282;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: underline;
}

#loginBtn {
  width: 420px;
  height: 60px;
  border-radius: 18px;
  background: url("/portal/js/user/default/style/img/layout/didc_login_button.png") center no-repeat;
}

#loginBtn.active {
  background: url("/portal/js/user/default/style/img/layout/didc_login_button_active.png") center no-repeat;
  height: 60px;
  border-radius: 18px;
  box-shadow: 0px 4px 10px rgba(47, 128, 237, 0.25);
}

.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.4);
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.modalContent {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  box-shadow: 0px 0px 20px rgba(136, 158, 235, 0.2);
  border-radius: 2rem;
  max-height: 90%;
  overflow-y: auto;
}
.modalContent .modalArea-wrap {
  width: 31.75rem;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modalContent .addAuthrInfoArea-wrap {
  width: 25rem;
  background-color: #fff;
  box-shadow: 0px 0px 20px rgba(136, 158, 235, 0.2);
  border-radius: 2rem;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.modalContent h5 {
  font-family: "SCDream", sans-serif;
  font-size: 1.25rem;
  color: #222;
  font-weight: 600;
  margin-bottom: 5%;
}
.modalContent .input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.modalContent .input-group label {
  /*color: #aaa;*/
  /*font-size: 0.625rem;*/
  color: #666666;
  font-size: 0.8rem;
  font-weight: normal;
}
.modalContent .input-group input {
  /*width: 22rem;*/
  /*height: 2.75rem;*/
  border: 1px solid #d1d1d1;
  border-radius: 0.25rem;
  margin-top: 0.25rem;
  font-size: 0.9rem;
}
.modalContent .input-group span {
  color: #d74f4f;
  font-size: 0.73rem;
  font-weight: normal;
  margin-top: 0.2rem;
}
.modalContent .input-group select {
  width: 22rem;
  /*height: 2.75rem;*/
  border: 1px solid #d1d1d1;
  border-radius: 0.25rem;
  margin-top: 0.25rem;
  padding: 0.8rem 0.8rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  background: url(/portal/js/user/default/style/img/icon/icon_selectbox_nerrow.jpeg) no-repeat 100% 50%;
}
.modalContent .input-group-row {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}
.modalContent .input-group-row label {
  color: #666666;
  font-size: 0.8rem;
  font-weight: normal;
}
.modalContent .input-group-row input {
  width: 6.7rem;
  margin-right: 0.2rem;
  margin-left: 0.2rem;
}
.modalContent .input-group-row select {
  width: 15rem;
  height: 2.75rem;
  border: 1px solid #d1d1d1;
  border-radius: 0.25rem;
  margin-top: 0.25rem;
  padding: 0.8rem 0.8rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  background: url(/portal/js/user/default/style/img/icon/icon_selectbox_nerrow.jpeg) no-repeat 100% 50%;
}
.modalContent .input-group-row span {
  vertical-align: middle;
  line-height: 2.75rem;
}
.modalContent .input-group-row .desc {
  color: #d74f4f;
  font-size: 0.73rem;
  font-weight: normal;
  margin-top: 0.2rem;
  line-height: 1.5rem;
}
.modalContent .input-group-row .inputCheckbox {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.modalContent .button-group {
  justify-content: space-between;
  flex-direction: column;
  margin-bottom: 2%;
  margin-top: 8%;
  /* 고객사 커스텀 요청 : 삭제 버튼 제거에 의한 정렬 추가 */
  text-align: center;
}
.modalContent .button-group button {
  width: 10rem;
  height: 2rem;
  border: 2px solid #c0c0c0;
  border-radius: 5px;
  font-size: 0.875rem;
  font-weight: 400;
  color: #898989;
  margin: auto 0.4rem;
}
.modalContent .button-group button:hover {
  border: 2px solid #2F80ED;
  color: #2F80ED;
}
.modalContent .save {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
}
.modalContent .save button {
  background: #2f80ed;
  width: 11.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  padding: 0.75rem;
  border-radius: 0.25rem;
}
.modalContent .next {
  display: flex;
  justify-content: right;
  align-items: center;
  margin-top: 1.5rem;
  margin-right: -1.5rem;
  margin-bottom: -1rem;
}
.modalContent .next button {
  background: #2f80ed;
  width: 4.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  padding: 0.75rem;
  border-radius: 0.25rem;
}
.modalContent #modalSubmitImgBtn {
  width: 11.25rem;
  height: 2.75rem;
  background: url("/portal/js/user/default/style/img/layout/save_button.png") center no-repeat;
}
.modalContent .modal-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
}
.modalContent .modal-close button {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #e5e5e5;
  border-radius: 50%;
  text-indent: -9999px;
}
.modalContent .modal-close button::before, .modalContent .modal-close button::after {
  content: "";
  position: absolute;
  width: 0.625rem;
  height: 0.125rem;
  left: 50%;
  top: 50%;
  background: #4f4f4f;
}
.modalContent .modal-close button::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.modalContent .modal-close button::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

#footer {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translate(-50%);
}
#footer p {
  opacity: 0.5;
  font-size: 14px;
  font-family: "myriad-pro", sans-serif;
  font-weight: normal;
}

.container.none {
  position: relative;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 70rem;
  max-height: 70rem;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  padding: 0;
}

.container {
  position: relative;
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 45rem;
  height: 750px;
  width: 100%;
  max-width: 83.5rem;
  background-color: #fff;
  box-shadow: 0px 0px 20px rgba(136, 158, 235, 0.2);
  border-radius: 0.75rem;
  box-sizing: border-box;
  /*padding: 6.5rem 10.5rem;*/
  padding: 6.5rem 10.5rem 2.5rem 10.5rem;
  overflow: auto;
}
.container > button {
  position: absolute;
  top: 2.5rem;
  right: 8.75rem;
  padding: 0.5rem 2rem;
  font-size: 0.875rem;
  color: #2f80ed;
  border: 1px solid #2f80ed;
  border-radius: 0.25rem;
}
.container .userMainBtn-group {
  position: absolute;
  top: 2.5rem;
  right: 2rem;
  display: inline-flex;
}
.container .userMainBtn-group button {
  box-sizing: border-box;
  /*position: absolute;*/
  width: 100px;
  height: 37px;
  background: #FFFFFF;
  border: 1px solid #2F80ED;
  border-radius: 5px;
  font-weight: 400;
  font-size: 13px;
  line-height: 22px;
  color: #2F80ED;
  margin-left: 0.5rem;
}
.container .userMainBtn-group .userMainSelectBtn {
  box-sizing: border-box;
  /*position: absolute;*/
  width: 160px;
  height: 37px;
  background: #FFFFFF;
  border: 1px solid #2F80ED;
  border-radius: 5px;
  font-weight: 400;
  font-size: 13px;
  line-height: 22px;
  color: #2F80ED;
  margin-left: 0.5rem;
  background: url(/portal/js/user/default/style/img/icon/icon_selectbox_nerrow.jpeg) no-repeat 100% 50%;
}
.container .userMainBtn-group .userMainSelectBtn ul {
  list-style-type: none;
  padding-left: 0px;
}
.container .userMainBtn-group .userMainSelectBtn .selected {
  display: flex;
  justify-content: space-between;
  padding: 11px 8px;
}
.container .userMainBtn-group .userMainSelectBtn .selected .selected-value {
  max-width: 90px;
}
/*.container .userMainBtn-group .userMainSelectBtn .selected .arrow {*/
/*  width: 24px;*/
/*  background: url("https://uxwing.com/wp-content/themes/uxwing/download/02-arrow-direction/arrow-bottom.png") no-repeat 70% 50%;*/
/*  background-size: 50% 50%;*/
/*}*/
.container .userMainBtn-group .userMainSelectBtn ul {
  width: 160px;
  border: 1px solid #2F80ED;
  border-radius: 5px;
  position: absolute;
  background: #fff;
  border-top: none;
  margin: 1px 0 0 -1px;
  cursor: pointer;
}
.container .userMainBtn-group .userMainSelectBtn ul li {
  padding: 8px 5px;
}
.container .userMainBtn-group .userMainSelectBtn ul li,
.container .userMainBtn-group .userMainSelectBtn .selected .selected-value {
  overflow: hidden;
}
.container .userMainBtn-group .userMainSelectBtn ul li:hover {
  background: rgba(168, 156, 235, 0.35)
}
.container .userMainBtn-group .userMainSelectBtn ul {
  display: none;
}
.container .userMainBtn-group .userMainSelectBtn.active ul {
  display: initial;
}

.d-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /*justify-content: space-between;*/
  justify-content: flex-start;
  margin-bottom: 2rem;
}
.d-grid:last-child {
  margin-bottom: 0;
}

.d-grid > * {
  flex: 0 0 auto;
  width: calc(25% - 2rem);
  display: block;
}

.grid-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 1rem 1rem;
}
.grid-group .grid-group-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #f8f8f8;
  border-radius: 0.5rem;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
}
.grid-group .grid-group-inner.prefer {
  background: url("/portal/js/user/default/style/img/icon/icon_star_outline.svg") left top no-repeat;
}
.grid-group .icon {
  width: 100%;
  height: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: 6.5rem;
}
.grid-group .text-group {
  width: 100%;
  height: 5rem;
  background: #fff;
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.grid-group .text-group p {
  /*display: flex;*/
  /*align-items: center;*/
  /*color: #222;*/
  margin: 0 0 1px;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.1rem;
}
.grid-group .text-group p:first-child {
  font-weight: 600;
  margin-bottom: 0.2rem;
}
/*.grid-group .text-group p:last-child {*/
/*  font-size: 0.875rem;*/
/*  font-weight: 400;*/
/*  line-height: 1.1rem;*/
/*}*/
.grid-group .text-group p span {
  display: block;
  font-size: 0;
  margin-right: 0.25rem;
  width: 1.125rem;
  height: 1.125rem;
  /*background: url("/portal/js/user/default/style/img/icon/icon_star_outline.svg") center center no-repeat;*/
}

.grid-group.add .grid-group-inner {
  outline: 1px solid #bfbbbb;
  box-shadow: 0px 4px 10px rgba(47, 128, 237, 0.15);
}

.grid-group.active .grid-group-inner {
  outline: 1px solid #2f80ed;
  box-shadow: 0px 4px 10px rgba(47, 128, 237, 0.15);
  /* Email Icon */
  /* Eye Icon */
  /* Face Icon */
  /* FingerPrint Icon */
  /* Hand Icon */
  /* Mobile Icon */
  /* Pattern Icon */
  /* PC Icon */
  /* Pin Icon */
  /* Push Icon */
  /* SMS Icon */
  /* Voice Icon */
  /* Web Icon */
}
.grid-group.active .grid-group-inner.prefer {
  /*background: url("/portal/js/user/default/style/img/icon/icon_star_outline.svg") left top no-repeat;*/
  background: url("/portal/js/user/default/style/img/icon/icon_yellow_star.png") left top no-repeat;
}
.grid-group.active .grid-group-inner .email {
  background: url("/portal/js/user/default/style/img/icon/icon_email_on.svg") center no-repeat;
}
.grid-group.active .grid-group-inner .eyeprint {
  background: url("/portal/js/user/default/style/img/icon/icon_eye_on.svg") center no-repeat;
}
.grid-group.active .grid-group-inner .faceprint {
  background: url("/portal/js/user/default/style/img/icon/icon_face_on.svg") center no-repeat;
}
.grid-group.active .grid-group-inner .fingerprint {
  background: url("/portal/js/user/default/style/img/icon/icon_fingerPrint_on.svg") center no-repeat;
}
.grid-group.active .grid-group-inner .handprint {
  background: url("/portal/js/user/default/style/img/icon/icon_hand_on.svg") center no-repeat;
}
.grid-group.active .grid-group-inner .pcDongle {
  background: url("/portal/js/user/default/style/img/icon/icon_pcDongle_on.svg") center no-repeat;
}
.grid-group.active .grid-group-inner .pcFaceprint {
  background: url("/portal/js/user/default/style/img/icon/icon_pcFaceprint_on.svg") center no-repeat;
}
.grid-group.active .grid-group-inner .mobile {
  background: url("/portal/js/user/default/style/img/icon/icon_mobile_on.svg") center no-repeat;
}
.grid-group.active .grid-group-inner .pattern {
  background: url("/portal/js/user/default/style/img/icon/icon_pattern_on.svg") center no-repeat;
}
.grid-group.active .grid-group-inner .pc {
  background: url("/portal/js/user/default/style/img/icon/icon_pc_on.svg") center no-repeat;
}
.grid-group.active .grid-group-inner .passcode {
  background: url("/portal/js/user/default/style/img/icon/icon_pin_on.svg") center no-repeat;
}
.grid-group.active .grid-group-inner .push {
  background: url("/portal/js/user/default/style/img/icon/icon_push_on.svg") center no-repeat;
}
.grid-group.active .grid-group-inner .sms {
  background: url("/portal/js/user/default/style/img/icon/icon_sms_on.svg") center no-repeat;
}
.grid-group.active .grid-group-inner .voiceprint {
  background: url("/portal/js/user/default/style/img/icon/icon_voice_on.svg") center no-repeat;
}
.grid-group.active .grid-group-inner .web {
  background: url("/portal/js/user/default/style/img/icon/icon_web_on.svg") center no-repeat;
}
.grid-group.active .grid-group-inner .fido2 {
  background: url("/portal/js/user/default/style/img/icon/icon_fido2_on.svg") center no-repeat;
}

.grid-group.lock .grid-group-inner {
  outline: 1px solid #f8f8f8;
  box-shadow: 0px 4px 10px rgba(47, 128, 237, 0.15);
  /* Email Icon */
  /* Eye Icon */
  /* Face Icon */
  /* FingerPrint Icon */
  /* Hand Icon */
  /* Mobile Icon */
  /* Pattern Icon */
  /* PC Icon */
  /* Pin Icon */
  /* Push Icon */
  /* SMS Icon */
  /* Voice Icon */
  /* Web Icon */
}
.grid-group.lock .grid-group-inner.prefer {
  background: url("/portal/js/user/default/style/img/icon/icon_star_outline.svg") left top no-repeat;
}
.grid-group.lock .grid-group-inner .email {
  background: url("/portal/js/user/default/style/img/icon/icon_email_lock.svg") center no-repeat;
}
.grid-group.lock .grid-group-inner .eye {
  background: url("/portal/js/user/default/style/img/icon/icon_eye_lock.svg") center no-repeat;
}
.grid-group.lock .grid-group-inner .face {
  background: url("/portal/js/user/default/style/img/icon/icon_face_lock.svg") center no-repeat;
}
.grid-group.lock .grid-group-inner .fingerprint {
  background: url("/portal/js/user/default/style/img/icon/icon_fingerPrint_lock.svg") center no-repeat;
}
.grid-group.lock .grid-group-inner .hand {
  background: url("/portal/js/user/default/style/img/icon/icon_hand_lock.svg") center no-repeat;
}
.grid-group.lock .grid-group-inner .pcDongle {
  background: url("/portal/js/user/default/style/img/icon/icon_pcDongle_lock.svg") center no-repeat;
}
.grid-group.lock .grid-group-inner .pcFaceprint {
  background: url("/portal/js/user/default/style/img/icon/icon_pcFaceprint_lock.svg") center no-repeat;
}
.grid-group.lock .grid-group-inner .mobile {
  background: url("/portal/js/user/default/style/img/icon/icon_mobile_lock.svg") center no-repeat;
}
.grid-group.lock .grid-group-inner .pattern {
  background: url("/portal/js/user/default/style/img/icon/icon_pattern_lock.svg") center no-repeat;
}
.grid-group.lock .grid-group-inner .pc {
  background: url("/portal/js/user/default/style/img/icon/icon_pc_lock.svg") center no-repeat;
}
.grid-group.lock .grid-group-inner .passcode {
  background: url("/portal/js/user/default/style/img/icon/icon_pin_lock.svg") center no-repeat;
}
.grid-group.lock .grid-group-inner .push {
  background: url("/portal/js/user/default/style/img/icon/icon_push_lock.svg") center no-repeat;
}
.grid-group.lock .grid-group-inner .sms {
  background: url("/portal/js/user/default/style/img/icon/icon_sms_lock.svg") center no-repeat;
}
.grid-group.lock .grid-group-inner .voice {
  background: url("/portal/js/user/default/style/img/icon/icon_voice_lock.svg") center no-repeat;
}
.grid-group.lock .grid-group-inner .web {
  background: url("/portal/js/user/default/style/img/icon/icon_web_lock.svg") center no-repeat;
}
.grid-group.lock .grid-group-inner .fido2 {
  background: url("/portal/js/user/default/style/img/icon/icon_fido2_lock.svg") center no-repeat;
}

.tab {
  display: flex;
  flex-direction: row;
  justify-items: center;
  margin-bottom: 0.5rem;
}
.tab button {
  width: 9.75rem;
  padding: 0.75rem 2rem;
  border: 1px solid #ddd;
  border-radius: 5px 5px 0px 0px;
  margin-right: 0.5rem;
}
.tab button:last-child {
  margin-right: 0;
}
.tab .tablinks {
  background: #fff;
}
.tab .tablinks.active {
  background: #f2f2f2;
}

.tabcontent {
  display: none;
  width: 100%;
  max-width: 83.5rem;
  height: 45.5rem;
  padding: 1.5rem;
  background: #fff;
  box-shadow: 0px 0px 20px rgba(136, 158, 235, 0.2);
  border-radius: 0rem 0rem 0.75rem 0.75rem;
  animation: fadeIn 0.3s;
}

.tabcontent.active {
  display: block;
}

@media all and (max-width: 1600px) {
  #header .head-container {
    width: 100%;
    max-width: 80rem;
  }

  .container.none {
    max-width: 80rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .container {
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80rem;
    padding: 5rem 7.5rem 3rem 7.5rem;
  }
  .container > button {
    top: 2rem;
    right: 6.5rem;
    padding: 0.5rem 2rem;
  }

  .d-grid {
    margin-bottom: 1rem;
  }

  .d-grid > * {
    width: calc(25% - 2rem);
  }

  .grid-group .text-group {
    width: 100%;
    height: 5.75rem;
  }

  .tabcontent {
    display: none;
    height: 37.5rem;
    padding: 1.5rem;
    background: #fff;
    box-shadow: 0px 0px 20px rgba(136, 158, 235, 0.2);
    border-radius: 0rem 0rem 0.75rem 0.75rem;
    animation: fadeIn 0.3s;
  }
}
@media all and (max-width: 1440px) {
  #header .head-container {
    width: 100%;
    max-width: 80rem;
  }

  .container.none {
    max-width: 80rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .container {
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80rem;
    padding: 5rem 7.5rem 3rem 7.5rem;
  }
  .container > button {
    top: 2rem;
    right: 6.5rem;
    padding: 0.5rem 2rem;
  }
  .container a {
    top: 2rem;
    right: 6.5rem;
  }

  .d-grid {
    margin-bottom: 1rem;
  }

  .d-grid > * {
    width: calc(25% - 2rem);
  }

  .grid-group .text-group {
    width: 100%;
    height: 5.75rem;
  }

  .tabcontent {
    display: none;
    height: 37.5rem;
    padding: 1.5rem;
    background: #fff;
    box-shadow: 0px 0px 20px rgba(136, 158, 235, 0.2);
    border-radius: 0rem 0rem 0.75rem 0.75rem;
    animation: fadeIn 0.3s;
  }
}
@media all and (max-width: 1366px) {
  #header .head-container {
    width: 67.5em;
    height: 4.5rem;
  }

  .container.none {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 67.5rem;
  }

  .container {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 67.5em;
    padding: 5rem 7.25rem 4rem;
  }
  .container > button {
    top: 2rem;
    right: 7rem;
  }

  .d-grid {
    margin-bottom: 1rem;
  }

  .d-grid > * {
    width: calc(25% - 1rem);
  }

  .grid-group .grid-group-inner .icon {
    height: 8rem;
    background-size: 4.5rem;
  }
  .grid-group .grid-group-inner .text-group {
    height: 5.5rem;
    padding: 0.75rem 1rem;
  }
  .grid-group .grid-group-inner .text-group p {
    display: flex;
    align-items: center;
    color: #222;
  }
  .grid-group .grid-group-inner .text-group p:first-child {
    font-weight: 600;
    margin-bottom: 0.5rem;
  }
  .grid-group .grid-group-inner .text-group p:last-child {
    font-size: 0.875rem;
    font-weight: 400;
  }
  .grid-group .grid-group-inner .text-group p span {
    display: block;
    font-size: 0;
    margin-right: 0.25rem;
    width: 1.125rem;
    height: 1.125rem;
    /*background: url("/portal/js/user/default/style/img/icon/icon_star_outline.svg") center center no-repeat;*/
  }

  .grid-group.active .grid-group-inner .icon,
.grid-group.lock .grid-group-inner .icon {
    background-size: 4.5rem;
  }

  .tab button {
    width: 7.5rem;
    font-size: 0.875rem;
    padding: 0.75rem 1.5rem;
  }

  .tabcontent {
    max-width: 67.5rem;
    height: 32rem;
    padding: 1.5rem;
    background: #fff;
    box-shadow: 0px 0px 20px rgba(136, 158, 235, 0.2);
    border-radius: 0rem 0rem 0.75rem 0.75rem;
    animation: fadeIn 0.3s;
  }

  .tabcontent.active {
    display: block;
  }
}
@media all and (max-width: 1280px) {
  #header button, #header p {
    font-size: 1rem;
  }
  #header .head-container {
    height: 4rem;
  }
  #header .head-container .logo img {
    width: 8.5rem;
  }

  .container {
    top: 51.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 5rem 7.25rem 3rem;
  }

  .grid-group .icon {
    height: 7.5rem;
  }
}

/*# // sourceMappingURL=style.css.map */