@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
  font-family: "Poppins", sans-serif;
  --h1: 1.5rem;
  --h2: 1.25rem;
  --h3: 1.125rem;
  --p: 1rem;
  --p2: 0.875rem;
  --p3: 0.75rem;
  --fw400: 400;
  --fw500: 500;
  --fw600: 600;
  --fw700: 700;
  --sp2px: 0.125rem;
  --sp4px: 0.25rem;
  --sp8px: 0.5rem;
  --sp12px: 0.75rem;
  --sp16px: 1rem;
  --sp24px: 1.5rem;
  --sp32px: 2rem;
  --bg-costom: hsl(225, 80%, 98%);
  --bg-dark: hsl(0, 0%, 90%);
  --bg: hsl(0, 0%, 95%);
  --bg-light: hsl(0, 0%, 100%);
  --bg-light1: hsl(0, 0%, 98%);
  --text: hsl(0, 0%, 5%);
  --muted: hsl(0, 0%, 70%);
  --bl: hsl(0, 0%, 70%);
  --bl1: hsl(0, 0%, 20%);
  --bl-light: hsl(0, 0%, 90%);
  --ba-bg1: hsl(233, 70%, 95%);
  --fc-bg1: hsl(233, 70%, 45%);
  --bg-costom1: hsl(0, 0%, 40%);
  --col-main: hsl(221,83%,53%);
  --col-main-bg: hsl(221,83%,95%);
}

.cldark {
  color: var(--bg-dark);
}

.clbg {
  color: var(--bg);
}

.cllight {
  color: var(--bg-light);
}

.clmain {
  color: var(--col-main);
}

.clcostom1 {
  color: var(--bg-costom1);
}

.c_pointer {
  cursor: pointer;
}

.fs12px {
  font-size: var(--p3);
}

.fs14px {
  font-size: var(--p2);
}

.fs16px {
  font-size: var(--p);
}

.fs18px {
  font-size: var(--h3);
}

.fs20px {
  font-size: var(--h2);
}

.fs24px {
  font-size: var(--h1);
}

.fwregular {
  font-weight: var(--fw400);
}

.fwmedium {
  font-weight: var(--fw500);
}

.fwsemibold {
  font-weight: var(--fw600);
}

.fwbold {
  font-weight: var(--fw700);
}

.fcolormain {
  color: var(--text);
}

.fcolormuted {
  color: var(--muted);
}

.pd4 {
  padding: var(--sp4px);
}

.pd8 {
  padding: var(--sp8px);
}

.pd12 {
  padding: var(--sp12px);
}

.pd16 {
  padding: var(--sp16px);
}

.pd24 {
  padding: var(--sp24px);
}

.pd32 {
  padding: var(--sp32px);
}

.pdtop {
  padding-top: 2px;
}

.gp4 {
  gap: var(--sp4px);
}

.gp8 {
  gap: var(--sp8px);
}

.gp12 {
  gap: var(--sp12px);
}

.gp16 {
  gap: var(--sp16px);
}

.gp24 {
  gap: var(--sp24px);
}

.gp32 {
  gap: var(--sp32px);
}

.d_flex {
  display: flex;
}

.d_flex_row {
  flex-direction: row;
}

.d_flex_column {
  flex-direction: column;
}

.j_center {
  justify-content: center;
}

.a_center {
  align-items: center;
}

.d_none {
  display: none;
}

.space64 {
  height: 64px;
}

.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-costom);
  flex-direction: row;
}
.container .main_screen {
  flex-direction: column;
  width: 100%;
}
.container .main_screen .header {
  height: 48px;
  background-color: var(--bg-light);
  border-bottom: 1px solid var(--bl);
  flex-direction: row;
  justify-content: space-between;
  padding: 0 var(--sp24px);
}
.container .main_screen .main_body {
  flex-direction: column;
  gap: 32px;
}
.container .main_screen .main_body .mb_head {
  flex-direction: column;
  margin-top: 80px;
}
.container .main_screen .main_body .account_container {
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
  height: 250px;
}
.container .main_screen .main_body .account_container .choices {
  flex-direction: column;
  border: 1px solid var(--bl-light);
  background-color: var(--bg-light);
  border-radius: var(--sp16px);
  padding: var(--sp24px);
  justify-content: space-between;
  width: 50%;
}
.container .main_screen .main_body .account_container .choices .ch_head .svg_cont {
  border-radius: var(--sp8px);
  padding: var(--sp12px);
  background-color: var(--bg);
}
.container .main_screen .main_body .account_container .choices .ch_head .svg_cont svg {
  stroke: var(--bg-costom1);
}
.container .main_screen .main_body .account_container .choices .ch_foot {
  flex-direction: column;
}
.container .main_screen .main_body .account_container .choices .ch_foot .bodyText {
  flex-direction: column;
}
.container .main_screen .main_body .account_container .choices .ch_foot .button {
  padding: var(--sp8px) var(--sp16px);
  flex-direction: row;
  border-radius: var(--sp8px);
  border: 1px solid var(--bl);
  justify-content: space-between;
}
.container .main_screen .main_body .account_container .choices .ch_foot .button .svg_cont svg {
  stroke: var(--text);
}
.container .main_screen .main_body .account_container :hover {
  border-color: var(--col-main);
}
.container .main_screen .main_body .account_container :hover .ch_head .svg_cont {
  background-color: var(--col-main-bg);
}
.container .main_screen .main_body .account_container :hover .ch_head .svg_cont svg {
  stroke: var(--col-main);
}
.container .main_screen .main_body .account_container :hover .ch_foot .button {
  background-color: var(--col-main);
  border-color: var(--col-main);
}
.container .main_screen .main_body .account_container :hover .ch_foot .button span {
  color: var(--bg-light);
}
.container .main_screen .main_body .account_container :hover .ch_foot .button .svg_cont svg {
  stroke: var(--bg-light);
}/*# sourceMappingURL=index.css.map */