@import"https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap";

body {
  font-family: "Noto Sans KR";
  font-weight: 400;
}

.container.main_container {
  --jeomsin-border-color: #dae1e6;
  --jeomsin-title-color: #121212;
  --jeomsin-grey: #676767;
  --jeomsin-bg-color: #f7f9fa;
  --jeomsin-white: #fff;
  --jeomsin-accent-blue: #5c88f8;
  --jeomsin-star-gunghap-bg: #fff6f6;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 70px;
}

.container.main_container .info_text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--jeomsin-title-color);
  font-weight: 700;
}

.container.main_container .tab_list ul {
  display: grid;
  grid-template-columns: repeat(2, calc(50% - 2px));
  width: 100%;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

.container.main_container .tab_list ul>li a {
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--jeomsin-border-color);
  border-radius: 8px;
  color: var(--jeomsin-grey);
  font-size: 16px;
  line-height: normal;
  letter-spacing: -0.64px;
  padding: 0 8px;
}

.container.main_container .tab_list ul>li.on a {
  color: var(--jeomsin-accent-blue);
  border: 1px solid var(--jeomsin-accent-blue);
  font-weight: 700;
}

.container.main_container .top_ad>a {
  display: block;
  width: 100%;
}

.container.main_container .top_ad>a .mobile_banner {
  display: none;
}

.container.main_container .top_ad>a img {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.container.main_container .main_content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.container.main_container .main_content .sub_content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.container.main_container .main_content .sub_content .main_title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.container.main_container .main_content .sub_content .main_title h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--jeomsin-title-color);
  text-align: center;
}

.container.main_container .main_content .sub_content .main_title p {
  font-size: 16px;
  line-height: 1.4;
  color: var(--jeomsin-grey);
  text-align: center;
}

.container.main_container .main_content .sub_content .content_box {
  display: grid;
  grid-template-rows: auto;
  gap: 16px;
}

.container.main_container .main_content .sub_content .content_box .item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  background-color: var(--jeomsin-bg-color);
}

.container.main_container .main_content .sub_content .content_box .item .title_box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.container.main_container .main_content .sub_content .content_box .item .title_box p {
  font-size: 15px;
  color: var(--jeomsin-grey);
  line-height: normal;
  letter-spacing: -0.6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.container.main_container .main_content .sub_content .content_box .item .title_box .item_title {
  display: flex;
  align-items: center;
}

.container.main_container .main_content .sub_content .content_box .item .title_box .item_title h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--jeomsin-title-color);
  line-height: normal;
  letter-spacing: -0.72px;
}

.container.main_container .main_content .sub_content .content_box .item .icon_box {
  display: flex;
  align-items: center;
}

.container.main_container .main_content .sub_content .content_box .item .icon_box .cover img {
  width: 48px;
  height: 48px;
}

.container.main_container .sub_content.con-saju {
  padding: 24px 0px 16px;
}

.container.main_container .sub_content.con-saju .content_box {
  grid-template-columns: repeat(3, calc((100% - 32px) / 3));
}

.container.main_container .sub_content.con-saju .content_box .item.type01 {
  border-radius: 8px;
  padding: 16px;
}

.container.main_container .sub_content.con-saju .content_box .item.type01 .icon_box {
  justify-content: flex-end;
}

.container.main_container .sub_content.con-saju .content_box .item.type01 .icon_box .cover {
  padding: 8px;
}

.container.main_container .sub_content.con-saju .content_box .item.type03 {
  grid-column: 1/-1;
  border-radius: 8px;
  padding: 16px;
  background-color: var(--jeomsin-star-gunghap-bg);
}

.container.main_container .sub_content.con-saju .content_box .item.type03 .icon_box {
  justify-content: flex-end;
}

.container.main_container .sub_content.con-saju .content_box .item.type03 .icon_box .cover {
  padding: 7px 30px 7px 0;
}

.container.main_container .sub_content.con-saju .content_box .item.type03 .icon_box .cover img {
  width: 72px;
  height: 87px;
}

.container.main_container .sub_content.con-unse {
  padding: 40px 0 16px;
  gap: 24px;
}

.container.main_container .sub_content.con-unse .content_box {
  grid-template-columns: repeat(4, minmax(156px, 200px));
  justify-content: center;
  padding: 0 16px;
}

.container.main_container .sub_content.con-unse .content_box .inner_content {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0 16px;
}

.container.main_container .sub_content.con-unse .content_box .item.type02 {
  aspect-ratio: 1/1;
  border-radius: 200px;
  max-width: 100%;
  overflow: hidden;
}

.container.main_container .sub_content.con-unse .content_box .item.type02 .item_badge {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container.main_container .sub_content.con-unse .content_box .item.type02 .item_badge span {
  display: inline-block;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  line-height: normal;
  letter-spacing: -0.48px;
  color: var(--jeomsin-white, #fff);
}

.container.main_container .sub_content.con-unse .content_box .item.type02 .item_badge.unse span {
  background-color: #0b6ae8;
}

.container.main_container .sub_content.con-unse .content_box .item.type02 .item_badge.gunghap span {
  background-color: #e7106a;
}

.container.main_container .sub_content.con-unse .content_box .item.type02 .item_badge.gomin span {
  background-color: #16a30a;
}

.container.main_container .sub_content.con-unse .content_box .item.type02 .title_box .item_title {
  justify-content: center;
}

.container.main_container .sub_content.con-unse .content_box .item.type02 .title_box p {
  text-align: center;
  padding: 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.container.main_container .sub_content.con-unse .content_box .item.type02 .icon_box {
  justify-content: center;
}

.container.main_container .sub_content.con-unse .content_box .item.type02 .icon_box .cover .mobile_icon {
  display: none;
}

.container.main_container .saju_info_box {
  display: block;
}

.container.main_container .saju_info_box .eto_form {
  background-color: unset;
}

.container.main_container .saju_info_box .inner_box {
  display: flex;
  justify-content: space-between;
  padding: 8px 0px;
  max-width: 100%;
}

.container.main_container .saju_info_box .inner_box.notify_form {
  justify-content: center;
  padding: 0;
}

.container.main_container .saju_info_box .inner_box .gender_box {
  display: flex;
  flex-direction: column;
}

.container.main_container .saju_info_box .inner_box .column_input>label {
  display: block;
  color: #818c9a;
  font-size: 1.4rem;
  font-weight: 500;
}

.container.main_container .saju_info_box .inner_box .column_input input::-moz-placeholder {
  color: #bcc3d3;
}

.container.main_container .saju_info_box .inner_box .column_input input::placeholder {
  color: #bcc3d3;
}

.container.main_container .saju_info_box .inner_box .column_input input,.container.main_container .saju_info_box .inner_box .column_input select {
  width: 10rem;
  border: none;
  border-bottom: 1px solid #bcc3d3;
  font-size: 1.6rem;
  line-height: 4rem;
  letter-spacing: -0.7px;
}

.container.main_container .saju_info_box .inner_box .column_input select {
  width: 120%;
  background: url(https://jeomsin.etoland.co.kr/images/ico_arrow.svg) no-repeat center right/1.6rem;
  cursor: pointer;
}

.container.main_container .saju_info_box .inner_box .column_input select:invalid {
  color: #bcc3d3;
}

.container.main_container .saju_info_box .inner_box .column_input select.active {
  color: #1f2024;
}

.container.main_container .saju_info_box .inner_box .column_input .birth_input {
  width: 10rem;
}

.container.main_container .saju_info_box .inner_box .column_box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.container.main_container .saju_info_box .inner_box .column_box.check-box {
  gap: 16px;
  margin-top: 1.5rem;
}

.container.main_container .saju_info_box .inner_box .column_box.check-box .row_input {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.container.main_container .saju_info_box .inner_box .column_box.check-box .row_input input {
  width: 100%;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  cursor: pointer;
}

.container.main_container .saju_info_box .inner_box .column_box.check-box .row_input label {
  font-size: 1.4rem;
  color: #818c9a;
  white-space: nowrap;
}

.container.main_container .saju_info_box .submit_btn_box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 0 0;
}

.container.main_container .saju_info_box .submit_btn_box .eto_submit_btn:disabled {
  background-color: #e4e9f4;
  color: #bcc3d3;
}

.container.main_container .saju_info_box .submit_btn_box .eto_submit_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
  padding: 0 2rem;
  font-size: 1.5rem;
  font-weight: 700;
  background-color: var(--point-color);
  color: var(--txt-color);
  border-radius: .8rem;
}

body.darkTheme {
  background-color: #121212;
}

body.darkTheme .container.main_container {
  --jeomsin-border-color: #414141;
  --jeomsin-title-color: #fff;
  --jeomsin-grey: #d8d8d8;
  --jeomsin-bg-color: #2d2d2d;
  --jeomsin-star-gunghap-bg: rgba(245, 29, 120, 0.2);
}

body.darkTheme .container.main_container .main_content .sub_content .content_box .item {
  background: var(--jeomsin-bg-color);
}

body.darkTheme .container.main_container .main_content .sub_content .content_box .item .title_box .item_title img {
  filter: invert(100%);
}

body.darkTheme .container.main_container .sub_content.con-saju .content_box .item.type03 {
  background: var(--jeomsin-star-gunghap-bg);
}

body.darkTheme .container.main_container .sub_content.con-unse .item.type02 .icon_box .cover img {
  filter: invert(100%);
}

body.darkTheme .container.main_container .sub_content.con-unse .item.type02 .item_badge.unse span {
  color: #5679f6;
  background-color: #3a3a3a;
}

body.darkTheme .container.main_container .sub_content.con-unse .item.type02 .item_badge.gunghap span {
  color: #f8395b;
  background-color: #3a3a3a;
}

body.darkTheme .container.main_container .sub_content.con-unse .item.type02 .item_badge.gomin span {
  color: #54bc38;
  background-color: #3a3a3a;
}

body.darkTheme .container.main_container .saju_info_box .inner_box .column_input input {
  color: #fff;
}

body.darkTheme .container.main_container .saju_info_box .inner_box .column_input select.active {
  color: #fff;
}