@charset "utf-8";
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
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 {
	border-collapse: collapse;
	border-spacing: 0;
}

* { margin: 0; padding: 0; box-sizing: border-box; list-style: none; }
html { margin: 0; padding: 0; }
html.show-layer { overflow: hidden; }
body { margin: 0; padding: 0; }
a { color: #000; text-decoration: none; }
hr { margin: 0; border: 0; }
img { vertical-align: top; }
img[usemap] { border: none; height: auto; max-width: 100%; width: auto; -webkit-tap-highlight-color : transparent; }
input { outline: none; font-family: 'Noto Sans KR'; font-size: 15px; background: #fff; }
select { border: 0; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: 'Noto Sans KR'; background: #fff; cursor: pointer; }
textarea { font-family: 'Noto Sans KR'; background: #fff; resize: none; }
button { background: none; margin: 0; padding: 0; border: 0; }
pre { font-family: 'Noto Sans KR'; }
.inner-1920 { width: 100%; max-width: 1920px; margin-left: auto !important; margin-right: auto !important; }
.inner-wrap { width: 1404px !important; margin-left: auto !important; margin-right: auto !important; }
#layer-bg { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 50; background: rgba(0,0,0,0.3); display: none; }

#wrap.pc { width: 100%; min-width: 1200px; background: #FFF7C9; position: relative; overflow: hidden; min-height: 100vh; padding: 60px 0 100px; }
#wrap.pc img { max-width: 100%; }
#wrap.pc::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 506px; background: #062F87; }
#wrap.pc .kakao { width: 1117.5px; margin: 0 auto; position: relative; z-index: 2; }
#wrap.pc .kakao > div { display: flex; flex-direction: column; align-items: center; margin-top: 70px; }
#wrap.pc .kakao > div > p:nth-of-type(1) { padding-bottom: 20px; width: 340.5px; }
#wrap.pc .kakao > div > p:nth-of-type(2) { margin: 0 0 35px; width: 790px; }
#wrap.pc .kakao > div > div { width: 817.5px; }
#wrap.pc .kakao > div > dl { width: 790px; font-family: 'HD'; counter-reset: my-counter; }
#wrap.pc .kakao > div > dl~dl { margin-top: 25px; }
#wrap.pc .kakao > div > dl > dt { color: #062F87; font-size: 20px; font-weight: 700; margin-bottom: 15px; display: flex; gap: 8px; align-items: center; }
#wrap.pc .kakao > div > dl > dt:before { content: ''; width: 8px; height: 8px; background: #062F87; border-radius: 100px; flex: 0 0 auto; margin-top: -4px; }
#wrap.pc .kakao > div > dl > dd { font-size: 16px; color: #000; line-height: 1.2; display: flex; gap: 5px; }
#wrap.pc .kakao > div > dl > dd:before { counter-increment: my-counter; content: counter(my-counter)"."; }

#wrap.pc .kakao > div .coupon { width: 816px; height: 161px; background: url('../img/frame-2.webp') center/100% no-repeat; padding: 13px 0; }
#wrap.pc .kakao > div .coupon > p { height: 64px; display: flex; align-items: center; justify-content: center; font-size: 17px; color: #343434; font-family: 'HD'; }
#wrap.pc .kakao > div .coupon > p:nth-of-type(2) { cursor: pointer; width: 183px; margin: 0 auto; }

#layer.pc { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 10; background: rgba(0,0,0,0.9); display: none; }
#layer.pc.active { display: flex; justify-content: center; align-items: center; }
#layer.pc > div { width: 1070px; position: relative; }
#layer.pc > div .close { position: absolute; top: -90px; right: 0; cursor: pointer; }
#layer.pc > div video { width: 100%; border-radius: 10px; }


#wrap.mo { width: 100%; background: #FFF7C9; position: relative; overflow: hidden; min-height: 100vh; padding: 0 0 12.5000vw; }
#wrap.mo img { width: 100%; }
#wrap.mo::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 81.5625vw; background: #062F87; }
#wrap.mo .kakao { width: 100%; position: relative; z-index: 2; }
#wrap.mo .kakao > p { position: relative; }
#wrap.mo .kakao > p > span { position: absolute; right: 6.2500vw; top: 51.5625vw; display: block; width: 26.5625vw; height: 26.5625vw; border-radius: 31.2500vw; background: rgba(0, 0, 0, 0.01); cursor: pointer; z-index: 10; }
#wrap.mo .kakao > div { display: flex; flex-direction: column; align-items: center; margin: 9.3750vw auto 0; width: 87.5000vw; }
#wrap.mo .kakao > div > p:nth-of-type(1) { padding-bottom: 7.8125vw; }
#wrap.mo .kakao > div > p:nth-of-type(2) { margin: 3.1250vw 0 7.8125vw; }
#wrap.mo .kakao > div > dl { width: 87.5000vw; font-family: 'HD'; counter-reset: my-counter; }
#wrap.mo .kakao > div > dl~dl { margin-top: 6.2500vw; }
#wrap.mo .kakao > div > dl > dt { color: #062F87; font-size: 4.6875vw; font-weight: 700; margin-bottom: 3.7500vw; display: flex; gap: 1.8750vw; align-items: center; }
#wrap.mo .kakao > div > dl > dt:before { content: ''; width: 1.8750vw; height: 1.8750vw; background: #062F87; border-radius: 31.2500vw; flex: 0 0 auto; margin-top: -1.2500vw; }
#wrap.mo .kakao > div > dl > dd { font-size: 3.1250vw; color: #000; line-height: 1.4; display: flex; gap: 0.9375vw; }
#wrap.mo .kakao > div > dl > dd:before { counter-increment: my-counter; content: counter(my-counter)"."; }
#wrap.mo .kakao > div > p:last-of-type { width: 37.5000vw; margin-top: 8.4375vw; }
#wrap.mo .kakao > div > div { box-shadow: 0 0.5141vw 3.0847vw 0 rgba(0, 0, 0, 0.20); }

#wrap.mo .kakao > div:has(.coupon) { width: 100%; }
#wrap.mo .kakao > div:has(.coupon) > p { width: 87.5000vw; }
#wrap.mo .kakao > div:has(.coupon) > p:last-of-type { width: 37.5000vw; }
#wrap.mo .kakao > div .coupon { width: 93.7500vw; height: 35.6250vw; margin: 0 auto; padding: 3.1250vw 0; background: url('../img/m_frame-2.webp') center/100% no-repeat; box-shadow: none; }
#wrap.mo .kakao > div .coupon > p { height: 14.3750vw; display: flex; align-items: center; justify-content: center; font-size: 3.8906vw; color: #343434; font-family: 'HD'; }
#wrap.mo .kakao > div .coupon > p:nth-of-type(2) { cursor: pointer; }
#wrap.mo .kakao > div .coupon > p:nth-of-type(2) > img { width: 41.5625vw; }

#layer.mo { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 10; background: rgba(0,0,0,0.9); display: none; padding-top: 43.7500vw; }
#layer.mo.active { display: flex; justify-content: center; align-items: flex-start; }
#layer.mo > div { width: 90.6250vw; position: relative; }
#layer.mo > div .close { position: absolute; top: -13.7500vw; right: 0; cursor: pointer; width: 7.5000vw; }
#layer.mo > div video { width: 100%; border-radius: 0.9375vw; }