@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
/* @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"); */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 0;
  vertical-align: baseline;
  font: inherit;
  font-size: 100%;
  background: transparent;
}

/* HTML5 display-role reset for older browsers */
main,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
  content: none;
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}
table caption {
  display: none;
}

a {
  text-decoration: none;
  cursor: pointer;
}

button {
  margin: 0;
  padding: 0;
  border: 0 none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
}

em,
address {
  font-style: normal;
}

html { font-size:3.33vmin; }

/* Mobile First */
.choco-wrap img { display:block; width:100%; }
.choco-wrap .img-pc { display:none !important }
.choco-wrap .txt-hidden { display:block; position:absolute; left:-9999em; font-size:0; text-indent:-9999em; overflow:hidden; }
.choco-wrap section,
.choco-wrap article { position:relative; }
.choco-wrap { overflow:hidden; }
.choco-wrap .header,
.choco-wrap .cont01 { background:#FFD1D8; }
.choco-wrap .cont02 { background:#FFF1F1; }
.choco-wrap header [class^='btn-'] { display:block; position:absolute; top:0; height:100%; text-indent:-9999em; overflow:hidden; }
.choco-wrap header .btn-gate { left:0; width:25%; }
.choco-wrap header .btn-choco { right:0; width:35%; }
.choco-wrap .vod-wrap { position:absolute; top:55.3%; left:7.7%; width:84.6%; padding-top:46.7%; border-radius:12px; overflow:hidden; }
.choco-wrap .vod-wrap video,
.choco-wrap .vod-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

.choco-wrap .swiper { height:auto; }
.choco-wrap .cont07 { padding:17.8% 5.5%; }
.choco-wrap .cont07 .swiper { padding-bottom:10%; }
.choco-wrap .cont07 .swiper-pagination span { width:2.5%; height:auto; padding-top:2.5%; }
.choco-wrap .cont07 .swiper-pagination span.swiper-pagination-bullet-active { background-color:#FF8296; }
.choco-wrap .cont11 { padding:0 11% 11%; background:#47260F; }
.choco-wrap .cont11 .reviewSwiper { padding-top:14.25%; }
.choco-wrap .cont12 .swiper-wrapper { transition-timing-function: linear; }

.choco-wrap .floating { position:fixed; bottom:0; left:0; width:100%; padding:1.7rem; border-radius:1rem 1rem 0 0; background:#EBEBEB; z-index:3; overflow:hidden; }
.choco-wrap .floating strong { display:block; color:#111111; font-size:1.5rem; font-weight:800; letter-spacing: -2px; white-space: nowrap}
.choco-wrap .floating p { margin-top:0.5rem; color:#777777; font-size:1rem; font-weight:800; line-height:1.6; letter-spacing:-0.1rem; white-space: nowrap;}
.choco-wrap .floating .btn-wrap { display:flex; margin-top:0.5rem; justify-content:flex-start; }
.choco-wrap .floating .btn-wrap button,
.choco-wrap .floating .btn-wrap a { display:block; }
.choco-wrap .floating .btn-wrap .btn-kakao,
.choco-wrap .floating .btn-wrap .btn-share { display:block; margin-right:0.5rem; }
.choco-wrap .floating .btn-wrap .btn-choco { display:block; }
.choco-wrap .floating .btn-wrap img {vertical-align: top; height: 4rem;}
.choco-wrap .btn-top { position:fixed; width:5rem; height:5rem; bottom:11.5rem; right:1.7rem; z-index:3; }

.choco-wrap footer { padding:1.7rem 0 1.7rem 1.7rem; padding-bottom:14rem; color:#707070; background:#F5F5F5; }
.choco-wrap footer .footer-summary strong { display:block; font-size:1.5rem; font-weight:800; }
.choco-wrap footer .footer-summary strong a { color:#707070; }
.choco-wrap footer .footer-summary p { margin-top:5.2%; font-size:1rem; line-height:1.6; }
.choco-wrap footer .logo-on { display:none; }
.choco-wrap footer .footer-summary > a { display:block; margin-top:10%; width:23.5%; }
.choco-wrap footer .footer-summary button { position:relative; margin-top:0.7rem; padding-right:6%; color:#707070; font-size:1rem; line-height:2; }
.choco-wrap footer .footer-summary button::after { content:''; position:absolute; display:block; top:50%; right:0; width:9.7%; height:58.5%; background:url('../images/ico_arrow_down.svg') no-repeat; background-size:100%; transform:translateY(-50%); }
.choco-wrap footer .footer-info { height:0; overflow:hidden; }
.choco-wrap footer .footer-info ul li { font-size:1rem; line-height:2; letter-spacing:-0.03rem; }
.choco-wrap footer .footer-info ul li em { font-weight:700; }
.choco-wrap footer .footer-info ul li a { color:#FF8296; font-weight:700; }
.choco-wrap footer .footer-info .copyright { color:#EEEEEE; font-size:1rem; font-weight:700; }

.choco-wrap footer.active { color:#FFFFFF; background:#361B06; }
.choco-wrap footer.active a,
.choco-wrap footer.active button { color:#FFFFFF; }
.choco-wrap footer.active button::after { top:15%; transform:rotate(180deg); }
.choco-wrap footer.active .logo-off { display:none; }
.choco-wrap footer.active .logo-on { display:block; }
.choco-wrap footer.active .footer-info { height:auto; padding:6% 0; }

/* 초코 광고 공유 이벤트 플로팅 베너 */
.choco-wrap .floating-event { position:fixed; top:0; left:0; width:100%; height:100%; z-index:9; }
.choco-wrap .floating-event::before { content:''; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); }
.choco-wrap .hide { display:none !important; }
.choco-wrap .floating-event .event-wrap { position:fixed; top:50%; left:50%; width:90%; padding:0; transform:translate(-50%,-50%); }
.choco-wrap .floating-event [class^='btn-'] { position:absolute; text-indent:-9999em; overflow:hidden; }
.choco-wrap .floating-event .btn-event { left:0; bottom:0; width:100%; height:100%; /*height:11.4%;*/ }
.choco-wrap .floating-event .btn-close { top:2%; right:3%; width:11%; height:7.5%; }
.choco-wrap .floating-event-mo {display: block; position: fixed; bottom:16.7rem; right: 1.5rem; width: 8rem; height: 8rem;}
.choco-wrap .floating-event-mo a {display: flex; width: 100%; height: 100%;}
.choco-wrap .floating-event-mo img {width: 100%; height: 100%;}

/* 초코 광고 공유 이벤트 */
.choco-event-wrap img { display:block; width:100%; }
.choco-event-wrap .img-pc { display:none !important }
.choco-event-wrap .txt-hidden { display:block; position:absolute; left:-9999em; font-size:0; text-indent:-9999em; overflow:hidden; }
.choco-event-wrap section,
.choco-event-wrap article { position:relative; }
.choco-event-wrap { overflow:hidden; }
.choco-event-wrap .header,
.choco-event-wrap .footer { background:#FF6883; }
.choco-event-wrap .cont01 { background:#FFFFFF; }
.choco-event-wrap .cont02,
.choco-event-wrap .cont03 { background:#FF8398; }
.choco-event-wrap header [class^='btn-'],
.choco-event-wrap footer [class^='btn-'] { display:block; position:absolute; top:0; height:0; padding-top:20%; text-indent:-9999em; overflow:hidden; }
.choco-event-wrap header .btn-mirean { left:0; width:37%; }
.choco-event-wrap header .btn-choco { right:0; width:28%; }
.choco-event-wrap footer .btn-mirean  { top:82%; left:50%; width:35%; padding-top:15%; transform:translateX(-50%); }
.choco-event-wrap .cont01 [class^='vod-'] { position:absolute; left:5.59%; width:88.8%; padding-top:50%; }
.choco-event-wrap .cont01 [class^='vod-'] iframe { position:absolute; top:0; left:0; width:100%; height:100%; border-radius:2rem 2rem 0 0; overflow:hidden; }
.choco-event-wrap .cont01 .vod-01 { top:22.3%; }
.choco-event-wrap .cont01 .vod-02 { top:59.1%; }
.choco-event-wrap .cont03 .btn-join { position:absolute; top:88.5%; left:11%; width:78%; height:0; padding-top:20%; text-indent:-9999em; overflow:hidden; }

/* 초코 첫구매 프로모션 */
.event231226-wrap img { display:block; width:100%; }
.event231226-wrap .img-pc { display:none !important }
.event231226-wrap .txt-hidden { display:block; position:absolute; left:-9999em; font-size:0; text-indent:-9999em; overflow:hidden; }
.event231226-wrap section,
.event231226-wrap article { position:relative; }
.event231226-wrap { overflow:hidden; }
.event231226-wrap header [class^='btn-'],
.event231226-wrap footer [class^='btn-'] { display:block; position:absolute; top:0; height:0; padding-top:20%; text-indent:-9999em; overflow:hidden; }
.event231226-wrap header .btn-mirean { left:0; width:37%; }
.event231226-wrap header .btn-choco { right:0; width:28%; }
.event231226-wrap footer .btn-mirean  { top:82%; left:50%; width:35%; padding-top:15%; transform:translateX(-50%); }

/* pc 대응 */
@media all and (min-width: 768px) {
  html { font-size: 12px; }
  .choco-wrap .img-mobile { display:none !important; }
  .choco-wrap .img-pc { display:block !important; }
  .choco-wrap .img-pc.hide { display:none !important; }
  .choco-wrap header { background:#FFD1D8; }
  .choco-wrap header [class^='btn-'] { height:135%; z-index:1; }
  .choco-wrap header .btn-gate { width:18%; }
  .choco-wrap header .btn-choco { width:20%; }
  .choco-wrap article  { max-width:1280px; margin:0 auto; padding:0 3.3rem; }
  .choco-wrap section.cont01 { position:relative; padding:8.85rem 0 15.25rem; background:#FFD1D8; }
  .choco-wrap section.cont01::before,
  .choco-wrap section.cont01::after { content:''; display:block; position:absolute; top:0; height:100%; min-width:960px; }
  .choco-wrap section.cont01::before { left:50%; width:50%; margin-left:-960px; background:url('../images/bg_header_left.png') left 0 no-repeat; background-size:633px 100%; }
  .choco-wrap section.cont01::after { right:50%; width:50%; margin-right:-960px; background:url('../images/bg_header_right.png') right 0 no-repeat; background-size:592px 100%; }
  .choco-wrap .vod-wrap { top:43%; left:13%; width:74%; padding-top:41%; }
  .choco-wrap .cont04,
  .choco-wrap .cont05,
  .choco-wrap .cont06,
  .choco-wrap .cont07,
  .choco-wrap .cont08,
  .choco-wrap .cont09,
  .choco-wrap .cont11 { padding:6.25% 0; }
  .choco-wrap .cont03 { background:url('../images/bg_cont_03.png') no-repeat; background-size:contain; background-position:center bottom; }
  .choco-wrap .cont04 { background:url('../images/bg_cont_04.png') no-repeat; background-size:cover; }
  .choco-wrap .cont05 .flex { display:flex; margin:5% 0 8%; justify-content:space-between; }
  .choco-wrap .cont05 .flex img { width:49%; }
  .choco-wrap .cont05 article > img:last-of-type { margin-top:8%; }
  .choco-wrap .cont06 { background:#F8F3F4; }
  .choco-wrap .cont07 .swiper { padding-bottom:3.5%; }
  .choco-wrap .cont07 .swiper-pagination span { width:0.7rem; height:0.7rem; padding-top:0; }
  .choco-wrap .cont08 { background:rgba(120, 85, 255, 0.12); }
  .choco-wrap .cont09 { background:#FBECDF; }
  .choco-wrap .cont10 { position:relative; background:#FF667E; }
  .choco-wrap .cont10 article { padding:0; z-index:2; }
  .choco-wrap .cont10::before,
  .choco-wrap .cont10::after { content:''; display:block; position:absolute; bottom:-2.1rem; width:303.75rem; height:calc(100% + 25px); background-repeat:no-repeat; background-size:100%; z-index:1; }
  .choco-wrap .cont10::before { left:50%; margin-left:-303.75rem; background-image:url('../images/bg_cont10_left.png'); background-position:left 0; background-size:100%; }
  .choco-wrap .cont10::after { left:50%; background-image:url('../images/bg_cont10_right.png'); background-position:right 0; background-size:100%; }
  .choco-wrap .cont11 .reviewSwiper { padding-top:8%; }
  .choco-wrap .cont12 .swiper-slide { padding:0; }

  .choco-wrap footer,
  .choco-wrap footer.active { padding:2.5rem; padding-bottom:20rem; color:#707070; background:#F5F5F5; }
  .choco-wrap footer article { display:flex; flex-direction:row-reverse; justify-content:space-between; }
  .choco-wrap footer .footer-summary > a { position:absolute; top:0; left:2rem; width:6.8rem; margin:0; }
  .choco-wrap footer .footer-summary > a .logo-off { display:block !important; }
  .choco-wrap footer .footer-summary > a .logo-on { display:none !important; }
  .choco-wrap footer .footer-summary strong { font-size:1.7rem; }
  .choco-wrap footer .footer-summary p { font-size:1.2rem; }
  .choco-wrap footer .footer-summary button { display:none; }

  .choco-wrap footer .footer-info,
  .choco-wrap footer.active .footer-info { height:auto; padding:0; padding-top:3.5rem; }
  .choco-wrap footer .footer-info ul,
  .choco-wrap footer.active .footer-info ul { display:flex; width:60rem; max-width:100%; flex-wrap:wrap; }
  .choco-wrap footer .footer-info ul li,
  .choco-wrap footer.active .footer-info ul li { position:relative; margin-right:1.2rem; padding-right:1.2rem; color:#AAAAAA; font-size:1.2rem; }

  .choco-wrap footer .footer-info ul li::after { position:absolute; top:50%; right:0; content:''; width:0.1rem; height:1rem; background:#DDDDDD; transform:translateY(-50%); }
  .choco-wrap footer .footer-info ul li:nth-child(3)::after,
  .choco-wrap footer .footer-info ul li:nth-child(5)::after,
  .choco-wrap footer .footer-info ul li:nth-child(7)::after,
  .choco-wrap footer .footer-info ul li:last-child::after { display:none; }
  .choco-wrap footer .footer-info .copyright,
  .choco-wrap footer.active .footer-info .copyright { margin-top:1.7rem; color:#AAAAAA; font-size:1.2rem; }
  .choco-wrap .btn-top { bottom:10.6rem; right: 1.5rem;}

  .choco-wrap .floating {display:flex; align-items: center; width:95%; max-width:100rem; bottom:2.5rem; left:50%; height: 90px; padding:2.1rem 2.5rem 1.6rem 13rem; transform:translateX(-50%); border-radius:5rem; box-shadow:0px 14px 32px 0px #301E0033; }
  .choco-wrap .floating::before { content:''; display:block; position:absolute; top:2.4rem; left:4.5rem; width:7rem; height:9rem; background:url('../images/img_choco.png') no-repeat; background-size:100%; }
  .choco-wrap .floating .txt-wrap { padding-right:31rem; }
  .choco-wrap .floating strong { font-size:1.8rem; letter-spacing: -1px;}
  .choco-wrap .floating p { font-size:1.3rem; font-weight:700; line-height: 1.2;}
  .choco-wrap .floating .btn-wrap { position:absolute; top:50%; right:2.5rem; margin:0; flex-direction:row-reverse; justify-content:flex-start; transform:translateY(-50%); }
  .choco-wrap .floating .btn-wrap .btn-choco { width:17.5rem; margin:0 2rem 0 0; }
  .choco-wrap .floating .btn-wrap .btn-share { width:5rem; margin:0 0 0 0.6rem ; }
  .choco-wrap .floating .btn-wrap .btn-kakao { width:5rem; margin:0; }
  .choco-wrap .floating .btn-wrap img {height: 5rem;}

  /* 초코 광고 공유 이벤트 플로팅 베너 */
  .choco-wrap .floating-event { position:static; }
  .choco-wrap .floating-event::before { display:none; }
  .choco-wrap .floating-event .event-wrap { overflow: hidden; left:8%; top:15%; width:420px; border-radius:15px; box-shadow: 0px 0px 30px 0px #00000029; transform:none; z-index:9; }
  .choco-wrap .floating-event .btn-close { width:10.2%; }
  .choco-wrap .floating-event-mo {display: none;}
  .choco-wrap #floatingEvent02 .event-wrap { left:auto; right:8%; }

  /* 초코 광고 공유 이벤트 */
  .choco-event-wrap .img-mobile { display:none !important; }
  .choco-event-wrap .img-pc { display:block !important; }
  .choco-event-wrap article  { max-width:1280px; margin:0 auto; }

  .choco-event-wrap header [class^='btn-'] { top:2%; padding-top:5%; }
  .choco-event-wrap header .btn-mirean { left:0.5%; width:9.5%; }
  .choco-event-wrap header .btn-choco { right:2.5%; width:9%; }
  .choco-event-wrap footer .btn-mirean  { top:72%; left:50%; width:12%; padding-top:5%; }

  .choco-event-wrap .cont01 { background-color:#FFF3F5; }
  .choco-event-wrap .cont01 [class^='vod-'] { top:34.5%; width:46.7%; padding-top:26.5%; }
  .choco-event-wrap .cont01 .vod-01 { left:1.45%; }
  .choco-event-wrap .cont01 .vod-02 { left:auto; right:1.4%; }
  .choco-event-wrap .cont03 .btn-join { position:absolute; top:85%; left:33%; width:34%; padding-top:7.5%; text-indent:-9999em; overflow:hidden; }

  /* 초코 첫구매 프로모션 */
  .event231226-wrap .img-mobile { display:none !important; }
  .event231226-wrap .img-pc { display:block !important; }
  .event231226-wrap article  { max-width:1280px; margin:0 auto; z-index:1; }
  .event231226-wrap::before,
  .event231226-wrap::after,
  .event231226-wrap .cont02::before,
  .event231226-wrap .cont02::after { content:''; display:block; width:2rem; height:2rem; position:absolute; background:rgba(255,255,255,0.5); border-radius:50%; overflow:hidden; z-index:1; }
  .event231226-wrap::before { top:70%; right:10%; }
  .event231226-wrap::after { top:60%; left:20%; }
  .event231226-wrap .cont02::before { top:50%; left:15%; }
  .event231226-wrap .cont02::after { top:20%; right:15%; }

  .event231226-wrap .header { position:relative; background-color:#19385B; }
  .event231226-wrap .header::after { content:''; position:absolute; top:0; left:50%; width:2000px; height:100%; background:#19385B url('../images/event/231226/bg_header.svg') no-repeat; background-size:auto 100%; background-position:center top; transform:translateX(-50%); }
  .event231226-wrap .header [class^='btn-'] { top:2%; padding-top:6.5%; }
  .event231226-wrap .header .btn-mirean { left:0.5%; width:16.5%; }
  .event231226-wrap .header .btn-choco { right:0.5%; width:10%; }
  .event231226-wrap .footer { background:#003021; }
  .event231226-wrap .footer .btn-mirean  { top:72%; left:50%; width:12%; padding-top:5%; }
  .event231226-wrap .cont01 { background-color:#006847; }
  .event231226-wrap .cont02 { background-color:#F6EAC9; }
  .event231226-wrap .cont01 article::before,
  .event231226-wrap .cont02 article::before,
  .event231226-wrap .cont02 article::after { content:''; display:block; position:absolute; left:50%; transform:translateX(-50%); background-repeat:no-repeat; background-size:100% 100%; }
  .event231226-wrap .cont02 article::before { top:-34rem; width:40rem; height:54rem; margin-left:54rem; background-image:url('../images/event/231226/pink01.svg'); }
  .event231226-wrap .cont02 article::after { bottom:0; width:35rem; height:40rem; margin-left:-60rem; background-image:url('../images/event/231226/pink02.svg'); }
}

@media all and (min-width: 1024px) {
  .choco-wrap header .btn-gate { width:15%; }
  .choco-wrap header .btn-choco { width:17%; }
}

@media all and (min-width: 1280px) {
  .event231226-wrap .header::before { content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:100%; background:#19385B; }
  .event231226-wrap .cont01::before { content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:100%; background:#006847; }
}

@media all and (min-width: 1440px) {
	.choco-wrap .btn-top { bottom:2.7rem; }
}
/* pc - 고해상도 대응 */
@media all and (min-width: 1920px) {
  .choco-wrap section.cont01::before { left:0; margin:0; }
  .choco-wrap section.cont01::after { right:0; margin:0; }
}

/* 2024.03.26 띠배너 추가 */
.banner-wrap {position: fixed; left: 0; top: 0; z-index:100; width: 100%; height: 100px; background: #FFD1D8}
.banner-wrap + .choco-wrap {padding-top: 100px;}
.banner-wrap .img-mobile { display:block !important; }
.banner-wrap .img-pc { display:none !important; }
.banner-wrap .banner-swiper {height: 100%;}
.banner-wrap .banner-swiper .swiper-slide a {display: flex; justify-content: center; width: 100%; height: 100%; overflow: hidden;}
.banner-wrap .banner-swiper .swiper-slide img {height: 100%;}
.banner-wrap .banner-swiper .swiper-button-prev {width: 24px; height: 24px; top: 50%; left: max(18px, calc(50% - 626px)); transform: translateY(-50%); margin: 0;}
.banner-wrap .banner-swiper .swiper-button-next {width: 24px; height: 24px; top: 50%; right: max(18px, calc(50% - 626px)); transform: translateY(-50%); margin: 0;}
.banner-wrap .banner-swiper .swiper-button-prev::after,
.banner-wrap .banner-swiper .swiper-button-next::after {content:''; position: absolute; top: 0; width: 100%; height: 100%; background: url('../images/banner-arrow.png') no-repeat center center / 100% auto;}
.banner-wrap .banner-swiper .swiper-button-next::after {transform: rotate(180deg);}

@media all and (min-width: 768px) {
  .banner-wrap .img-mobile { display:none !important; }
  .banner-wrap .img-pc { display:block !important; }
}
@media all and (max-width: 1280px) {
  .banner-wrap {position: fixed; left: 0; top: 0; z-index:100; width: 100%; height: calc((100vw / 1280) * 100);}
  .banner-wrap + .choco-wrap {padding-top: calc((100vw / 1280) * 100);}
}
@media all and (max-width: 768px) {
  .banner-wrap {position: fixed; left: 0; top: 0; z-index:100; width: 100%; height: calc((100vw / 360) * 60);}
  .banner-wrap + .choco-wrap {padding-top: calc((100vw / 360) * 60);}
}