@charset "UTF-8";
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');

:root {
  --theme-a: #004cc6;
  --chkAll: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM4.667 9.534L9 13.867L14.734 8.067L13.334 6.667L9 11L6.067 8.134L4.667 9.534Z" fill="currentColor"/></svg>');
  --chk: url('data:image/svg+xml;utf8,<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.333 7.2L0 2.867L1.4 1.467L4.333 4.333L8.667 0L10.067 1.4L4.333 7.2Z" fill="currentColor"/></svg>');
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans KR', sans-serif;
}

ul,
ol,
li {
  list-style: none;
}

/* Text-level semantics */
a {
  background-color: transparent;
  cursor: pointer;
  color: inherit;
}

a:active,
a:link,
a:hover,
a:visited,
a:focus {
  text-decoration: none;
}

/* Embedded content */
img {
  border-style: none;
}

/* Misc */
address {
  display: inline-block;
  font-style: normal;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

input {
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
}

input:focus {
  color: #151515 !important;
  background-color: rgb(249, 255, 186);
}

textarea,
input:focus,
input:matches([type='email'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='url']) {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: all ease-in-out 300ms;
}

.bg_btn_def {
  background-color: #9f9f9f;
}

.t_left {
  text-align: left;
}

#checkAll>.t_center {
  text-align: center;
}

.fc_w {
  color: #fff;
}

.fw_300 {
  font-weight: 300;
}

.fw_500 {
  font-weight: 500;
}

.fw_700 {
  font-weight: 700;
}

.fw_900 {
  font-weight: 900;
}

@media screen and (min-width: 800px) {
  html {
    margin: 0 auto;
    width: 50rem;
    overflow-x: hidden;
  }

  body {
    margin: 0 auto;
    width: 50rem;
  }

  #wrap {
    width: 50rem;
  }
}

html,
body {
  position: relative;
  height: 100%;
}

body {
  /* background: #eee; */
  background-color: #fff;
  color: #000;
  padding: 0;
}

#wrap {
  margin: auto;
  min-height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 10;
}

html.tms2310 {
  width: 100vw;
  max-width: 100vw;
}

#skt2310 {
  background-color: #efefef;
}

main {
  margin: 0 auto;
  width: 94vw;
  max-width: 45rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#mobl_no,
#auth_no,
#authno,
#joinauth,
#joinresend {
  width: 100%;
  height: 3rem;
}

#mobl_no,
#auth_no {
  color: inherit;
  padding-left: 0.75rem;
  backdrop-filter: saturate(150%) blur(0.125rem);
  -webkit-backdrop-filter: saturate(150%) blur(0.125rem);
}

#mobl_no::placeholder,
#auth_no::placeholder {
  color: #333;
  text-shadow: none;
}

#mobl_no:focus,
#auth_no:focus {
  backdrop-filter: saturate(150%) blur(0.125rem);
  -webkit-backdrop-filter: saturate(150%) blur(0.125rem);
}

#joinauth {
  line-height: 3rem;
  text-align: center;
  transition: background-color 0.125s ease-in-out;
}

#joinauth.retry {
  background-color: #fff;
  color: var(--theme-a);
}

#joinauth.complete {
  background-color: #fff;
  color: #9f9f9f !important;
}

.auth_active {
  background-color: var(--theme-a);
  color: white;
}

main>fieldset {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 0.875rem;
  padding: 1rem;
  width: 100%;
  border: min(0.05rem, 1px) solid #c1c1c1;
  /* text-shadow: 0 0 0.125rem rgba(0 0 0 / 0.4); */
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: saturate(100%) blur(0.125rem);
  -webkit-backdrop-filter: saturate(100%) blur(0.125rem);
  box-sizing: border-box;
  z-index: 10;
}

main>fieldset .terms {
  font-size: min(3vw, 1rem) !important;
  line-height: min(3vw, 1rem) !important;
}

main>fieldset .term {
  margin: 0;
  font-size: min(2.5vw, 0.8125rem) !important;
  line-height: min(2.5vw, 0.8125rem) !important;
  letter-spacing: min(-0.05vw, -0.075rem) !important;
}

#check__list {
  margin: 0 auto;
}

#check__list>li {
  margin: 0.125rem auto;
  min-height: 1.5rem;
}

[usemap] {
  border: none;
  height: auto;
  max-width: 100%;
  width: auto;
}

.hide {
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  clip: rect(0 0 0 0);
  font-size: medium;
  line-height: normal;
  color: transparent !important;
  word-break: break-all;
}

.check__container {
  margin-top: 1.125rem !important;
  border-radius: 5px;
}

.check__wrap {
  text-align: left;
}

#btn_join {
  color: white;
  background-color: #8e8e8e;
  border-radius: 5px;
}

#authcheck {
  padding: 0 0.25rem;
  background-color: #8e8e8e;
  color: #fff;
}

#mobl_no,
#auth_no {
  border-radius: 5px;
}

.mobl__container,
.auth__container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  width: 100%;
  height: 3rem;
  line-height: 1;
  border: min(0.05rem, 1px) solid #ccc;
  font-size: 1.125rem;
  letter-spacing: -0.084375rem;
  z-index: 10;
  align-items: center;
  background-color: white;
  border-radius: 5px;
}

.auth__container.hidden {
  display: none;
}

.auth__container>span.timer {
  /* width: 20%; */
  /* color: #777; */
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 3rem;
  text-align: center;
}

.auth__container>input {
  padding-left: 2%;
  width: 100%;
  border: 0;
  font-weight: 300;
  text-align: center;
}

.mobl__container>input:placeholder-shown {
  text-align: left;
}

.mobl__container>button#joinauth,
.auth__container>button#joinresend,
.auth__container>button#authcheck {
  width: 5.75rem !important;
  height: 1.75rem;
  line-height: 1.75rem;
  border: 0;
  border-radius: 5px;
  margin: 0.5rem;
}

.auth__container:not(.hidden) {
  border-top: 0;
  border-radius: 0 0 5px 5px;
}

.no-alpha {
  background-color: #fff !important;
}

.go-autoletter {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  background-color: var(--theme-a);
  width: 100vw;
  height: 3rem;
  margin: 0 auto;
  /* padding-left: 1rem;
  padding-right: 1rem; */
  /* width: 100vw; */
  max-width: 45rem;
  /* font-size: 1.125rem; */
  font-size: min(4vw, 1.125rem);
  font-weight: normal;
  letter-spacing: -0.1rem;
  text-align: center;
  cursor: pointer;
  z-index: 10;
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.tms2310 .auth__container>span.timer {
  color: var(--theme-a) !important;
  background-color: #fff;
}

.tms2310 #btn_join {
  /* color: #838383 !important;
  background-color: rgba(204, 204, 204, 0.8) !important; */
  /* text-shadow: 0 0 0.25rem rgba(0 0 0 / 0.4); */
  transition: 0.125s ease-in-out;
}

.tms2310 #btn_join.on,
.tms2310 #authcheck.on {
  color: #fff !important;
  background-color: var(--theme-a) !important;
}

.tms2310 #joinauth.on,
.tms2310 #joinresend.on {
  background-color: var(--theme-a) !important;
}

.tms2310 #tailmsg {
  color: var(--theme-a) !important;
  backdrop-filter: blur(0.0625rem);
  -webkit-backdrop-filter: blur(0.0625rem);
}

/* .terms,
.term {
  font-weight: normal;
} */

#tailmsg h6,
#tailmsg ul {
  color: #777;
  /* color: rgba(220 220 220 / 0.92); */
}

.top-area {
  margin-bottom: 1.125rem;
}

.bottom-area {
  margin-top: 1.125rem;
  margin-bottom: 1.5rem;
}

.tms2310 #btn_later {
  color: #fff !important;
}

.tms2310 .cboxAll+label::before {
  /* -webkit-mask-image: url('/static/image/event/apppush/check.svg') !important;
  mask-image: url('/static/image/event/apppush/check.svg') !important; */
  background-color: #9f9f9f;
  /* background-image: var(--chkAll); */
  -webkit-mask: var(--chkAll) no-repeat center center !important;
  mask: var(--chkAll) no-repeat center center !important;
  /* background: url('/static/image/common/icon_ck1.svg') left top no-repeat !important; */
  content: '';
  /* filter: grayscale(100%) brightness(1.5); */
  transition: background-color 0.125s ease-in-out;
}

.tms2310 .cbox+label::before,
.tms2310 .cbox_opt+label::before {
  /* width: 1rem;
  height: 1rem; */
  height: 10px;
  width: 15px;
  vertical-align: middle;
  background-color: #9f9f9f;
  -webkit-mask: var(--chk) no-repeat center center !important;
  mask: var(--chk) no-repeat center center !important;
  content: '';
  /* filter: grayscale(100%) brightness(1.5); */
  transition: background-color 0.125s ease-in-out;
}

.cboxAll:checked+label::before {
  /* -webkit-mask-image: url('/static/image/event/apppush/check.svg') !important;
  mask-image: url('/static/image/event/apppush/check.svg') !important; */
  /* background: url('/static/image/common/icon_ck1.svg') -25px top no-repeat !important; */
  background-color: var(--theme-a);
  /* background-image: var(--chkAll); */
  -webkit-mask: var(--chkAll) no-repeat center center !important;
  mask: var(--chkAll) no-repeat center center !important;
  content: '';
  /* filter: grayscale(0); */
  transition: background-color 0.125s ease-in-out;
}

.cbox:checked+label::before,
.cbox_opt:checked+label::before {
  /* width: 1rem;
  height: 1rem; */
  height: 10px;
  width: 15px;
  vertical-align: middle;
  background-color: var(--theme-a);
  -webkit-mask: var(--chk) no-repeat center center !important;
  mask: var(--chk) no-repeat center center !important;
  content: '';
  /* filter: grayscale(0); */
  transition: background-color 0.125s ease-in-out;
}

.cbox+label::before,
.cbox_opt+label::before,
.cboxAll+label::before,
.cboxAll:checked+label::before,
.cbox:checked+label::before,
.cbox_opt:checked+label::before {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-position: center;
}

.tms2310 .cboxAll+label::before,
.tms2310 .cbox+label::before,
.tms2310 .cbox_opt+label::before,
.tms2310 .cboxAll:checked+label::before,
.tms2310 .cbox:checked+label::before,
.tms2310 .cbox_opt:checked+label::before {
  /* background-color: var(--theme-a); */
}

.tms2310 .cbox+label::after,
.tms2310 .cbox_opt+label::after {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  right: 1.5rem;
  width: 2.5rem;
  height: 1.5rem;
  /* line-height: 1.5rem; */
  /* content: '[ 보기 ]'; */
  /* margin: 0.25rem; */
  /* font-size: 0.4375rem; */
  /* font-size: 0.675rem; */
  /* font-size: min(2.5vw, 0.625rem); */
  font-size: min(2.5vw, 0.8125rem);
  line-height: min(2.5vw, 0.8125rem);
  letter-spacing: min(-0.05vw, -0.075rem);
  font-weight: 500;
  /* letter-spacing: -0.0875rem; */
  color: rgba(0 0 0 / 0.64);
  vertical-align: middle;
}

.reveal-term {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  right: 1.5rem;
  width: 2.5rem;
  height: 1.5rem;
  font-size: min(2.5vw, 0.8125rem);
  line-height: min(2.5vw, 0.8125rem);
  letter-spacing: min(-0.05vw, -0.075rem);
  font-weight: 500;
  color: rgba(0 0 0 / 0.5);
  vertical-align: middle;
  cursor: pointer;
}

.tms2310 .btn-lavender {
  background-color: var(--theme-a) !important;
  color: #fff;
}

.evt-about {
  padding-bottom: 1rem;
}