@charset "UTF-8";
#experience.list .eventList ul li {
  margin: 0 -50px;
  padding: 60px 50px;
}
#experience.list .eventList ul li + li {
  border-top: 1px solid #efefef;
}
#experience.list .eventList .thumb {
  border-radius: 20px;
  overflow: hidden;
}
#experience.list .eventList .thumb .dday {
  right: 36px;
  top: 36px;
  background: rgba(255, 255, 255, 0.7);
}
#experience.list .eventList .digest {
  margin-top: 40px;
}
#experience.list .eventList .digest strong.title {
  display: block;
  margin-bottom: 40px;
  font-weight: 500;
  word-break: break-all;
  font-size: 36px;
}
#experience.list .eventList .digest > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#experience.list .eventList .digest > div > span {
  display: inline-block;
  min-width: 200px;
  line-height: 1.5;
  padding: 12px 44px;
  flex-shrink: 0;
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
  font-weight: 500;
  font-size: 30px;
  text-align: center;
}
#experience.list .eventList .digest > div .stateA {
  color: #fff;
  background: #1d4c89;
  border-color: #1d4c89;
}
#experience.list .eventList .digest > div .stateB {
  color: #1d4c89;
  background: #fff;
  border-color: #1d4c89;
}
#experience.list .eventList .digest > div .stateC {
  color: #fff;
  background: #d8d8d8;
  border-color: #d8d8d8;
}
#experience.list .eventList .digest > div .info p {
  display: grid;
  grid-template-columns: 140px auto;
  width: 100%;
  gap: 24px;
  font-size: 30px;
}
#experience.list .eventList .digest > div .info p span {
  color: #1d4c89;
  font-weight: 500;
}
#experience.list .eventList .digest > div .info p b {
  font-weight: 400;
}

#experience.view .eventView h2 {
  font-weight: 500;
}
#experience.view .eventView > .btnArea a {
  width: 50%;
}
#experience.view .progress {
  margin-bottom: 40px;
}
#experience.view .visual {
  position: relative;
  margin: 0 -50px 20px;
}
#experience.view .visualContents {
  padding: 50px 50px 0;
}
#experience.view .visualContents .btnArea {
  margin-top: 50px;
}
#experience.view .visual .briefsList .applyState {
  display: flex;
  gap: 0 18px;
  justify-content: flex-start;
}
#experience.view .visual .briefsList .applyState strong {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #1d4c89;
  font-size: 36px;
  font-weight: 500;
}
#experience.view .visual .briefsList .applyState strong span {
  font-size: 54px;
}
#experience.view .visual .briefsList .applyState em {
  height: 50px;
  padding: 0 24px;
  align-self: flex-end;
  background: #e8f0fa;
  border-radius: 8px;
  color: #1d4c89;
  font-size: 24px;
  line-height: 50px;
  font-weight: 500;
}
#experience.view .visual .briefsList .applyState:has(em:nth-child(1)) {
  margin-bottom: -18px;
}
#experience.view .visual .briefsList .applyState + div {
  margin-top: 50px;
}
#experience.view .visual .briefsList > div {
  display: flex;
  gap: 32px;
}
#experience.view .visual .briefsList > div span {
  position: relative;
  padding-left: 40px;
  font-weight: 500;
}
#experience.view .visual .briefsList > div span:before {
  content: "";
  display: block;
  position: absolute;
  left: 16px;
  top: 0.75em;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9bbce5;
}
#experience.view .visual .briefsList > div a.link {
  display: inline-block;
  position: relative;
  margin-top: 12px;
  padding-right: 40px;
  color: #1d4c89;
}
#experience.view .visual .briefsList > div a.link:before {
  content: "";
  display: block;
  position: absolute;
  width: 32px;
  height: 32px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg width='32' height='33' viewBox='0 0 32 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 4.5L22 16.5L10 28.5' stroke='%231D4C89' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center;
}
#experience.view .visual .briefsList > div + div {
  margin-top: 12px;
}
#experience.view .visual .notice {
  position: relative;
  padding: 13px 0 13px 60px;
  margin-top: 50px;
  font-size: 30px;
  color: #444;
  background: #e2e2e2;
  border-radius: 8px;
}
#experience.view .visual .notice:before {
  content: "!";
  display: block;
  position: absolute;
  left: 19px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #444;
  color: #fff;
  font-size: 20px;
  line-height: 26px;
  text-align: center;
}
#experience.view .contents .editor {
  margin: 0 -50px;
}
#experience.view .contents article {
  padding-top: 92px;
  display: none;
}
#experience.view .contents .tabTypeB {
  margin: 50px -50px 0;
}
#experience.view .contents .tabTypeB ul li {
  width: calc((100% - 40px) / 3);
}
#experience.view .contents .tabTypeB ul li a {
  display: block;
  text-align: center;
}
#experience.view #contentA > ul {
  margin-top: 40px;
}
#experience.view #contentA > ul > li {
  position: relative;
}
#experience.view #contentA > ul > li .title {
  padding: 0 16px 0 0;
  margin: 0 0 12px;
  font-weight: 500;
  color: #1d4c89;
}
#experience.view #contentA > ul > li .title + div, #experience.view #contentA > ul > li .title + p {
  margin-top: 12px;
  letter-spacing: -0.4px;
}
#experience.view #contentA > ul > li .title + div strong, #experience.view #contentA > ul > li .title + p strong {
  font-weight: 500;
}
#experience.view #contentA > ul > li p {
  word-break: break-all;
}
#experience.view #contentA > ul > li .copy {
  height: 50px;
  padding: 0 36px;
  margin: 0 0 12px;
  vertical-align: middle;
  font-size: 24px;
  color: #1d4c89;
  line-height: 50px;
  font-weight: 500;
  background: #e8f0fa;
  border-radius: 8px;
}
#experience.view #contentA > ul > li .copyWrap {
  margin-top: 12px;
  font-weight: 500;
}
#experience.view #contentA > ul > li + li {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #e2e2e2;
}
#experience.view #contentA ul.blt {
  margin-top: 12px;
}
#experience.view #contentA ul.blt li {
  position: relative;
  font-size: 30px;
  padding-left: 20px;
}
#experience.view #contentA ul.blt li:before {
  content: "";
  display: block;
  position: absolute;
  left: 4px;
  top: 0.75em;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #222;
}
#experience.view #contentA ul.blt li + li {
  margin-top: 12px;
}
#experience.view #contentA .digest {
  display: grid;
  grid-template-columns: 140px auto;
  gap: 12px;
}
#experience.view #contentA .digest span {
  color: #1d4c89;
  font-weight: 500;
}
#experience.view #contentA .digest b {
  font-weight: 400;
}
#experience.view #contentB {
  padding-top: 132px;
}
#experience.view #contentB .applyItem {
  padding: 28px;
  background: #f4f4f4;
  border-radius: 20px;
}
#experience.view #contentB .applyItem > div {
  display: flex;
  font-size: 28px;
  justify-content: space-between;
  word-break: break-all;
}
#experience.view #contentB .applyItem > div .applyData {
  display: flex;
  gap: 22px;
  align-items: center;
  font-size: 24px;
  color: #888;
}
#experience.view #contentB .applyItem > div .applyData span:nth-child(n+2) {
  position: relative;
}
#experience.view #contentB .applyItem > div .applyData span:nth-child(n+2):before {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 80%;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  background: #aaa;
}
#experience.view #contentB .applyItem > div .opt {
  position: relative;
  display: flex;
  gap: 22px;
  align-items: center;
}
#experience.view #contentB .applyItem > div .opt > button {
  font-size: 24px;
  color: #222;
}
#experience.view #contentB .applyItem > div .opt > button:nth-child(n+2) {
  position: relative;
}
#experience.view #contentB .applyItem > div .opt > button:nth-child(n+2):before {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 80%;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  background: #aaa;
}
#experience.view #contentB .applyItem > div .opt .moreBtn {
  width: 32px;
  height: 32px;
  background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15.5' cy='16' r='3' fill='%23838383'/%3E%3Ccircle cx='15.5' cy='6' r='3' fill='%23838383'/%3E%3Ccircle cx='15.5' cy='26' r='3' fill='%23838383'/%3E%3C/svg%3E%0A") no-repeat center;
}
#experience.view #contentB .applyItem > div .opt .others {
  position: absolute;
  right: 30px;
  top: 0;
  width: 196px;
  border-radius: 8px;
  background: #fff;
  border: 2px solid #3866a0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
#experience.view #contentB .applyItem > div .opt .others button {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 18px;
  width: 100%;
  font-size: 24px;
  text-align: center;
}
#experience.view #contentB .applyItem > div .opt .others button:before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
}
#experience.view #contentB .applyItem > div .opt .others button.complaint:before {
  background-image: url("/img/mobile/icon/ico_siren.png");
  background-position: center center;
}
#experience.view #contentB .applyItem > div .opt .others button.block:before {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Crect y='3' width='32' height='26' fill='url(%23pattern0_3564_7696)'/%3E%3Cdefs%3E%3Cpattern id='pattern0_3564_7696' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23image0_3564_7696' transform='scale(0.03125 0.0384615)'/%3E%3C/pattern%3E%3Cimage id='image0_3564_7696' width='32' height='26' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAaCAYAAADWm14/AAAACXBIWXMAAAsTAAALEwEAmpwYAAACP0lEQVRIieXXPWsUURTG8d8awcJA1ESDBLRJF1BBDZaKxcYiYJcmlV3WL+BHkKRIoSFFTBVSBUGTQgQLwc4XUCtxJYUEBMW3whQbTCzO3bgZZmY3iKTIH5bdmblnznPvebl32clpDNpDxrGJib0UMbGvRBwsuD+bvmdaro+iios4h+M4hgp+4DPe4CUe4eu/CMgT0YtbycErfMJ3/MYRnMIZ3MBhPE22D8Rq7prrmPQ3HDUx23YcEiu1iA28x+huHPdhOTmdSveyOVFNY+r4gBWM5QgcwL1k+zC9u5RLWMM7DGeetYqYxkL6XROzbeAJenLeeyGJXct57zZVrOM+ugvGlFXHEFaTiLxQdWMp+RjJPryaZnC3wFgymu5AREOEI48u3EljrjRv9uMn5gqMmiyLZddGxKLIiTLmk89+ov0+S+rKqGccFomoicQsoyv5HC/rA1kqdoYnr1nBVvp0TDME823GrYjlzZJdiQURrjLmtISASIiGSJCiUIylMUNtREzLyfJERSR6QyT+DkZEiSzJL8OKKLHVDkTk0S1KfF2UfC7DolnURfPI0pNENEQ4asnhgvISHRbNbU00u1L6RNvcFG10IPO8IsKxIrK9LmLenFVWxFS6XtZBK25lVGwkG2K2VbHRtKMiVqYpYlJsbIWDyziQjG/iMn7hOd7iozgHdImzwkmcF6G7Lc4DM8l2VgGdbK9NenEtOTiLE+IcsIVv+ILXeIHH4qww0YmI/83+OmN2ImJ8L0UMij8/2/wBvWic1ErISnwAAAAASUVORK5CYII='/%3E%3C/defs%3E%3C/svg%3E%0A");
}
#experience.view #contentB .applyItem > div .opt .others button + button {
  border-top: 1px solid #d9d9d9;
}
#experience.view #contentB .applyItem > div + div {
  margin-top: 20px;
}
#experience.view #contentB .applyItem ~ .applyItem {
  margin-top: 40px;
}
#experience.view #contentB .none {
  padding: 120px 0 !important;
  font-size: 36px;
}
#experience.view #contentC > div {
  margin: 0 -50px;
}
#experience.view .banner {
  margin-top: 60px;
  border-radius: 8px;
  overflow: hidden;
}
#experience.view .tabTypeB:has(> .floatWrap) {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 100%;
  height: 92px;
  margin: 0;
  border-bottom: 0;
}
#experience.view .tabTypeB:has(> .floatWrap) ul {
  height: 92px;
  padding-top: 30px;
  border-bottom: 2px solid #eee;
  background: #fff;
}
#experience.view .tabTypeB:has(> .floatWrap) ul li {
  width: calc((100% - 40px) / 3);
}
#experience.view .tabTypeB:has(> .floatWrap) ul li a {
  display: block;
  text-align: center;
}
#experience.view .tabTypeB:has(> .floatWrap) ul:after {
  content: "";
  display: block;
  clear: both;
}
#experience.view .tabTypeB:has(> .floatWrap):after {
  display: none;
}
#experience.view .tabTypeB:has(> .floatWrap).fixed ul {
  position: fixed;
  left: 0;
  right: 0;
  top: 105px;
}

#experience.review h2 {
  margin: 50px 0 30px;
  font-size: 36px;
  font-weight: 500;
}
#experience.review .fieldArea .field.full {
  padding-left: 0;
}
#experience.review .fieldArea .field + div {
  margin-top: 20px;
}
#experience.review .fieldArea textarea {
  height: 300px;
}
#experience.review .fieldArea .text {
  position: relative;
  padding-bottom: 60px;
  height: 300px;
  border: 1px solid #dcdcdc;
}
#experience.review .fieldArea .text textarea {
  margin-top: 0;
  border: none;
  height: 240px;
}
#experience.review .fieldArea .text textarea + .max {
  position: absolute;
  right: 20px;
  bottom: 12px;
  font-size: 28px;
  color: #bcbcbc;
}
#experience.review .fieldArea input, #experience.review .fieldArea textarea {
  width: 100%;
}

#experience.apply .fieldHead {
  margin: 50px 0 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#experience.apply .fieldArea .none {
  color: #bcbcbc;
}
#experience.apply .fieldArea + .fieldHead {
  margin-top: 90px;
}
#experience.apply h2 {
  font-size: 36px;
  font-weight: 500;
}
#experience.apply h2 span {
  font-weight: 400;
  font-size: 30px;
}
#experience.apply h2 .txt1 {
  color: #838383;
}
#experience.apply .lineBtn {
  position: relative;
  padding: 0 4px;
  font-size: 32px;
  color: #1d4c89;
  font-weight: 500;
}
#experience.apply .lineBtn:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #1d4c89;
}
#experience.apply .fieldArea.sns .field + .field {
  margin-top: 20px;
}
#experience.apply .field.full {
  padding-left: 0;
}
#experience.apply .field.col2 {
  display: flex;
  gap: 10px;
}
#experience.apply .field textarea {
  height: 300px;
}
#experience.apply .field .text {
  position: relative;
  padding-bottom: 60px;
  height: 300px;
  border: 1px solid #dcdcdc;
}
#experience.apply .field .text textarea {
  margin-top: 0;
  border: none;
  height: 240px;
}
#experience.apply .field .text textarea + .max {
  position: absolute;
  right: 20px;
  bottom: 12px;
  font-size: 28px;
  color: #bcbcbc;
}
#experience.apply .field .notice {
  padding-top: 25px;
  color: #1d4c89;
  word-break: break-all;
}
#experience.apply #container.complete .comment {
  padding: 100px 0 50px;
}
#experience.apply #container.complete .comment p {
  padding-top: 110px;
  text-align: center;
  font-size: 32px;
  color: #393939;
  background: url(/img/mobile/maeil-quiz/ico-smile.png) no-repeat center top;
}
#experience.apply #container.complete .comment p b {
  display: block;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 48px;
}
#experience.apply #container.complete .comment + .btnArea {
  margin-top: 40px;
}
#experience.apply #container.complete .box {
  padding: 50px;
  margin: 0;
  border-top: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
}
#experience.apply #container.complete .box > p {
  margin: 0 -50px;
  font-size: 20px;
  text-align: center;
}
#experience.apply #container.complete .box > p b {
  display: block;
  margin-bottom: 10px;
  font-size: 40px;
  font-weight: 500;
}
#experience.apply #container.complete .box > p b:after {
  content: "";
  display: inline-block;
  width: 41px;
  height: 41px;
  margin: -6px 0 0 10px;
  vertical-align: middle;
  background: url(/img/mobile/event/ico_gift.png) no-repeat;
}
#experience.apply #container.complete .box .couponWrap {
  position: relative;
  margin-top: 32px;
  padding: 0 80px;
  border-radius: 20px;
  background: #c9dbf3;
}
#experience.apply #container.complete .box .couponWrap:before {
  content: "";
  display: block;
  position: absolute;
  width: 60px;
  height: 60px;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 50%;
}
#experience.apply #container.complete .box .couponWrap:after {
  content: "";
  display: block;
  position: absolute;
  width: 60px;
  height: 60px;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 50%;
}
#experience.apply #container.complete .box .couponWrap .title {
  padding: 40px 0;
  text-align: center;
}
#experience.apply #container.complete .box .couponWrap .title p {
  color: #222;
  font-size: 32px;
  text-align: center;
}
#experience.apply #container.complete .box .couponWrap .title span {
  display: inline-block;
  margin-top: 40px;
  font-size: 40px;
  color: #1d4c89;
}
#experience.apply #container.complete .box .couponWrap .title span strong {
  font-size: 100px;
  vertical-align: baseline;
}
#experience.apply #container.complete .box .couponWrap .condition {
  padding: 16px 0 36px;
  text-align: center;
  font-size: 24px;
  border-top: 1px solid #fff;
}
#experience.apply #container.complete .box .btnTypeA {
  margin-top: 32px;
}
#experience.apply #container.complete .box + .btnArea {
  margin-top: 60px;
}

#experience.win #container .comment {
  display: flex;
  flex-flow: column;
  gap: 12px;
  padding: 50px 0;
  align-items: center;
}
#experience.win #container .comment > div:has(> img) {
  padding: 0 206px;
  margin-bottom: 44px;
}
#experience.win #container .comment strong {
  font-size: 36px;
  font-weight: 500;
  color: #1d4c89;
}
#experience.win #container .comment span {
  font-size: 30px;
  font-weight: 500;
}
#experience.win #container .winNotice {
  position: relative;
  margin-top: 53px;
  padding-top: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 28px;
}
#experience.win #container .winNotice strong {
  color: #1d4c89;
  font-weight: 500;
}
#experience.win #container .winNotice:before {
  content: "!";
  width: 42px;
  height: 42px;
  position: absolute;
  border-radius: 50%;
  background: #393939;
  color: #fff;
  font-size: 28px;
  line-height: 42px;
  text-align: center;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
#experience.win #container .blt {
  margin-top: 50px;
}
#experience.win #container .blt li {
  position: relative;
  font-size: 28px;
  color: #838383;
  padding-left: 20px;
  word-break: break-all;
}
#experience.win #container .blt li:before {
  content: "";
  display: block;
  position: absolute;
  left: 4px;
  top: 0.75em;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #838383;
}
#experience.win #container .blt li + li {
  margin-top: 12px;
}

/*공통*/
#experience ul.share button img {
  margin: 0 auto 20px;
}
#experience .box {
  margin: 50px -50px 0;
  padding: 50px;
}
#experience .box.gray {
  background: #f4f4f4;
}
#experience .box h2 {
  font-size: 32px;
  margin-bottom: 30px;
  font-weight: 500;
}
#experience .box h2:nth-child(n+2) {
  margin-top: 30px;
}
#experience .box .innerBox {
  padding: 30px 20px;
  background: #fff;
}
#experience .agreeBox .innerBox p {
  font-size: 28px;
  word-break: break-all;
}
#experience .agreeBox .innerBox p span {
  font-weight: 500;
  color: #1d4c89;
}
#experience .agreeBox .innerBox ul {
  margin-top: 50px;
}
#experience .agreeBox .innerBox ul.typeSpace li strong {
  font-weight: 500;
}
#experience .agreeBox .innerBox ul:first-child {
  margin-top: 0;
}
#experience .agreeBox .innerBox ul li {
  color: #888;
  font-size: 28px;
}
#experience .agreeBox .agreeField .text {
  margin-top: 60px;
  font-size: 28px;
  border-top: none;
}
#experience .agreeBox .agreeField .radio {
  margin-top: 30px;
}
#experience .agreeBox .agreeField .radio label {
  font-weight: 500;
  font-size: 28px;
}

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