@charset "utf-8";

@keyframes happy_ani {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  100% {

    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes happy_ani2 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* header */
header {
  position: fixed;
  z-index: 999;
  background-color: #fff;
  top: 0;
  left: 0;
  width: 100%;
  height: 95px;
  line-height: 80px;
  border-top: solid 15px #600624;
  text-align: center;
  /* opacity: 50%; */
}

.header_inner {}

.header_center {}

.header_center h1 {
  position: absolute;
  background: url(../img/HaagenDazs.png) center/cover, no-repeat;
  width: 110px;
  height: 50px;
  left: 10%;
  top: 15px;
  filter: drop-shadow(1px 1px 1px #555)
}

.header_center h1 a {
  display: block;
  width: 100%;
  height: 100%;
}

.nav_full {}

.nav_wrap {
  z-index: 30;
  position: fixed;
  top: 0px;
  right: -80.555%;
  background-color: #ffffff;
  width: 80.555%;
  height: 100%;
}

/* active -s*/

.nav_wrap_active {
  right: 0;
  top: 15px;
}

.body_active {
  position: absolute;
  right: 80.555%;
}

.nav_full_active {
  display: block;
}

.header_active {
  left: auto;
  right: 80.555%;
}

/* active -e*/

.nav_wrap>nav>div {
  margin-top: -15px;
  background-color: #600624;
  width: 100%;
  height: 95px;
  
}

.nav_wrap nav {}

.nav_wrap nav h2 {}

.nav_wrap .search_icon {
  position: absolute;
  right: 80%;
  top: 25px;
  width: 30px;
  height: 30px;
  background: url(../img/nav_search.png) center/cover no-repeat;
}

.nav_wrap .m_btn_close {
  position: absolute;
  right: 9.655%;
  top: 25px;
  width: 38px;
  height: 30px;
  background: url(../img/nav_arrow.png) center/contain no-repeat;

}

.nav_wrap ul {
  margin: 80px 0px 0 10.344%;
  width: 242px;
}


.nav_wrap ul>li {
  line-height: 50px;
  height: 50px;
  text-align: left;
  font-size: 2.0rem;
  margin-bottom: 20px;
  text-indent: 6px;
}

.nav_wrap ul>li::after {
  content: '';
  display: block;
  width: 79.332%;
  height: 1px;
  background-color: #600624;
  position: absolute;
  margin: -10px 0 0 0;

}

.nav_wrap ul>li>a {
  color: #600624;
}

.m_btn_open {
  position: absolute;
  right: 10%;
  top: 28px;
  background-color: rgba(0, 0, 0, 0);
}

.m_btn_open span {
  display: block;
  border-radius: 2px;
  margin-bottom: 8px;
  background-color: #600624;
  height: 4px;
  width: 32px;
}


/* main */
main {
  background-color: #EFEFEF;
  margin-top: 95px;
  overflow: hidden;
}

section {
  margin-bottom: 200px;
}

/* happy */

.happy {
  background: url(../img/happy_bg.jpg) 48%/cover no-repeat;
  width: 100%;
  height: 744px;
  animation: happy_ani2 1s ease-in-out forwards;
}

.happy_inner {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  padding-top: 264px;
  animation: happy_ani2 1s ease-in forwards;
}

.happy_content_center {
  animation: happy_ani 1s ease-in forwards;
}

.happy_textbox {
  margin: 0 auto;
  text-align: center;
  color: #fff;

}

.happy_textbox h2 {
  font-size: 4rem;
}

.happy_textbox>p {
  margin: 25px 0 40px;
  font-size: 2rem;
  line-height: 1.75;

}

.happy_content_center>a {
  display: block;
  width: 117px;
  height: 42px;
  background: #600624 url(../img/happy_arrow.png) center/56px no-repeat;
  margin: 0 auto;
  border-radius: 21px;
}


/* about */
.about {}

.about_inner {}

.about_inner h2 {
  font-size: 3.6rem;
  margin: 0 10% 40px;
  color: #600624;
}

.about_content {}

.about_image {}

.about_image .about_img1 {
  background: url(../img/about_img1.png) center/cover no-repeat;
  width: 100%;
  height: 587px;
  padding-top: 165px;
}

.about_img1>div {
  position: relative;

}

.about_slider_wrap {}

.about_slider {}

.about_slider>div {}

.about_content_text {
  background: rgb(255, 255, 255, 0.8);
  width: 80%;
  height: 290px;
  margin: 0 auto;
  border-radius: 30px;
  padding-top: 42px;

}



.about_content_text_center {
  width: 79.2%;
  margin: 0 auto;
}

.about_content_text_center>h3 {
  font-size: 3.6rem;
  margin-bottom: 16px;
  color: #600624;
}

.about_content_text_center>p {
  font-size: 1.6rem;
  line-height: 1.625;
  margin-bottom: 30px;
}

.about_content_text_center>p>span {
  display: none;
}

.about_content_text_center>a {
  display: block;
  color: #fff;
  width: 127px;
  height: 47px;
  line-height: 47px;
  background: #5b2b2b;
  border-radius: 24px;
  font-size: 1.8rem;
  text-align: center;
  letter-spacing: 0;
}

.about_image .about_img2 {
  display: none;
}

.about_image .about_img3 {
  display: none;
}

.about_image .about_img4 {
  display: none;
}

.about .swiper-pagination-bullets {
  width: 100px;
  left: 50%;
  transform: translate(-50px, -50px);
}

.about .swiper-pagination-bullet {
  background: #d9bbbb;
  opacity: 1;
}

.about .swiper-pagination-bullet-active {
  background: #e61d60;
}

.about_slider_wrap {
  height: 400px;
}








/* flavor */

.flavor {
  width: 100%;
  background-color: #600624;
}

.flavor_inner {
  padding: 100px 10%;
}

.flavor_inner>h2 {
  font-size: 4.8rem;
  color: #e7a7a8;
  margin-bottom: 50px;
}

.flavor_inner .flavor_slider2>div {
  background-color: #fefcf8;
  width: 100%;
  margin-bottom: 40px;
  border-radius: 300px;
  text-align: center;
  padding: 35px 13.3%;

}

.flavor_inner .flavor_slider_wrap2 {}

.flavor_inner .flavor_slider2 {
  font-size: 2.4rem;
}

.flavor_slider2>div {
  /* display: none; */
}



.flavor_inner .flavor_slider2>div>div {
  height: 261px;
  margin-bottom: 20px;
}

.flavor_inner .flavor_slide_img1 {
  background: url(../img/flavor_img1.png) center/contain no-repeat;
  height: 261px;
}

.flavor_inner .flavor_slide_img2 {
  background: url(../img/flavor_img2.png) center/contain no-repeat;
  height: 261px;
}

.flavor_inner .flavor_slide_img3 {
  background: url(../img/flavor_img3.png) center/contain no-repeat;
  height: 261px;
}

.flavor_inner .flavor_slider2 strong {
  display: block;
  line-height: 1.333;
  height: 64px;
  margin-bottom: 20px;
  color: #543c41;
}

.flavor_inner .flavor_slider2>div:nth-of-type(2) strong {
  line-height: 1.333;
}

.flavor_inner .flavor_slider2 p {
  margin-bottom: 20px;
}

.flavor_inner .flavor_slider2 a {
  display: block;
  width: 98px;
  height: 40px;
  background: url(../img/happy_arrow.png) center/47px no-repeat #600624;
  border-radius: 20px;
  margin: 0 auto;
}

.flavor_content_text {
  text-align: center;
  color: #F2E8EB;
}

.flavor_content_text>h3 {
  font-size: 2.4rem;
  margin-bottom: 20px;
}

.flavor_content_text>div {}

.flavor_content_text .flavor_slider_wrap1 {}

.flavor_content_text .flavor_slider1 {}

.flavor_content_text .flavor_slider1>div {

  font-size: 1.6rem;

}

.flavor_content_text .flavor_slider1>div {}

.flavor_content_text .flavor_slider1>div>strong {
  display: none;
}

.flavor_content_text .flavor_slider1>div>p {
  margin-bottom: 15px;
  line-height: 1.375;
}

.flavor_content_text .flavor_slider1>div>p:last-of-type {
  margin-bottom: 40px;
}

.flavor_content_text .flavor_slider1>div>a {
  display: none;
}

.flavor .swiper-pagination-bullets {
  width: 100px;
  left: 50%;
  bottom: 0px;
  margin-left: -50px;
}

.flavor .swiper-pagination-bullet {
  background: #FAF2DE;
  opacity: 1;
}

.flavor .swiper-pagination-bullet-active {
  background: #DC999D;
}


















/* spoon */
.spoon {
  background: url(../img/spoon_bg.webp) center/cover no-repeat;
  width: 100%;
  height: 696px;
}

.spoon_inner {
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  padding-top: 172px;

}

.spoon_inner>div {
  background-color: rgba(255, 255, 255, 0.9);
  width: 86%;
  height: 353px;
  margin: 0 auto;
  padding-top: 58px;
  border-radius: 30px;
}

.spoon_content_text {
  position: relative;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  height: 236px;
  color: #600624;
}

.spoon_content_text>h2 {
  font-size: 3.2rem;
  margin: 0 auto 20px;
}

.spoon_content_text>div {
  width: 62px;
  height: 2px;
  background-color: #600624;
  margin: 0 auto 20px;
}

.spoon_content_text>p {

  line-height: 1.375;
  font-size: 1.6rem;
  color: #000;
  margin-bottom: 40px;
}

.spoon_content_text>a {
  display: block;
  bottom: 0px;
  left: 50%;
  margin: 0 auto;
  width: 208px;
  height: 48px;
  background-color: #600624;
  color: #F2E8EB;
  font-size: 2.0rem;
  line-height: 48px;
  text-align: center;
  border-radius: 24px;
}











/* product */

.product {
  width: 100%;
  background: #FFF6EC;
  padding: 100px 0;
}

.product_inner {}

.product_content_center {
  width: 100%;
  margin: 0 auto;
}

.product_content_center>h2 {
  font-size: 3.6rem;
  color: #600624;
  margin: 0 10% 40px;
}

.product_content_arrange {}

.product_content_arrange1 {}

.product_content_arrange2 {}

.product_card {
  position: relative;
  background-color: #fff;
  width: 80%;
  height: 432px;
  border-radius: 24px;
  margin: 0 auto 35px;

}

.product_card>a {
  display: block;
  padding-top: 40px;
  width: 100%;
  height: 100%;

}

.product_card>a>div:nth-of-type(1) {
  position: absolute;
  width: 80%;
  height: 158px;
  font-size: 2rem;
  left: 10%;
  transition: all 0.15s ease-in-out;
}

.product_card>a>div:nth-of-type(2) {
  transition: all 0.15s ease-in-out;
}

.product_card>a>div>b {
  transition: all 0.15s ease-in-out;
}

.product_card>a span {
  transition: all 0.15s ease-in-out;
}

.product_brown>a>div:nth-of-type(1) {
  color: #c17c5e;
}

.product_pink>a>div:nth-of-type(1) {
  color: #f88989;
}

.product_orange>a>div:nth-of-type(1) {
  color: #f88989;
}

.product_purple>a>div:nth-of-type(1) {
  color: #856DAA;
}

.product_card strong {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-family: 'NanumHumanTTFBold';
  z-index: 1;
}

.product_card p {
  display: block;
  font-weight: 700;
  font-family: 'NanumHumanTTFBold';
  z-index: 1;
}

.product_card b {
  z-index: 1;
}

.product_brown b {
  display: block;
  position: absolute;
  width: 74px;
  height: 74px;
  right: 0;
  bottom: 0;
  background: #c17c5e url(../img/product_arrow.png) center/38px no-repeat;
  border-radius: 50%;

}

.product_pink b {
  display: block;
  position: absolute;
  width: 74px;
  height: 74px;
  right: 0;
  bottom: 0;
  background: #f88989 url(../img/product_arrow.png) center/38px no-repeat;
  border-radius: 50%;

}

.product_orange b {
  display: block;
  position: absolute;
  width: 74px;
  height: 74px;
  right: 0;
  bottom: 0;
  background: #FC977C url(../img/product_arrow.png) center/38px no-repeat;
  border-radius: 50%;
}

.product_purple b {
  display: block;
  position: absolute;
  width: 74px;
  height: 74px;
  right: 0;
  bottom: 0;
  background: #856DAA url(../img/product_arrow.png) center/38px no-repeat;
  border-radius: 50%;

}

.product_card span {}


.product_brown span {
  position: absolute;
  display: block;
  bottom: -50px;
  left: 50%;
  transform: translatex(-50%);
  height: 400px;
  width: 400px;
  z-index: 10;
}

.product_brown span>img {
  width: 100%;
  height: 100%;
}

.product_pink span {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translatex(-60%);
  height: 235px;
  z-index: 10;
  display: block;
  width: 235px;
}

.product_pink span>img {
  width: 100%;
  height: 100%;
}

.product_orange span {
  position: absolute;
  display: block;
  bottom: 0px;
  left: 50%;
  transform: translatex(-60%);
  height: 290px;
  width: 290px;
  z-index: 10;
}

.product_orange span>img {
  width: 100%;
  height: 100%;
}

.product_purple span {
  position: absolute;
  display: block;
  bottom: 20px;
  left: 50%;
  transform: translatex(-55%);
  height: 270px;
  width: 250px;
  z-index: 10;
}

.product_purple span>img {
  width: 100%;
  height: 100%;
}

.product_brown>a>div:nth-of-type(2) {
  position: absolute;
  bottom: 0;
  background: #c17c5e;
  width: 100%;
  height: 111px;
  border-radius: 0 0 24px 24px;
}

.product_pink>a>div:nth-of-type(2) {
  position: absolute;
  bottom: 0;
  background: #f88989;
  width: 100%;
  height: 111px;
  border-radius: 0 0 24px 24px;
}

.product_orange>a>div:nth-of-type(2) {
  position: absolute;
  bottom: 0;
  background: #FC977C;
  width: 100%;
  height: 111px;
  border-radius: 0 0 24px 24px;
}

.product_purple>a>div:nth-of-type(2) {
  position: absolute;
  bottom: 0;
  background: #A690C7;
  width: 100%;
  height: 111px;
  border-radius: 0 0 24px 24px;
}

/* product hover -s */
.product_card:hover>a>div:nth-of-type(1) {
  color: white;
  z-index: 10;
}

.product_card:hover>a>div:nth-of-type(2) {

  height: 432px;
  border-radius: 24px;
  z-index: 0;
}

.product_brown:hover>a>div>b {
  background: #fff url(../img/product_arrow_brown.png) center/38px no-repeat;
}

.product_pink:hover>a>div>b {
  background: #fff url(../img/product_arrow_pink.png) center/38px no-repeat;
}

.product_orange:hover>a>div>b {
  background: #fff url(../img/product_arrow_orange.png) center/38px no-repeat;
}

.product_purple:hover>a>div>b {
  background: #fff url(../img/product_arrow_purple.png) center/38px no-repeat;
}

.product_card:hover>a span {
  transition: all 0.15s ease-in-out;
}

/* product hover -e */




/* ingredient */

.ingredient {
  position: relative;
  z-index: 0;
}

.ingredient_inner {
  width: 80%;
  margin: 0 auto;
}

.line1 {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  top: -200px;
  width: 62.777%;
  height: 2283px;
  z-index: -1;
  border-left: #d9bbbb dashed 2px;
  border-right: #d9bbbb dashed 2px;

}

.ingredient_content_center>div {}

.ingredient_content_center>h2 {
  font-size: 3.6rem;
  color: #600624;
  margin-bottom: 40px;

}


.ingredient_card {
  width: 91.666%;
  height: 400px;
  margin-bottom: 70px;
  background: #fff;
  border-radius: 40px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}

.ingredient_card:nth-of-type(2n+1) {
  margin-left: auto;
  text-align: right;
}

.ingredient_card>div:nth-of-type(2) {
  margin: 18px 7.58% 0;
  width: 84.8%;
  height: 134px;
}

.ingredient_card>div:nth-of-type(1) {
  width: 100%;
  height: 230px;
  border-radius: 40px 40px 0 0;
}

.ingredient_card .ingredient_img_vanilla {
  background: url(../img/ingredient_img_vanilla.png) center/cover no-repeat;
}

.ingredient_card .ingredient_img_strawberry {
  background: url(../img/ingredient_img_strawberry.png) center/cover no-repeat;
}

.ingredient_card .ingredient_img_chocolate {
  background: url(../img/ingredient_img_chocolate.png) center/cover no-repeat;
}

.ingredient_card .ingredient_img_caramel {
  background: url(../img/ingredient_img_caramel.png) center/cover no-repeat;
}

.ingredient_card>div {}

.ingredient_card>div>strong {
  display: block;
  font-size: 1.8rem;
  margin-bottom: 6px;

}

.ingredient_card>div>p {
  font-size: 1.6rem;
  color: #903f56;
  line-height: 1.375;
}

.ingredient_card>div>p>span {
  display: none;
}


/* membership */
.membership {
  position: relative;
  background: url(../img/membership_bg.png) 23%/cover no-repeat;
  width: 100%;
  height: 691px;
  overflow: hidden;

}


.membership>div {
  background-color: rgba(63, 0, 0, 0.35);
  width: 100%;
  height: 100%;
  padding: 150px 0 0;
}

.membership_inner>h2 {}


.membership_inner .membership_slider_wrap>div {}

.membership_inner .membership_slider {
  height: 500px;

}

.membership_slider>div {

  overflow: hidden;
}

.membership_inner .membership_slider>div>div {
  margin: 0 auto;
  background: #fff;
  padding-top: 60px;
  width: 80%;
  height: 391px;
  border-radius: 40px;

}

.membership_slider .membership_content_text {
  display: block;
  text-align: center;
  width: 280px;
  margin: 0 auto;
}

.membership_slider .membership_content_text>h3 {
  font-size: 3.6rem;
  line-height: 1.2;
  margin-bottom: 27px;
  color: #903F56;
}

.membership_slider .membership_content_text>p {
  font-size: 1.6rem;
  color: #903F56;
  margin-bottom: 27px;
}

.membership_slider .membership_content_text>div {
  width: 192px;
  height: 2px;
  background: #903F56;
  margin: 0 auto 75px;
}

.membership_slider .membership_content_text>a {
  display: block;
  width: 90px;
  height: 40px;
  border-radius: 20px;
  background: #903F56 url(../img/happy_arrow.png) center/39px no-repeat;
  margin-left: 10px;
}

.membership_slider>div>span {}

.membership_slider>div>span>img {
  position: absolute;
  width: 250px;
  left: 50%;
  transform: translatex(-10%);
  top: 233px;

}

.membership .membership-pagination {
  position: absolute;
  width: 48px;
  left: 17.777%;
  top: 421px;

}

.membership .swiper-pagination-bullet {
  opacity: 1;
  background-color: #ffe8e8;
}

.membership .swiper-pagination-bullet-active {
  background-color: #F9837B;
}















/* footer */

.footer {
  width: 100%;

}

.footer_inner {}

.footer_top {
  padding: 40px 0;
  background-color: #600624;

}

.footer_center {
  margin: 0 auto;
  width: 80%;

}

.footer_center>div {
  width: 87.5%;
  margin: 0 auto;

}

.footer_center>div>span {
  display: block;
  margin: 0 auto 15px;
  width: 110px;
  height: 50px;

}

.footer_center>div>span>img {
  width: 100%;
  height: 100%;
}

.footer_center .footer_menu {
  display: none;
}

.footer_center>.footer_menu>li {}

.footer_center>.footer_menu>li>a {}

.footer_center>div>.footer_sns {

  width: 127px;
  margin: 0 auto 15px;
  display: flex;
  gap: 12px;

}

.footer_center>div>.footer_sns>li {}

.footer_center>div>.footer_sns>li>a {
  display: block;
  height: 30px;

}

.footer_center>div>.footer_sns>li:nth-of-type(1)>a {
  background: url(../img/footer_youtube.png) center/cover no-repeat;
  width: 43px;
}

.footer_center>div>.footer_sns>li:nth-of-type(2)>a {
  background: url(../img/footer_instagram.png) center/cover no-repeat;
  width: 30px;
}

.footer_center>div>.footer_sns>li:nth-of-type(3)>a {
  background: url(../img/footer_facebook.png) center/cover no-repeat;
  width: 30px;
}

.footer_company {
  color: #DEB3C1;
  margin-bottom: 15px;
  font-size: 1.6rem;


}

.footer_company>p {
  text-align: center;
  margin-bottom: 7px;
}

.footer_policy {}

.footer_policy div {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 7px;
}

.footer_policy p {
  color: #DEB3C1;
  font-size: 1.6rem;
  text-align: center;
}

.footer_policy p a {
  color: #DEB3C1;
}

.footer_bottom {
  background: #20040D;
  width: 100%;
  height: 66px;
}

.footer_bottom>p {
  width: 80%;
  margin: 0 auto;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.375;
  text-align: center;
  height: auto;
  padding-top: 10px;
  letter-spacing: 0;
}