@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&family=Noto+Color+Emoji&display=swap');
/* font-family: "Lexend Deca", sans-serif; */
/* font-family: "Noto Color Emoji", sans-serif; */

@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('/public/font/PretendardVariable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'HakgyoansimDunggeunmisoTTF-B';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-B.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Cafe24Lovingu';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2405-3@1.1/Cafe24Lovingu.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

*{margin: 0;padding: 0;box-sizing: border-box;}
html{scroll-behavior: smooth;}
body{overflow-y: scroll;overflow-x: hidden; background-color: #fff; color: #222; font-family: 'Pretendard Variable'; font-size: 16px; font-weight: 500; margin: auto; text-align: center; word-break:keep-all;}
li{list-style-type: none;}
a{text-decoration: none;color: inherit;}
button,input,textarea{outline: none; border: none; font-family: 'Pretendard Variable';color: inherit;}
button,input[type=button],input[type=submit],input[type=reset]{cursor: pointer;}
table{border-collapse: collapse;}
input, select{vertical-align: middle;}
::selection{color: #fff; background-color: #e81e75;}

.t_only{display: none;}
.m_only{display: none;}

.txt-left{text-align: left;}
.txt-center{text-align: center;}
.txt-right{text-align: right;}

.txt-bk{color: #222;}
.txt-pink{color: #e81e75;}
.txt-pink2{color: #ff1878;}
.txt-yellow{color: #fff150;}
.txt-white{color: #fff;}

.bg-ivory{background-color: #fdfdf3;}
.bg-beige{background-color: #fef7e7;}
.bg-azure{background-color: #f0f1ff;}
.bg-gray{background-color: #f8f8f8;}
.bg-green{background-color: #13b867;}
.bg-orange{background-color: #ff7520;}

.frame-m10{margin: 10rem auto; /*border: 1px solid red;*/}
.frame-m8{margin: 8rem auto; /*border: 1px solid orange;*/}
.frame-m7{margin: 7rem auto; /*border: 1px solid yellow;*/}
.frame-m5{margin: 5rem auto; /*border: 1px solid green;*/}
.frame-m3{margin: 3rem auto; /*border: 1px solid blue;*/}
.frame-p5{padding: 5rem 0; /*border: 1px solid navy;*/}
.frame-p7{padding: 7rem 0; /*border: 1px solid purple;*/}
.frame-p9{padding: 9rem 0; /*border: 1px solid black;*/}

.mb100{margin-bottom: 100px;}


/* 애니메이션 */
.section.active .fadeUp {animation: fadeUp 0.6s 0.6s both;}
.pulsate{animation: pulsate 1.3s ease-in-out infinite ;}
.shaking {animation: shaking 2.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;}
.shaking2 {animation: shaking2 3s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;}
.spin{animation: spin 3s infinite;}
.moving{animation: moving 4s linear infinite both;}
.marquee{animation: marquee 20s linear infinite;}

@keyframes fadeUp {
	0%{transform:translateY(50px); opacity: 0;}
	100%{transform:translateY(0); opacity: 1;}
}
@keyframes pulsate {
  0% {transform: scale(1);}
  50% {transform: scale(1.15);}
  100% {transform: scale(1);}
}
@keyframes shaking {
  0%,70% {transform: rotate(0deg);transform-origin: 50% 100%;}
  7% {transform: rotate(1deg);}
  14%,28%,42% {transform: rotate(-2deg);}
  21%,35%,49% {transform: rotate(2deg);}
  56% {transform: rotate(-1deg);}
  63% {transform: rotate(1deg);}
}
@keyframes shaking2 {
  0%,100% {transform: translateY(0);}
  10%,30%,50%,70% {transform: translateY(-5px);}
  20%,40%,60% {transform: translateY(5px);}
  80% {transform: translateY(4px);}
  90% {transform: translateY(-4px);}
}

@keyframes spin {
  0%{ transform: translate(0deg);}
  100%{ transform: rotate(360deg);}
}
@keyframes moving {
  0% {transform: translate(0);}
  20% {transform: translate(-4px, 4px);}
  40% {transform: translate(-4px, -4px);}
  60% {transform: translate(4px, 4px);}
  80% {transform: translate(4px, -4px);}
  100% {transform: translate(0);}
}
@keyframes marquee {
  0% {transform: translate3d(0, 0, 0);}
  100% {transform: translate3d(-50%, 0, 0);}
}


/* 페이지 앵커 */
#pageMenu {position: fixed; left:2rem; top:50%; transform: translateY(-50%); z-index: 5;}
#pageMenu li { 
  margin: 14px 0; 
}
#pageMenu a { 
  display: block; 
  position: relative; 
  text-align: left; 
  padding-bottom: 6px;
}
#pageMenu a span { 
  font-family: "Lexend Deca", sans-serif;
  display: inline-block;
  color: #ccc;
  transition: 0.4s;
}
#pageMenu a i {
  display: inline-block; 
  position: absolute; 
  width: 6px; 
  height: 2px; 
  background-color: #ccc; 
  left: 1px; 
  bottom: 0;
  transition: 0.4s;
}
#pageMenu li.active a span { 
  color: #222;
}
#pageMenu li.active a i{
  background-color: #222;
  width: 100%;
}
.p_white{color: #fff !important;}
.i_white{background-color: #fff !important;}
.p_pink{color: #e81e75 !important;}
.i_pink{background-color: #e81e75 !important;}

/* 우측 바로가기 메뉴 */
nav{
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.nav-circle{
  background-color: #fff;
  box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.12);
  border-radius: 100px;
  width: 125px;
  height: 125px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 20px;
  cursor: pointer;
} 
.nav-circle:first-child{color: #e81e75;}
.nav-circle:last-child{color: #fff; background-color: #e81e75; font-size: 0.9rem;}
.nav-circle b{font-size: 1.4rem; width: 80%;}

/* 헤더 */
header {position: fixed !important; top: 0; left: 0; width: 100%; height: 70px; background-color: transparent; color: #fff; z-index: 10; display: flex; justify-content: space-between; gap:10px; align-items: center; border-bottom: 1px solid #e5e5e5; padding: 0 min(3vw,100px); position: relative; transition: 0.22s;}
header.h_white{background-color: #fff; color: #666;}
.top{display: flex;}
.logo{width: 42px; cursor: pointer;}
.l_white{filter: brightness(100);}

.gnb{margin-left: 50px; white-space: nowrap;}
.main-menu{display: inline-block; line-height: 70px; font-weight: 500; padding: 0 1vw; border-bottom: 3px solid transparent;}
.main-menu:hover{border-bottom: 3px solid #e81e75;}
.main-menu a{color: #fff; transition: 0.22s;}
.main-menu a.a_gray{color: #666;}
.sub-box{background-color: #fff; position: absolute; top: 70px; left: 0; width: 100%; height: 320px; box-shadow: 0px 2px 5px -2px #ddd; overflow: hidden; padding: 20px 100px; display: none;}
.lnb{display: grid; grid-template-columns: 1fr 1fr; font-weight: 400;}
.lnb-list{text-align: left; color: #666;}
.lnb-list dl{display: inline-block; width: 19%; vertical-align: top; cursor: pointer;}
.lnb-list dt{margin-bottom: 10px; font-weight: 500; line-height: 20px;}
.lnb-list dd{font-size: 0.9rem; line-height: 22px;} 
.lnb-list dd:hover{color: #e81e75;}
.lnb-img{text-align: right;}
.lnb-img img{ height: 280px; margin-right: 10px;}
.lnb-img img:last-child{margin-right: 0;}
.rnb{display: flex; align-items: center;}

.sns-btn{margin-right: 25px; white-space: nowrap;}
.sns-btn img{
  margin-right: 5px;
  width: 35px;
  cursor: pointer;
  vertical-align: bottom;
}
.sns-btn .insta-btn:hover{content: url(/public/_img/icon/btn-insta2.png);}
.sns-btn .youtube-btn:hover{content: url(/public/_img/icon/btn-youtube2.png);}
.sns-btn .kakao-btn:hover{content: url(/public/_img/icon/btn-kakao2.png);}
.sns-btn .blog-btn:hover{content: url(/public/_img/icon/btn-blog2.png);}
.store-btn>img{width: 1.5rem; margin-right: 6px; vertical-align: bottom;}
.store-btn{
  font-size: 1rem;
  padding: 8px 30px;
  border-radius: 50px;
  background-color: #fff;
  color: #e81e75;
  border: 1px solid #fff;
  transition: 0.1s;
  white-space: nowrap;
}
.store-btn.bg-pk{
  border: 1px solid #e81e75;
  background-color: #e81e75;
  color: #fff;
}
.store-btn.bg-pk>img{filter: brightness(100);}
.store-btn:hover{
  border: 1px solid #222;
  background-color: #222;
  color: #fff;
}
.store-btn:hover>img{filter: brightness(100);}
/* 모바일 메뉴 */
.m_menu{
  padding: 2px;
  cursor: pointer;
  margin-left: 20px;
}
.m_menu .h-line{
  width: 30px;
  height: 2px;
  background-color: #666;
  display: block;
  margin: 6px auto;
  transition: all 0.3s ease-in-out;
}
#m_menu.is-active .h-line:nth-child(2){opacity: 0;}
#m_menu.is-active .h-line:nth-child(1){transform: translateY(8px) rotate(45deg);}
#m_menu.is-active .h-line:nth-child(3){transform: translateY(-8px) rotate(-45deg);}

/* 공통 */
.btn1{
  color: #fff;
  background-color: #222;
  border-radius: 100px;
  font-size: 1.6rem;
  padding: 10px 40px;
  transition: 0.3s;
}
.btn1:hover{background-color: #e81e75;}
.btn2{
  border: 2px solid #222;
  background-color: transparent;
  border-radius: 100px;
  font-size: 1.6rem;
  font-weight: 500;
  padding: 8px 40px;
  transition: 0.3s;
}
.btn2:hover{background-color: #222; color: #fff;}
.btn3{
  display: block;
  width: 50vw;
  margin: auto;
  padding: 18px;
  background-color: #fff;
  color: #e81e75;
  font-size: 1.6rem;
  transition: 0.2s;
  border-radius: 100px;
  font-weight: 700;
}
.btn3>img{width: 1.8rem; vertical-align: -5px; transition: 0.1s;}
.btn3:hover{background-color: #e81e75; color: #fff;}
.btn3:hover>img{filter: brightness(100);}
h3{font-size: 3.1rem;}
h4{color: #e81e75; font-size: 1.5rem;}
h5{font-size: 2.1rem; font-weight: 500; margin-bottom: 20px;}
h6{font-size: 1.1rem; font-weight: 500; line-height: 1.6rem;}

/* 반응형 */
@media screen and (max-width: 1280px){
  .t_only{display: block;}
  body{font-size: 15px;}
  nav{display: none;}
  #pageMenu{display: none;}
  header{height: 60px; padding: 0 4vw;}
  .logo{width: 38px;}
  .gnb{margin-left: 1.5vw;}
  .main-menu{padding: 0 1vw; line-height: 60px;}
  .sub-box{height: 240px; padding: 20px 4vw 20px 9vw; top: 60px;}
  .lnb-img img{height: 200px;}
  .sns-btn{margin-right: 1.5vw;}
  .sns-btn img{width: 30px; margin-right: 0;}
  .store-btn{font-size: 0.9rem;padding: 6px 15px;}
  .btn1{font-size: 1.3rem;}
  .btn2{font-size: 1.3rem;}
  h3{font-size: 2.4rem;}
  h4{font-size: 1.3rem;}
  h5{font-size: 1.5rem; margin-bottom: 7px;}
}
@media screen and (max-width: 1024px){
  .pc_only{display: none;}
  .m_only{display: block;}

  .frame-m8{margin: 7rem auto;}
  .frame-m7{margin: 6rem auto;}
  .frame-p7{padding: 6rem 0;}

  header{background-color: #fff; color: #666;}
  .gnb{position: absolute; top: 60px; right: -100%; width: 100%; height: calc(100vh - 45px); text-align: left; padding: 15px 30px; background-color: #fff; color: #666; transition: 0.5s;}
  .gnb.open{right: 0;}
  .main-menu{width: 100%; padding: 0; line-height: 50px; display: block; border-bottom: none;}
  .main-menu:hover{border-bottom: none;}
  .main-menu a{cursor: pointer; color: #666 !important;}
  .sub-box{top: 0; left: 50%; width: 50%; height: 100%; padding: 30px; overflow-y: auto;}
  .main-menu:first-of-type .sub-box {display: block;}
  .lnb-list dl{width: 100%; margin-bottom: 25px; display: block;}
  .lnb-list dt{color: #e81e75;}
  .lnb-list dd{line-height: 26px;}
  .lnb-img{display: none;}

  .btn1{font-size: 1.2rem;}
  .btn2{font-size: 1.2rem;}
  h3{font-size: 2.2rem;}
  h4{font-size: 1.2rem;}
  h5{font-size: 1.3rem;}
}

@media screen and (max-width: 820px){
  .btn1{border-radius: 10px; font-size: 1.3rem;}
  .btn2{border-radius: 10px;}
  .btn3{border-radius: 10px; width: 90vw; font-size: 1.4rem; padding: 13px;}
  h3{font-size: 2rem;}
  h5{font-size: 1.2rem; margin-bottom: 7px;}
}

@media screen and (max-width: 680px){
  .m_none{display: none;}

  .frame-m10{margin: 6rem auto;}
  .frame-m8{margin: 4rem auto;}
  .frame-m7{margin: 4rem auto;}
  .frame-m5{margin: 3rem auto;}
  .frame-p5{padding: 3rem 0;}
  .frame-p7{padding: 4rem 0;}
  .frame-p9{padding: 5rem 0;}

  .btn1{font-size: 1.2rem;}
  .btn3{font-size: 1.25rem;}
  .btn3>img{width: 1.5rem;}
  h3{font-size: 1.6rem;}
  h5{font-size: 1.1rem;}
  nav{display: none;}
  header{height: 50px;}
  .gnb{top: 50px;}
  .rnb .sns-btn{position: fixed; left: 15px; bottom: 80px; display: none;}
  .rnb .store-btn{position: fixed; left: 15px; bottom: 30px; display: none;}
  .m_menu .h-line{width: 26px;}
}