@charset "UTF-8";
@import url('/assets/fonts/pretendard_gov/font.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&display=swap');
@import url('/assets/css/mobile_reset.css?v=1');
@import url('/assets/css/common.css');

/* fonts */
.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

/* CSS Document */
body, html{
  width:100%;
  height:100%;
  overflow: hidden;
}
.App{
  width:100%;
  height:100%;
  background-color: #F5F4F8;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.App__page{padding:0 1.2em;min-height: 20em;}
.App__sidemenu{
  position: absolute;
  right:0;
  left: 0;
  top:0;
  bottom:0;
  z-index: -1;
  opacity: 0;
  transition: all .5s;
}
.App__sidemenu.active{
  z-index: 1000000;
  opacity: 1;
}
.App__search{
  position: absolute;
  left:0;
  width:100%;
  top:0;
  bottom:0;
  z-index: -1;
  opacity: 0;
  transition: all .5s;
}
.App__search.active{
  z-index: 1000000;
  opacity: 1;
}
.App__header{
  flex-shrink: 0;
  flex-grow: 0;
  height: 4.6em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  transition: all .5s ease-in;
  padding:0 1em;
}
.main .App__header{
  position: absolute;
  left:0;
  right: 0;
  top:0;
  z-index: 100000;
}
.scroll_on .App__header{font-size: 0.875em;background: #ffffff00; backdrop-filter: blur(20px);height: 4em;}
.scroll_on .App__header .title{text-align: center;color:#111}
.scroll_on .App__header.no{
  background: none;
  backdrop-filter: blur(0px);
}
.App__header .btn_side{
  flex-grow: 0;
  flex-shrink: 0;
  width: 2.6em;
  height:2.6em;
  background-size: 0.7em;
  border-radius: 2em;
  box-shadow: 0 0 1em #00000057;
  display: block;
  overflow: hidden;
  position: relative;
  z-index: 10;
}
.App__header .btn_side .count{
  position: absolute;
  right:5px;
  top:5px;
  width:16px;
  height:16px;
  line-height: 16px;
  border-radius: 12px;
  color:#fff;
  background-color: #000;
  font-size: 9px;
  text-align: center;
}
.App__header .btn_side[data-button='menu']{
  background: #4e28d3db url(../images/btn_menu.svg) no-repeat center;
  text-indent: -999px;
}
.App__header .btn_side[data-button='cart']{
  color:#111;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff66;
}
.App__header .btn_side[data-button='home']{
  color:#111;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff66;
}
.App__header .buttons{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: .2em;
}
.App__header .btn_prev{
  flex-grow: 0;
  flex-shrink: 0;
  width: 2.6em;
  height:2.6em;
  background: #ffffffa6 url(../images/btn_prev.svg) no-repeat center;
  background-size: 1em;
  border-radius: 2em;
  box-shadow: 0 0 1em #00000057;
  display: block;
  text-indent: -999px;
  overflow: hidden;
  position: relative;
  z-index: 10;
}
.App__header .title{
  line-height: 2em;
  height: 2em;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1;
  text-align: center;
}
.App__header .search{
  position: absolute;
  left: 4em;
  right: 4em;
  bottom: 0;
  z-index: 10;
  text-align: center;
  height: 3em;
  top: 50%;
  margin-top: -1.5em;
}
.App__header .search a{
  display: block;
  width: 100%;
  height: 100%;
  text-align: left;
  background-color: #ffffffc2;
  border-radius: 2em;
  box-shadow: 0 0 1em #00000057;
  display: block;
  overflow: hidden;
  position: relative;
  z-index: 10;
  background-position: 90% center;
  background-repeat: no-repeat;
  background-size: 1em;
  line-height: 3em;
  padding: 0 1em;
  box-sizing: border-box;
}
.App__header .search a[data-icon='search']{
  background-image: url(../images/icon_search.svg);
}
.white.App__header .title{color:#fff}
.App__header .title span{font-size: 1.15em;font-weight: bold;text-transform: capitalize;}
.App__main{
  flex-grow: 1;
  flex-shrink: 1;
  overflow: hidden;
}
.App__content{
  height: 100%;
  overflow-y: auto;
  overflow-x:hidden;
  box-sizing: border-box;
}

/* Footer */
.App__footer{
  background: #E3E1EA;
  padding: 1.8em;
  text-align: center;
  margin-bottom: -1.5em;
}
.FooterLogo{padding-bottom: .5em;}
.FooterMenu a{color:#111}
.FooterMenu a::after{
  content:' ·';
  display: inline-block;
  padding-left: .3em;
}
.FooterMenu a span{font-size: 0.8125em;}
.FooterMenu a:last-child::after{display: none;}

.FooterInfo__title span{font-size: 0.8125em;color:#111;font-weight: bold;}
.FooterInfo__content{padding-top:.5em;padding-bottom: 3em;}
.FooterInfo__content .copyright{
  color: #767676;
  font-size: 0.8125em;
  display: flex;
  flex-direction: column;
  line-height: 1.2em;
  gap:0.2em;
}

.App__noti{
  display: flex;
  flex-direction: row;
  gap:.4em;
  position: relative;
  z-index: 30;
}
.App__noti a{
  box-shadow: 0px 4px 10px 0px #0000001A;
  backdrop-filter: blur(1px);
  width: 2.6em;
  height: 2.6em;
  background-color: #ffffffcf;
  border-radius: 2.6em;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.App__noti a .on{
  position: absolute;
  left:1px;
  top:1px;
  width: 10px;
  height: 10px;
  background-color: #6443d6;
  border-radius: 10px;
}
.App__noti a[data-icon='bell']{
  background-image: url(../images/icon_bell.svg);
}
.App__noti a[data-icon='bell'].on{
  background-image: url(../images/icon_bell_on.svg);
}
.App__noti a[data-icon='search']{
  background-image: url(../images/icon_search.svg);
}

/* AppSearch */
.AppSearch{}
.AppSearch__blind{
  position: absolute;
  left:0;
  top:0;
  bottom:0;
  right:0;
  z-index: 1;
  background-color: #000000b0;
}
.AppSearch__inner{
  width:100%;
  position: absolute;
  left:0;
  top:0;
  bottom:0;
  z-index: 10;
  background-color: #ddd;
  transform: translateX(-20em);
  transition: all .5s;
}
.active .AppSearch__inner{
  transform: translateX(0em);
}
.AppSearch__header{
  position: relative;
}
.AppSearch__header .title{
  line-height: 3em;
  color:#fff;
  text-align: center;
}
.AppSearch__header .control{
  position: absolute;
  left:0;
  right:0;
  height:3em;
  display: flex;
  flex-direction: row;
  justify-content: end;
  z-index: 100;
  top:0;
  align-items: center;
}
.AppSearch__form{
  position: relative;
}
.AppSearch__form .input{
  background-color: #00000055;
  color:#ffffff55;
  border-radius: .8em;
  line-height: 3.2em;
  padding:0 1em;
  width: 100%;
}
.AppSearch__form .btn_submit{
  background-image: url(../images/icon_search_white.svg);
  background-repeat: no-repeat;
  background-size: 1em;
  background-position: center;
  width: 2em;
  height: 2em;
  position: absolute;
  right:.5em;
  top:50%;
  margin-top:-1em;
}
.AppSearch__top{
  background-color: #232A36;
  padding:1em 1.2em;
}
.AppSearch .btn_close {
  width: 2.2em;
  height: 2.2em;
  background: #fff url(../images/icon_close.svg) no-repeat center;
  background-size: 0.7em;
  border-radius: 2em;
  box-shadow: 0 0 1em #00000057;
  display: block;
  text-indent: -999px;
  overflow: hidden;
  position: relative;
  z-index: 10;
  background-color: #ffffffb6;
}
.AppSearch__category{
  padding:1.2em;
}
.AppSearch__category ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap:.8em;
  justify-content: center;
}
.AppSearch__category li a{
  width: 4.6em;
  line-height: 4.6em;
  text-align: center;
  background-color: #F5F4F8;
  display: block;
  border-radius: 3em;
  border:1px solid #ccc;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color:#fff;
  font-weight:bold;
  position: relative;
}
.AppSearch__category li a img{width: 100%;height: 100%;object-fit: cover;}
.AppSearch__category li a span{font-size: 0.875em;position: absolute;left:0;right:0;text-align: center;top:50%;margin-top:-1em;line-height: 2em;display: block;}
.AppSeach__title{line-height: 2em;text-align: center;}
.AppSeach__title span{font-size: 1.125em;font-weight: bold;}
.AppSearch__text{}
.AppSearch__text span{font-size: 0.875em;color:#fff}
.AppSearch__tag{}
.AppSearch__subtitle{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.AppSearch__subtitle span{font-size: 0.875em;color:#ffffffb5;}
.AppSearch__subtitle a.del{
  font-size: 0.875em;
}
.AppSearch__taglist{
  display: flex;
  flex-direction: row;
  gap: 3px;
  padding-top:.5em;
}
.AppSearch__taglist a{
  color:#fff;
  background-color: #ffffff4f;
  line-height: 1.8em;
  border-radius: 3px;
  padding:0 .5em;
  display: block;
  height: 1.8em;
  word-break: keep-all;
}
.AppSearch__taglist a span{
  font-size: 0.875em;
  vertical-align: baseline;
  line-height: 1em;
}

/* AppSideMenu */
.AppSideMenu{}
.AppSideMenu__blind{
  position: absolute;
  right:0;
  left: 0;
  top:0;
  bottom:0;
  z-index: 1000;
  background-color: #000000b8;
}
.AppSideMenu__inner{
  position: absolute;
  right:0;
  width: 20em;
  top:0;
  bottom:0;
  z-index: 1000;
  background-color: #4E28D3;
  transform: translateX(22em);
  transition: all .5s;
  box-shadow: 0 0 1em #0000005c;
  display: flex;
  flex-direction: column;
}
.active .AppSideMenu__inner{
  transform: translateX(0);
}
.AppSideMenu__top{
  background-color: #362181;
  padding:1em 1.2em;
  border-radius:0 0 1.5em 1.5em;
  flex-grow: 0;
  flex-shrink: 0;
}
.AppSideMenu__header{
  position: relative;
}
.AppSideMenu__header .title{
  line-height: 3em;
  color:#fff;
  text-align: center;
}
.AppSideMenu__header .control{
  position: absolute;
  left:0;
  right:0;
  height:3em;
  display: flex;
  flex-direction: row;
  justify-content: end;
  z-index: 100;
  top:0;
  align-items: center;
}
.AppSideMenu__header .btn_close {
  width: 2.2em;
  height: 2.2em;
  background: #fff url(../images/icon_close.svg) no-repeat center;
  background-size: 0.7em;
  border-radius: 2em;
  box-shadow: 0 0 1em #00000057;
  display: block;
  text-indent: -999px;
  overflow: hidden;
  position: relative;
  z-index: 10;
  background-color: #ffffffb6;
}

.AppSideMenu__state{
  border-radius: 1em;
  background-color: #0000001A;
  color:#fff;
  padding:1.2em 1.2em;
  position: relative;
}

.AppSideMenu__state .user .img{
  width: 2.6em;
  height:2.6em;
  overflow:hidden;
  border-radius: 3em;
  border:.2em solid #fff;
  position: absolute;
  right:1.2em;
  top:50%;
  margin-top:-1.5em;
  background-color: #eee;
}
.AppSideMenu__state .user .img img{
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.AppSideMenu__state .name {color: #fff;line-height: 1.2em;}
.AppSideMenu__state .name span{font-size: 1.25em;}
.AppSideMenu__state .link {padding-top:0.2em;}
.AppSideMenu__state .link a {color: #efefef;font-size: 0.75em;}
.AppSideMenu__state .info{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.AppSideMenu__state .info a{color: #fff;}
.AppSideMenu__state .info .join{color:#eee;border-bottom: 1px solid #eee;font-size: 0.825em;line-height: 1.2em;}
.AppSideMenu__mylink{
  display: flex;
  flex-direction: row;
  gap:1em;
  align-items: center;
  justify-content: center;
  padding:0 1.2em;
}
.AppSideMenu__mylink a{
  color: #fff;
  display: block;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.AppSideMenu__mylink a span{font-size: 0.875em;}
.AppSideMenu__mylink a[data-icon]:before{
  display: block;
  content:'';
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.4em auto;
  width: 2em;
  height:2.4em;
}
.AppSideMenu__mylink a[data-icon=my_art]::before{
  background-image: url(/assets/images/my_art.svg);
}
.AppSideMenu__mylink a[data-icon=my_wish]::before{
  background-image: url(/assets/images/my_wish.svg);
}
.AppSideMenu__mylink a[data-icon=my_post]::before{
  background-image: url(/assets/images/my_post.svg);
}
.AppSideMenu__mylink a[data-icon=my_list]::before{
  background-image: url(/assets/images/my_list.svg);
}

/* AppSideMenu__content */
.AppSideMenu__content{
  flex-shrink: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 5em;
}
.AppSideMenu__content ul{
  list-style: none;
}
.AppSideMenu__list li{
  padding-bottom: .5em;
}
.AppSideMenu__list li[data-depth] a{
  color:#fff;
  display: block;
  text-align: center;
}
.AppSideMenu__list li[data-depth] .en{
  font-size: 1.8em;
  font-weight: bold;
  display: block;
  line-height: 1.2em;
}
.AppSideMenu__list li[data-depth] .ko{
  font-size: 0.875em;
  display: block;
  line-height: 1.5em;
}
.AppSideMenu__list li[data-depth] > ul{
  display: none;
}
.AppSidemenu__footer{
  padding: 0 1.2em;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1em;
}
.AppSidemenu__footer .logout{
  text-align: center;
  display: block;
  line-height: 1em;
  color:#ffffffb6;
}
.AppSidemenu__footer .logout span{font-size: 0.875em;}
.AppSidemenu__footer .btn_myart{
  display: block;
  background-color: #232A36;
  color: #fff;
  line-height: 3.2em;
  width: 100%;
  text-align: center;
  border-radius: .5em;
}
.AppSidemenu__footer .btn_myart span{color:#fff;font-size: 1em;}


/* AlterSection */
.AlterSection{
	position: absolute;top:0%;left:10%;right:10%;z-index: 0;
	opacity: 0.8;
  overflow: hidden;
  height: 0;
  transition: opacity .5s;
}
.AlterSection.active{
    z-index: 1050000;
    top:88%;
    height: 5em;
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.AlterSection .alert{
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  text-align: center;
  background: #000000e3;
  color: #fff;
  padding: 10px;
  border-radius: 16px;
}
.AlterSection .alert i{display: inline-block;padding-right: .5em;}
.AlterSection .alert strong{display: none;}
.AlterSection .alert.active{transform: translateY(0);opacity: 1;z-index:1000}
.AlterSection .alert .msg{font-size: 14px;text-align: center;display: block;width: 100%;}
.AlterSection .alert.danger{
  background-color: #e91717;
}

/* AppModule */
.AppModule{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top:0;
  overflow: hidden;
  background: #000000B2;
  z-index: 1000;
  height:0;
  max-height:0;
  opacity: 0;
  transition: opacity .5s;
}
.AppModule.active{
  max-height: 100%;
  height:100%;
  opacity: 1;
  z-index: 10000;
}
.AppModule__inner{
  position: absolute;
  border-radius: 1em 1em 0 0;
  background-color: #f7f7f7;
  left: 0;
  right: 0;
  bottom: 0;
}
.AppModule.active .AppModule__inner{
  height: 23em;
}
.AppModule[data-size='small'].active .AppModule__inner{
  height: 30em;
}
.AppModule[data-size='big'].active .AppModule__inner{
  height: 35em;
}
.AppModule__handle{
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 100;
  height: 3vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.AppModule__handle:after{
  content: "";
  display: block;
  width: 11vw;
  background-color: #ccc;
  height: 6px;
  border-radius: 4px;
  margin:0 auto;
}
.AppModule__content{
  height:100%;
  padding-top:3vh;
  padding-bottom: 12vh;
}
.AppModule__content.no_navi{padding-bottom: 0;}

.SeachFilter{
  display: flex;
  flex-direction: row;
  gap: .5em;
}
.SeachFilter .button{
  line-height: 3.4em;
  border-radius: 0.8em;
  border:1px solid #232A36;
  width: 100%;
  display: block;
  text-align: center;
}
.SeachFilter .button i{
  padding-right: .5em;
}
.SeachFilter .button span{
  color: #232A36;
}
.SeachFilter .button.artist{
  background-color:#232A36;
}
.SeachFilter .button.artist span{
  color:#fff;
}
.SeachFilter .button.artist i{
  color:#fff;
}
/* LoadingBar */
.LoadingBar {
  display: block;
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background: #00000066;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: -1;
  opacity: 0;
  transition: all .5s;
}
.LoadingBar.active{z-index: 1000000;opacity: 1;}
.LoadingBar .loading{display: flex;font-size: 0.4em;}
.LoadingBar .loading .dot {
  position: relative;
  width: 2em;
  height: 2em;
  margin: 0.8em;
  border-radius: 50%;
}
.LoadingBar .loading .dot::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  animation: wave 2s ease-out infinite;
}
.LoadingBar .loading .dot:nth-child(1) {
  background: #7ef9ff;
}
.LoadingBar .loading .dot:nth-child(1)::before {
  animation-delay: 0.2s;
}
.LoadingBar .loading .dot:nth-child(2) {
  background: #89cff0;
}
.LoadingBar .loading .dot:nth-child(2)::before {
  animation-delay: 0.4s;
}
.LoadingBar .loading .dot:nth-child(3) {
  background: #4682b4;
}
.LoadingBar .loading .dot:nth-child(3)::before {
  animation-delay: 0.6s;
}
.LoadingBar .loading .dot:nth-child(4) {
  background: #0f52ba;
}
.LoadingBar .loading .dot:nth-child(4)::before {
  animation-delay: 0.8s;
}
.LoadingBar .loading .dot:nth-child(5) {
  background: #000080;
}
.LoadingBar .loading .dot:nth-child(5)::before {
  animation-delay: 1s;
}

@keyframes wave {
  50%, 75% {
    transform: scale(2.5);
  }
  80%, 100% {
    opacity: 0;
  }
}

/* ConfirmPopup */
.ConfirmPopup{
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background-color:#00000069;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.ConfirmPopup__inner{
  width: 100%;
  padding: 0 2em;
  box-sizing: border-box;
}
.ConfirmPopup__box{
  background-color: #fff;
  box-shadow: 0px 6px 20px 0px #3800AF1A;
  border-radius: 1.2em;
  padding:1.5em;
  width: 100%;
  box-sizing: border-box;
}
.ConfirmPopup__box .text{
  padding-bottom: 1em;
  text-align: center;
}
.ConfirmPopup__box .text span{font-size: 0.875em;color:#111}
.ConfirmPopup__box .control{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap:0.5em;
}
.ConfirmPopup__box .control .button.submit{
  background-color: #4e28d3;
  color:#fff;
  border-color:#4e28d3;
}
.ConfirmPopup__box .control .button{
  flex-grow: 1;
  flex-shrink: 1;
  color: #666;
  height:2.4em;
  line-height: 2.4em;
  display: block;
  border:1px solid #666;
  border-radius: 0.6em;
  text-align: center;
}
.ConfirmPopup__box .control .button span{font-size: 0.825em;vertical-align: baseline;}




/* Document */
.Document {
  font-size: 0.875em;
}
.Document .article{
  padding:.5em 0;
}
.Document table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.Document table, .Document th, .Document td {
  border: 1px solid #ccc;
}
.Document th, .Document td {
  padding: 10px;
  text-align: left;
}
.Document th {
  background-color: #f9f9f9;
}
.Document h1{font-size: 1.3em;line-height: 1.4em;}
.Document h2{padding-top:.5em;font-size: 1.2em;line-height: 1.3em;font-weight: bold;}
.Document h3{padding-top:.5em;font-size: 1.1em;line-height: 1.2em;font-weight: bold;}
.Document li{line-height: 1.2em;}
.Document p{line-height: 1.2em;font-size: 1em;}
.Document ul{
  list-style: none;
  margin-left:1em;
}
.Document ol{
  list-style: none;
  margin-left:1em;
}

/**
	TabArea
*/
.TabArea{border-radius: .5em;background-color: #E5E4EB;}
.TabArea.col2 .TabArea__item{width: 50%;}
.TabArea__item{
	float:left;
	position: relative;
	z-index: 1;
	width: 33.33%;
}
.TabArea__item.active{
	z-index: 1;
	border-radius: .5em;
	overflow: hidden;
	box-shadow: 0px 4px 10px 0px #4E29D326;
}
.TabArea__item.active a{background-color: #4E29D3;}
.TabArea__item.active a span{color:#fff}
.TabArea__item a{
	line-height: 3em;
	text-align: center;
	display: block;
}
.TabArea__item a span{
	font-size: 0.825em;
	color:#767676;
}


.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.4;
  visibility: visible;
  filter: alpha(opacity=0);
  opacity: 0;
}
.tooltip.in {
  filter: alpha(opacity=90);
  opacity: .9;
}
.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}
.tooltip.right {
  padding: 0 5px;
  margin-left: 3px;
}
.tooltip.bottom {
  padding: 5px 0;
  margin-top: 3px;
}
.tooltip.left {
  padding: 0 5px;
  margin-left: -3px;
}
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #000;
  border-radius: 4px;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
  right: 5px;
  bottom: 0;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  left: 5px;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  right: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  left: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}




.App__navigation{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #FFFFFFB2;
  border-radius: 1em 1em 0 0;
  box-shadow: 0px 0 10px 0px #3800AF26;
  backdrop-filter: blur(20px);
  z-index: 1000;
  transition: transform .5s;
  transform: translateY(0);
}
.App__navigation.hide{
  transform: translateY(10em);
}
.App__navigation .inner{
  display: flex;
  flex-direction: row;
  padding:0 0.5em;
}
.App__navigation .link{
  display: block;
  padding: 1em 0;
  width: 20%;
}
.App__navigation .link::before{
	display: block;
	content:'';
  height: 1.6em;
  background-size: 1.1em;
  background-position: center;
  background-repeat: no-repeat;
}
.App__navigation .link[data-icon='home']:before{
  background-image: url(../images/icon_home.svg);
}
.App__navigation .link[data-icon='wish']:before{
  background-image: url(../images/icon_wish.svg);
}
.App__navigation .link[data-icon='add']:before{
  background-image: url(../images/icon_add.svg);
}
.App__navigation .link[data-icon='mail']:before{
  background-image: url(../images/icon_mail.svg);
}
.App__navigation .link[data-icon='cart']:before{
  background-image: url(../images/icon_cart.svg);
}
.App__navigation .link[data-icon='mypage']:before{
  background-image: url(../images/icon_mypage.svg);
}
.App__navigation .link[data-icon='search']:before{
  background-image: url(../images/icon_search2.svg);
}
.App__navigation .link span{display: block;text-align: center;font-size: 0.725em;}

.App__navigation .link.active{
  filter: invert(10%) sepia(100%) saturate(7223%) hue-rotate(251deg) brightness(79%) contrast(143%);
}

.App__navigation .menu{
  position: absolute;
  width: 10em;
  left:50%;
  margin-left:-5em;
  bottom:4.2em;
  opacity: 0;
  transform: translateY(-1em);
  transition: all .5s 0;
  z-index: -1;
  height:0
}
.App__navigation .menu.active{
  opacity: 1;
  transform: translateY(0em);
  height:auto;
  z-index: 1000;
}
.App__navigation .menu a{
  line-height: 2.6em;
  padding: 0 1em;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  gap: .5em;
  border-top:1px solid #704fe6;
  color:#fff;
}
.App__navigation .speech-bubble a span{font-size: 0.875em;}
.App__navigation .speech-bubble a:first-child{border-top:0}

.App__navigation .speech-bubble{
  border:1px solid #3a1ca5;
  border-radius: 1em;
  backdrop-filter: blur(20px);
  background: #4e28d3;
  box-shadow: 0px 6px 20px 0px #0000001A;
}
.App__navigation .speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -21px; /* 아래쪽에 배치 */
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: #3a1ca5 transparent transparent transparent;
}