* {
  --primary: #dcc375;
  --primary-light: #f5e7b9;
  --background: #0b092b;
}
@font-face {
  font-family: "title";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/국립박물관문화재단클래식B.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}
html,
body {
  min-height: 100vh;
  background-color: var(--background);
}
.f-title {
  font-family: "title";
}
h3.f-title {
  font-size: 17px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: -0.51px;
  color: var(--primary-light);
}
h1.f-title {
  font-size: 46px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -1.38px;
  color: var(--primary-light);
}
#taroApp {
  max-width: 400px;
  margin: 0 auto;
  background-color: #0b092b;
  min-height: 100vh;
	box-sizing: border-box;
}
#taroHeader {
  display: flex;
  padding: 16px 22px 13px 22px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px var(--primary) solid;
  margin-bottom: 12px;
}
#taroHeader > a > img {
  width: 22px;
  height: 22px;
}
.top {
  padding: 0 26px;
  text-align: center;
}
.main-bg {
  color: var(--primary);
  background: linear-gradient(
    to bottom,
    rgba(78, 47, 129, 0) 50%,
    #4e2f81 150%
  );
}
.share-bg {
  color: var(--primary);
}
.bg {
  position: relative;
  object-fit: contain;
}
.top-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.top-text > .sub-title {
  margin-bottom: 14px;
}
#taro-spinner-container {
  overflow-x: scroll;
  overflow-y: hidden;
}
#taro-card-swipe {
	scroll-behavior: smooth;
	padding-left: 10px;
  position: relative;
  list-style: none;
  display: flex;
  flex-flow: row nowrap;
  scroll-snap-type: x proximity;
  overflow-x: scroll;
  overflow-y: visible;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-top: 250px;
  margin-top: -250px; /* animation-duration: 5s;
  animation-name: spin;
  animation-direction: alternate;
  animation-iteration-count: infinite; */
  text-align: end;
}
#taro-card-swipe::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}
#taro-card-swipe > li {
  /* position: absolute; */
  scroll-snap-align: center;
  min-width: 100px;
  max-width: 26.3vw;
  margin: 0 -3%;
  animation-duration: 2s;
  animation-direction: normal;
  animation-iteration-count: inherit;
  position: relative;
}
#taro-card-swipe > li > img {
  position: relative;
  transition: all ease 0.2s;
  /* animation-duration: 5s;
  animation-name: spin;
  animation-direction: alternate;
  animation-iteration-count: infinite; */
  text-align: end;
}
#taro-card-swipe.main {
  position: relative;
}
.bottom {
  padding: 40px 27px 0 27px;
  text-align: center;
}
.star-bottom-bg {
  min-height: 372px;
  background-image: url("../img/taro/back-star-bottom.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.button-wrapper {
  width: 100%;
}
button {
  text-align: center;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 17px 15px;
  background-color: var(--primary);
  border-radius: 100px;
  font-size: 22px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.88px;
  color: #000;
	@media (max-width: 768px) {
		position: fixed;
		z-index: 200;
		bottom:20px;
		left:50%;
		transform: translateX(-50%);
		width: calc(100% - 40px);
		max-width:400px;
	}
}
@media (max-width: 768px) {
	button {
	}
}
.button > .star {
  width: 23px;
  height: 23px;
}
.button:active {
  border: var(--primary) 1px solid;
  background-color: transparent;
  color: var(--primary);
}
.button:active > .star {
  fill: var(--primary);
}
.top-desc {
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: -0.72px;
  color: var(--primary);
}
.top-info {
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: -0.72px;
  color: rgb(179, 179, 179);
}
.picker-wrapper {
  text-align: center;
}
.picker-wrapper > img {
  width: 14px;
  height: 10px;
}
.picker-wrapper > .arrow-top {
  position: relative;
  bottom: -10px;
  z-index: 99;
}
.picker-wrapper > .arrow-bottom {
  position: relative;
  top: -10px;
  z-index: 99;
}
.picker {
  position: relative;
  width: 100%;
  display: flex;
  box-shadow: 0 0.5vw 2vw -5px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  position: relative;
  border-top: 2rem solid var(--background);
  border-bottom: 2rem solid var(--background);
  grid-template-columns: repeat(4, fit-content(500px));
  position: relative;
  font-feature-settings: "tnum";
}
.picker:before,
.picker:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 4em;
  pointer-events: none;
}
.picker:before {
  top: -0.2em;
  background: linear-gradient(var(--background), transparent);
}
.picker:after {
  bottom: -0.2em;
  background: linear-gradient(transparent, var(--background));
}
.picker ul {
  width: 100%;
  -ms-overflow-style: none;
  max-height: 7em;
  overflow-y: scroll;
  margin: 0;
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
  padding-bottom: 3em;
  padding-top: 3em;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.picker ul::-webkit-scrollbar {
  display: none;
}
.picker li:last-child {
  opacity: 0;
}
.picker li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  scroll-snap-align: center;
  text-align: center;
  font-size: 19px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.76px;
  color: #fff;
  padding: 11px 0;
}
.picker li.selected {
  color: var(--primary);
  border-top: 1px var(--primary) solid;
  border-bottom: 1px var(--primary) solid;
  font-weight: bold;
}
.keyword-gradient {
  background: linear-gradient(to bottom, rgba(42, 0, 109, 0) 70%, #2a006d 150%);
}
.card-selected-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 35px;
}
.card-selected-wrapper > .selected-card {
  margin: 0 21px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.show-card,
.selected-card {
  position: relative;
}
.selected-card > p {
  color: #878497;
  margin-bottom: 10px;
}
.show-card > img {
  max-height: 170px;
}
.show-card > img.card {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.show-card.selected > img {
  opacity: 0;
}
.show-card.selected > img.card {
  position: absolute;
  bottom: 3px;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}
#swipeHint {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.93;
  letter-spacing: -0.56px;
  color: var(--primary);
  width: fit-content;
  margin: 0 auto;
  margin-top: 20px;
}
#taro-card-swipe.select {
  margin-bottom: 40px;
}
.loading-gif {
  object-fit: contain;
  max-width: 49%;
}
.loading-tip-header {
  font-size: 16px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.64px;
  text-align: center;
  padding: 8px 0;
  border-top: 1px solid var(--primary);
  border-bottom: 1px solid var(--primary);
  max-width: 45%;
  margin: 0 auto;
  color: var(--primary);
}
.loading-tip-content {
  font-size: 15px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.6px;
  text-align: center;
  color: #fff;
  margin-top: 20px;
}
.top-text.loading {
  transform: translate(-50%, 0%);
}
.star-bottom-bg.loading {
  background-image: url("../img/taro/back-star-bottom-loading.svg");
  margin-top: 200px;
}
.result .bg {
  position: relative;
}
.result-wrapper {
  position: relative;
  top: -140px;
}
.result-wrapper .card-image-wrapper {
  position: relative;
  max-width: 54%;
  margin: 0 auto;
}
.result-wrapper #cardImage {
  object-fit: contain;
}
.result-wrapper #download {
  position: absolute;
  width: 33px;
  height: 33px;
  object-fit: contain;
  bottom: 5px;
  right: -50px;
}

.result-wrapper #kor,
.share-wrapper #kor_1,
.share-wrapper #kor_2 {
  font-family: MuseumClassic;
  font-size: 17px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.34px;
  text-align: center;
  color: #fff;
  margin-top: 33px;
}
.result-wrapper #eng,
.share-wrapper #eng_1,
.share-wrapper #eng_2 {
  font-family: MuseumClassic;
  font-size: 28px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.56px;
  text-align: center;
  color: #dcc375;
  margin-top: 9px;
}
.result-wrapper .desc-wrapper,
.share-card .desc-wrapper {
  padding: 30px 26px;
  border-top: #fff 1px solid;
  border-bottom: #fff 1px solid;
  color: #fff;
  margin: 24px 0 32px 0;
  font-family: GmarketSans;
  font-size: 16px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: -0.32px;
  text-align: center;
}
button.result {
  width: fit-content;
  min-width: 100px;
  margin: 0 auto;
}
.share-wrapper {
  position: relative;
  top: -140px;
}
.share-wrapper.no-top {
  top: 0px !important;
}
.share-wrapper .share-title {
  font-family: "title";
  font-size: 30px;
  margin-bottom: 80px;
}
.share-wrapper .card-image-wrapper {
  display: flex;
  flex-direction: row;
  padding: 0 24px;
  color: #fff;
}
.share-wrapper .card-image-wrapper .section {
  padding: 0 16px;
}
.center-line-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 17px;
}
.center-line-text i {
  flex-grow: 1;
  height: 1px;
  background-color: var(--primary);
}
.share-wrapper .card-image-wrapper .section .card-type p {
  margin: 0 13px;
  color: var(--primary);
  font-family: GmarketSans;
  font-size: 16px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.75;
  letter-spacing: -0.64px;
  text-align: center;
}
.keywords {
  font-family: GmarketSans;
  font-size: 12px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.48px;
  text-align: center;
  margin-top: 11px;
  margin-bottom: 48px;
}
.center-line-text.title > p {
  margin: 0 13px;
  color: var(--primary);
  font-family: GmarketSans;
  font-size: 20px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.8px;
  text-align: center;
}
.share-wrapper .content {
  margin-top: 95px;
  margin-bottom: 84px;
}
.share-wrapper .content > img {
  margin-top: 34px;
  max-width: 33.6%;
}
.share-wrapper .content .text {
  font-family: GmarketSans;
  font-size: 16px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.63;
  letter-spacing: -0.64px;
  text-align: center;
  color: #fff;
  margin-top: 25px;
  padding: 0 50px;
}
.text-yellow {
  color: var(--primary);
}
.share-wrapper .content .p-name {
  margin-top: 20px;
  font-family: GmarketSans;
  font-size: 20px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.8px;
  text-align: center;
}
.bottom > form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bottom input#option {
  width: fit-content;
  margin: 0 auto 30px auto;
  border-left: none;
  border-right: none;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-radius: 0;
  padding: 0 20px;
  text-align: center;
  font-family: GmarketSans;
  font-size: 16px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.64px;
  text-align: center;
  color: white;
}
.bottom input#option::placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-family: GmarketSans;
  font-size: 16px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.64px;
  text-align: center;
}
@keyframes spin {
  0% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(20deg);
  }
}
@keyframes pickCard {
  0% {
    opacity: 1;
    transform: translateY(0%);
  }
  100% {
    opacity: 0;
    transform: translateY(-120%);
  }
}
.share-popup {
	display: none;
  position: fixed;
  bottom: 0px;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  max-width: 400px;
  background-image: url(../img/taro/popup-back.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 22px 0 37px 0;
}
.share-popup > .share-popup-title {
  font-family: GmarketSans;
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.94;
  letter-spacing: -0.72px;
  text-align: center;
  color: #fff;
  margin-bottom: 35px;
}
.share-popup .share-item-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}
.share-popup .share-item {
  width: 60px;
  font-family: GmarketSans;
  font-size: 12px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.48px;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.share-popup .share-item > img {
  max-width: 41px;
  max-height: 41px;
  margin-bottom: 14px;
}
.share-popup .share-close-btn{
  position: absolute;
  right:0;
  top:0;
  background: url("../img/common/ic_popup_close.svg") no-repeat center / cover;
  width: 32px;
  height: 32px;
}