@charset "UTF-8";
/*!
* Neoreve CSS Reset
* --------------------------------------------------
* Description : Global CSS reset & base normalization
* Last Updated: 2025-11-25
* Version : 1.0.1
* Author : Neoreve
* --------------------------------------------------
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li, a,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: middle; background: transparent; box-sizing: border-box; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none; max-height: 99999px; }
html { font-size: calc(0.0066666667 * 100vw); }
body { color: #000; font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; font-style: normal; font-weight: 400; font-size: 1rem; line-height: 1; word-break: keep-all; }
*:before, *:after { -webkit-transition: inherit; -moz-transition: inherit; -o-transition: inherit; transition: inherit; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, a { display: block; }
span, strong, em { vertical-align: baseline; color: inherit; font: inherit; letter-spacing: inherit; }
em, address { font-style: normal; }
mark { color: inherit; }
img { width: 100%; display: inline-block; vertical-align: middle; -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop')"; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true",sizingMethod="crop"); }
a { color: inherit; vertical-align: baseline; text-decoration: none; background: transparent; }
/* 키보드 포커스만 표시 */
:is(a, button, input, select, textarea, label):focus-visible { outline: 1px solid #111; }
:is(a, button, input, select, textarea, label):focus:not(:focus-visible) { outline: none; }
button { color: inherit; font: inherit; letter-spacing: inherit; padding: 0; border: none; border: 0; outline: none; outline: 0; background: none; -webkit-appearance: none; appearance: none; border-radius: 0; cursor: pointer; }
button:disabled { cursor: default; }
input:where([type=text], [type=password], [type=tel], [type=email], [type=number]), textarea { padding: 0; border: 0; border-radius: 0; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: inherit; font-family: inherit; font-weight: inherit; font-size: inherit; letter-spacing: inherit; }
input:where([type=text], [type=password], [type=tel], [type=email], [type=number], textarea):where(:hover) { outline: 0; }
input:where([type=button], [type=submit], [type=reset], [type=image]) { cursor: pointer; }
textarea { resize: none; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
ol, ul { list-style: none; }
li { list-style: none; vertical-align: top; line-height: inherit; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset { border: 0; }
legend, caption, hr { position: absolute; left: -9999px; top: 0; visibility: hidden; overflow: hidden; line-height: 0.1%; font-size: 0.1%; width: 0.1%; height: 0.1%; }
.blind { overflow: hidden; position: absolute; clip: rect(0, 0, 0, 0); width: 1px; height: 1px; margin: -1px; }
.dis_none { display: none !important; }
.d-inline { display: inline; }
.bold { font-weight: 700; }
/*!
* --------------------------------------------------
* Description : SCSS 유틸리티 믹스인
* Author : Neoreve
* Last Updated: 2026-05-20
* Version : 1.0.0
* --------------------------------------------------
*/
@keyframes ani-swing {
0%, 100% { transform: rotate(calc(-1 * var(--swing-r))); }
50% { transform: rotate(var(--swing-r)); }
}
/* Common CSS */
html::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-thumb { background-color: #2A5EEC; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; }
html::-webkit-scrollbar-thumb:hover { background-color: #2A5EEC; }
html::-webkit-scrollbar-track { background-color: #fff; }
html:has(.popup[data-show=y][backdrop]), html:has(.popup_loading[data-show=y][backdrop]) { overflow: hidden; }
html:has(.popup[data-show=y][backdrop]) body, html:has(.popup_loading[data-show=y][backdrop]) body { height: auto !important; padding-right: var(--scrollBarWidth); }
html:has(.popup[data-show=y][backdrop]) .wrap_fixed .sticky_set, html:has(.popup_loading[data-show=y][backdrop]) .wrap_fixed .sticky_set { right: calc(var(--scrollBarWidth) + 25px); }
.wrap { position: relative; width: 100%; min-width: 1280px; }
.dis_none { display: none !important; }
.d-inline { display: inline; }
.bold { font-weight: 700; }
.col { color: #2A5EEC; }
.underline { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.video_set { position: relative; }
.video_set .btn_sound { position: absolute; right: 5px; top: 85px; z-index: 10; width: 35px; aspect-ratio: 5/5; border: none; outline: 0; border-radius: 0; }
.video_set .btn_sound::after { content: ""; position: absolute; top: 0; left: 0; z-index: 0; display: block; width: 100%; height: 100%; background: url("../images/sound_sprites@2x.png") no-repeat left center; background-size: auto 100%; pointer-events: none; }
.video_set .btn_sound.mute::after { background-position: right center; }
.bubble_set .item { position: absolute; z-index: 1; display: block; background: no-repeat center center; background-size: contain; -webkit-filter: drop-shadow(0.9px 0.9px 3.6px rgba(0, 0, 0, 0.15)); filter: drop-shadow(0.9px 0.9px 3.6px rgba(0, 0, 0, 0.15)); }
.bubble_set .item .txt { display: inline; color: #111; font-size: 16px; font-weight: 500; line-height: 145%; letter-spacing: -0.01em; }
.bubble_set .item .name { display: inline; color: #646464; font-size: 12px; font-weight: 400; line-height: 145%; white-space: nowrap; margin-left: 2px; }
.bubble_set .item.sm .txt { font-size: 15px; font-weight: 500; }
.bubble_set .item.sm .name { font-size: 10px; font-weight: 500; margin-left: 6px; }
.bubble_set .item.lg .txt { font-size: 18px; }
.bubble_set .item.lg .name { font-size: 12px; font-weight: 500; margin-left: 5px; }
.deco_set .deco { position: absolute; z-index: 1; background: no-repeat center center; background-size: contain; }
.wrap_fixed .logo_set { position: fixed; left: 30px; top: 30px; z-index: -1; opacity: 0; transition: opacity 0.3s ease, z-index 0s 0.3s ease; }
.wrap_fixed .logo_set .logo a { display: block; width: 160px; aspect-ratio: 160/60; height: auto; background-color: #fff; -webkit-mask-image: url("../images/logo@4x.png"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; transition: background-color 0.3s ease; }
.wrap_fixed .logo_set[data-logo=y], .wrap_fixed .logo_set[data-logo=wh], .wrap_fixed .logo_set[data-logo=bl] { z-index: 300; opacity: 1; transition: z-index 0s linear, opacity 0.3s ease; }
.wrap_fixed .logo_set[data-logo=wh] .logo a { background-color: #fff; }
.wrap_fixed .logo_set[data-logo=bl] .logo a { background-color: #2A5EEC; }
.wrap_fixed .sticky_set { position: fixed; right: 25px; bottom: 16px; z-index: -1; opacity: 0; transition: bottom 0.3s ease, opacity 0.3s ease, z-index 0s 0.3s linear; }
.wrap_fixed .sticky_set[data-sticky=y] { opacity: 1; z-index: 90; transition: bottom 0.3s ease, opacity 0.3s ease, z-index 0s linear; }
.wrap_fixed .sticky_set .btn_sticky { position: relative; z-index: 0; display: none; align-items: center; justify-content: flex-start; gap: 7px; width: 260px; aspect-ratio: 260/99; -webkit-filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.45)); filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.45)); padding: 27px 0 38px 49px; }
.wrap_fixed .sticky_set .btn_sticky::before { content: ""; position: absolute; inset: 0; z-index: -1; display: block; width: 100%; aspect-ratio: unset; height: auto; background-color: #FDB518; -webkit-mask-image: url("../images/sticky_bg@2x.png"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; transition: background-color 0.3s ease; height: 100%; }
.wrap_fixed .sticky_set .btn_sticky .btn_txt { color: #fff; font-size: 24px; font-weight: 700; line-height: 140%; }
.wrap_fixed .sticky_set .btn_sticky .btn_arr { display: block; width: 22px; aspect-ratio: 22/15; height: auto; background-color: #fff; -webkit-mask-image: url('data:image/svg+xml,'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; transition: background-color 0.3s ease; }
.wrap_fixed .sticky_set .btn_sticky .deco_set .deco { position: absolute; z-index: 1; }
.wrap_fixed .sticky_set .btn_sticky .deco_set .deco2 { right: -5px; bottom: 10px; display: block; width: 28px; aspect-ratio: 28/37; height: auto; background: url("../images/sticky_img02@2x.png") no-repeat center center; background-size: contain; }
.wrap_fixed .sticky_set .btn_sticky:hover::before { background: #2A5EEC; }
.wrap_fixed .sticky_set .btn_sticky.ver1 .deco_set .deco1 { left: -35px; top: -11px; display: block; width: 77px; aspect-ratio: 77/113; height: auto; background: url("../images/sticky_img01@2x.png") no-repeat center center; background-size: contain; }
.wrap_fixed .sticky_set .btn_sticky.ver2 .deco_set .deco1 { left: -31px; bottom: 10px; display: block; width: 80px; aspect-ratio: 80/102; height: auto; background: url("../images/sticky_ver2_img01@2x.png") no-repeat center center; background-size: contain; }
.wrap_fixed .sticky_set[data-ver="1"] .ver1, .wrap_fixed .sticky_set[data-ver="2"] .ver2 { display: flex; }
.section_visual { --section-height: 816; --parent-height: 100vh; height: 100vh; --parent-height: 100svh; height: 100svh; }
html.inapp .section_visual { --parent-height: calc(var(--svh, 1vh) * 100); height: calc(var(--svh, 1vh) * 100); }
.section_visual { position: relative; overflow: hidden; background: url("../images/main_bg@1.5x.jpg") no-repeat center top; background-size: cover; }
.section_visual .in { display: flex; align-items: center; max-width: 1158px; margin: 0 auto; height: 100%; padding: calc(var(--parent-height) * 30 / var(--section-height)) 0 0; }
.section_visual .tit_set { -webkit-filter: drop-shadow(0 0 70px rgba(30, 30, 30, 0.4)); filter: drop-shadow(0 0 70px rgba(30, 30, 30, 0.4)); }
.section_visual .tit_set .s_tit { color: #FFF; font-size: 30px; font-weight: 700; line-height: 140%; letter-spacing: -0.01em; }
.section_visual .tit_set .sec_tit { display: block; margin: 20px 0 54px; }
.section_visual .tit_set .sec_tit .line01 { display: flex; }
.section_visual .tit_set .sec_tit .txt01 { display: block; width: 264px; aspect-ratio: 264/112; height: auto; background: url("../images/main_title01@2x.png") no-repeat center center; background-size: contain; }
.section_visual .tit_set .sec_tit .txt02 { display: block; width: 178px; aspect-ratio: 178/112; height: auto; background: url("../images/main_title02@2x.png") no-repeat center center; background-size: contain; }
.section_visual .tit_set .sec_tit .ani { display: block; width: 92px; aspect-ratio: 92/112; }
.section_visual .tit_set .sec_tit .ani::after { content: ""; display: block; width: 100%; aspect-ratio: unset; height: auto; background: url("../images/main_title_ani@2x.png") no-repeat center center; background-size: contain; height: 100%; transform-origin: center center; }
.section_visual .tit_set .sec_tit .txt03 { display: block; width: 532px; aspect-ratio: 532/174; height: auto; background: url("../images/main_title03@2x.png") no-repeat center center; background-size: contain; }
.section_visual .tit_set .s_txt { color: #FFF; font-size: 29px; font-weight: 500; line-height: 140%; letter-spacing: -0.01em; }
.section_visual .deco_set .deco { animation: ani-swing 1.5s steps(1) infinite; }
.section_visual .deco_set .smile { --swing-r: 15deg; right: calc(50% + 638px); top: calc(50% - var(--parent-height) * 7 / var(--section-height)); width: calc(var(--parent-height) * 67 / var(--section-height)); max-width: 67px; aspect-ratio: 67/69; background-image: url("../images/main_bg_deco_smile.png"); }
.section_visual .deco_set .heart { --swing-r: 5deg; right: calc(50% - 32px); bottom: calc(50% + var(--parent-height) * 200 / var(--section-height)); width: calc(var(--parent-height) * 125 / var(--section-height)); max-width: 125px; aspect-ratio: 125/108; background-image: url("../images/main_bg_deco_heart.png"); }
.section_visual .deco_set .love { --swing-r: -4deg; left: calc(50% + 506px); bottom: calc(50% + var(--parent-height) * 97 / var(--section-height)); width: calc(var(--parent-height) * 146 / var(--section-height)); max-width: 146px; aspect-ratio: 146/162; background-image: url("../images/main_bg_deco_love.png"); }
.section_visual .deco_set .give { --swing-r: -4deg; left: calc(50% - 48px); top: calc(50% + var(--parent-height) * 108 / var(--section-height)); width: calc(var(--parent-height) * 230 / var(--section-height)); max-width: 230px; aspect-ratio: 230/235; background-image: url("../images/main_bg_deco_give.png"); }
@keyframes main_title_ani {
0% { transform: scale(0); }
70% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.section_visual .tit_set .sec_tit .ani::after { transform: scale(0); }
.section_visual[data-show=y] .tit_set .sec_tit .ani::after { animation: main_title_ani 0.5s ease-in-out forwards; }
.section01 { height: 806px; position: relative; overflow: hidden; background: #2A5EEC url("../images/sec01_bg@1.5x.jpg") no-repeat center center; background-size: auto 100%; }
.section01 .in { display: flex; align-items: center; max-width: 1158px; margin: 0 auto; height: 100%; }
.section01 .tit_set .sec_tit { display: flex; flex-direction: column; align-items: flex-start; white-space: nowrap; }
.section01 .tit_set .sec_tit em { display: flex; align-items: center; gap: 6px; color: #FFF; font-size: 80px; font-weight: 800; line-height: 140%; letter-spacing: -0.04em; }
.section01 .tit_set .sec_tit span { color: #FFF; font-size: 68px; font-weight: 600; line-height: 140%; letter-spacing: -0.04em; }
.section01 .tit_set .sec_tit .img { display: block; width: 70px; aspect-ratio: 70/71; height: auto; background: url("../images/sec01_icon@1.5x.png") no-repeat center center; background-size: contain; }
.section01 .video_frame { position: absolute; left: 50%; top: 0; z-index: 0; width: 50%; height: 100%; background: url("../images/sec01_video_frame@1.5x.png") no-repeat left center; background-size: auto 100%; padding: 87px 0 0 101px; }
.section01 .video_frame .video_set { position: relative; display: flex; align-items: center; justify-content: center; width: 292px; aspect-ratio: 292/620; background: #000; border-radius: 43px; overflow: hidden; }
.section01 .video_frame .video_set .video { display: block; width: 100%; aspect-ratio: 9/16; }
.section01 .bubble_set .item1 { z-index: 2; right: calc(50% + 98px); bottom: calc(50% + 188px); width: 330px; aspect-ratio: 330/69; background-image: url("../images/sec01_bubble01_bg@1.5x.png"); padding: 19px 0 0 19px; }
.section01 .bubble_set .item2 { right: calc(50% - 24px); bottom: calc(50% + 128px); width: 336px; aspect-ratio: 336/81; background-image: url("../images/sec01_bubble02_bg@1.5x.png"); padding: 25px 0 0 33px; }
.section01 .bubble_set .item3 { right: calc(50% + 105px); top: calc(50% + 150px); width: 338px; aspect-ratio: 338/68; background-image: url("../images/sec01_bubble03_bg@1.5x.png"); }
.section01 .bubble_set .item4 { z-index: 2; right: calc(50% + 220px); top: calc(50% + 197px); width: 343px; aspect-ratio: 343/80; background-image: url("../images/sec01_bubble04_bg@1.5x.png"); padding: 25px 0 0 22px; }
.section_bubble { position: relative; overflow: hidden; background: #fff; }
.section_bubble .in { display: flex; align-items: center; justify-content: space-between; max-width: 1120px; margin: 0 auto; }
.section_bubble .bubble_set { display: flex; flex-direction: column; align-items: flex-start; }
.section_bubble .bubble_set .item { position: static; -webkit-filter: unset; filter: unset; }
.section_bubble .bubble_set .item1 { margin-left: 45px; }
.section_bubble .bubble_set .item2 { margin: 12px 0 -10px 104px; }
.section_bubble .image { flex-shrink: 0; position: relative; display: block; width: 530px; aspect-ratio: 530/366; height: auto; background: url("../images/sec02_img@1.5x.png") no-repeat center center; background-size: contain; }
.section_bubble .image .txt { position: absolute; right: 18px; bottom: 14px; z-index: 1; color: #FCF8F4; font-size: 12px; font-weight: 400; line-height: 145%; letter-spacing: -0.01em; }
.section_bubble .bubble_set .item { --time: 0.4s; opacity: 0; transform: translateY(15px); transition-property: opacity, transform; transition-duration: var(--time); transition-timing-function: ease; will-change: opacity, transform; }
.section_bubble[data-show=y] .bubble_set .item { opacity: 1; transform: translate(0, 0); }
.section_bubble[data-show=y] .bubble_set .item1 { transition-delay: calc(var(--time) * 0); }
.section_bubble[data-show=y] .bubble_set .item2 { transition-delay: calc(var(--time) * 1); }
.section_bubble[data-show=y] .bubble_set .item3 { transition-delay: calc(var(--time) * 2); }
.section_bubble[data-show=y] .bubble_set .item4 { transition-delay: calc(var(--time) * 3); }
.section02 .in { padding: 100px 20px 134px 0; }
.section02 .tit_set .sec_tit { display: block; width: 478px; aspect-ratio: 478/210; height: auto; background: url("../images/sec02_tit@1.5x.png") no-repeat center center; background-size: contain; }
.section02 .bubble_set .item { position: static; }
.section02 .bubble_set .item1 { width: 424px; aspect-ratio: 424/66; background-image: url("../images/sec02_bubble01_bg@1.5x.png"); padding: 23px 26px 0; }
.section02 .bubble_set .item2 { width: 422px; aspect-ratio: 422/125; background-image: url("../images/sec02_bubble02_bg@1.5x.png"); padding: 23px 35px 0 35px; }
.section02 .image { background-image: url("../images/sec02_img@1.5x.png"); margin: 16px 0 0; }
.section02 .image .deco_set .deco1 { right: -32px; top: 21px; width: 97px; aspect-ratio: 97/169; background-image: url("../images/sec02_bubble_deco01@1.5x.png"); }
.section02 .image .deco_set .deco2 { left: -36px; bottom: -35px; width: 118px; aspect-ratio: 118/81; background-image: url("../images/sec02_bubble_deco02@1.5x.png"); }
.section03 { position: relative; overflow: hidden; background: #FEECC5; }
.section03 .in { padding: 100px 0; }
.section03 .tit_set { text-align: center; margin: 0 0 50px; }
.section03 .tit_set .sec_tit { color: #111; font-size: 42px; font-weight: 600; line-height: 140%; letter-spacing: -0.03em; white-space: nowrap; margin: 0 0 14px; }
.section03 .tit_set .sec_tit .col { color: #295BE4; }
.section03 .tit_set .sec_tit .bold { font-weight: 800; }
.section03 .tit_set .s_tit { color: #111; font-size: 20px; font-weight: 400; line-height: 150%; letter-spacing: -0.02em; }
.section03 .card_set { display: grid; grid-template-areas: "item1 item2 item3" "item1 item4 item5"; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px 20px; max-width: 1000px; margin: 0 auto; }
.section03 .card_set .item { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 235px; padding: 0 0 0 34px; background: url("../images/sec03_card_bg02@1.5x.png") no-repeat center center; background-size: 100% 100%; -webkit-filter: drop-shadow(0.9px 0.9px 3.6px rgba(0, 0, 0, 0.15)); filter: drop-shadow(0.9px 0.9px 3.6px rgba(0, 0, 0, 0.15)); }
.section03 .card_set .item.item1 { align-items: center; }
.section03 .card_set .item .box { position: relative; display: block; width: 196px; aspect-ratio: 196/182; height: auto; background-color: transparent; -webkit-mask-image: url("../images/sec03_box_mask@1.5x.png"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; transition: background-color 0.3s ease; margin: 0 auto; }
.section03 .card_set .item .box::before { content: ""; position: absolute; left: 0; bottom: 0; z-index: 0; display: block; width: 100%; background: #FDB518; }
.section03 .card_set .item .box::after { content: ""; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; background: url("../images/sec03_box_frame@1.5x.png") no-repeat center center; background-size: contain; }
.section03 .card_set .item .c_tit { color: #111; font-size: 18px; font-weight: 600; line-height: 140%; letter-spacing: -0.01em; margin-bottom: 4px; }
.section03 .card_set .item .c_txt { color: #323232; font-size: 16px; font-weight: 400; line-height: 140%; letter-spacing: -0.01em; }
.section03 .card_set .item .c_txt li { display: flex; align-items: center; }
.section03 .card_set .item .c_txt li::before { content: ""; flex-shrink: 0; display: block; width: 3px; height: 1px; background: #232323; margin: 0 10px; }
.section03 .card_set .item1 { grid-area: item1; width: 490px; background-image: url("../images/sec03_card_bg01@1.5x.png"); text-align: center; padding: 30px 0; }
.section03 .card_set .item1 .c_tit { color: #295BE4; font-size: 20px; margin-top: 24px; }
.section03 .card_set .item2 { grid-area: item2; }
.section03 .card_set .item3 { grid-area: item3; }
.section03 .card_set .item4 { grid-area: item4; }
.section03 .card_set .item5 { grid-area: item5; }
.section03 .card_set .item .box::before { height: 0; transition: height 1s ease-in-out; }
.section03[data-show=y] .card_set .item .box::before { height: 79%; }
.section04 .in { justify-content: flex-start; gap: 60px; padding: 100px 0 70px 20px; }
.section04 .tit_set .sec_tit { display: block; width: 360px; aspect-ratio: 360/189; height: auto; background: url("../images/sec04_tit@1.5x.png") no-repeat center center; background-size: contain; }
.section04 .bubble_set .item { position: static; }
.section04 .bubble_set .item1 { width: 424px; aspect-ratio: 424/66; background-image: url("../images/sec04_bubble01_bg@1.5x.png"); padding: 23px 41px 0; }
.section04 .bubble_set .item2 { width: 401px; aspect-ratio: 401/119; background-image: url("../images/sec04_bubble02_bg@1.5x.png"); padding: 19px 43px 0; margin-left: 109px; margin-bottom: -5px; }
.section04 .image { background-image: url("../images/sec04_img@1.5x.png"); margin: 18px 0 0; }
.section04 .image .deco_set .deco1 { right: -29px; top: -60px; width: 100px; aspect-ratio: 100/130; background-image: url("../images/sec04_bubble_deco01@1.5x.png"); }
.section04 .image .deco_set .deco2 { left: -65px; bottom: -40px; width: 138px; aspect-ratio: 138/175; background-image: url("../images/sec04_bubble_deco02@1.5x.png"); }
.section05 .in { padding: 70px 20px 129px 0; }
.section05 .tit_set .sec_tit { display: block; width: 492px; aspect-ratio: 492/189; height: auto; background: url("../images/sec05_tit@1.5x.png") no-repeat center center; background-size: contain; }
.section05 .bubble_set .item { position: static; }
.section05 .bubble_set .item1 { width: 424px; aspect-ratio: 424/66; background-image: url("../images/sec05_bubble01_bg@1.5x.png"); padding: 23px 0 0 26px; margin-left: 45px; }
.section05 .bubble_set .item2 { width: 442px; aspect-ratio: 442/119; background-image: url("../images/sec05_bubble02_bg@1.5x.png"); padding: 27px 25px; margin-bottom: -5px; margin-left: 89px; }
.section05 .image { background-image: url("../images/sec05_img@1.5x.png"); margin: 12px 0 0; }
.section05 .image .txt { right: auto; left: 18px; }
.section05 .image .deco_set .deco1 { left: -40px; top: -31px; width: 118px; aspect-ratio: 118/105; background-image: url("../images/sec05_bubble_deco01@1.5x.png"); }
.section05 .image .deco_set .deco2 { right: -54px; bottom: -40px; width: 186px; aspect-ratio: 186/127; background-image: url("../images/sec05_bubble_deco02@1.5x.png"); }
.section06 { height: 763px; position: relative; overflow: hidden; background: #FCF8F4; }
.section06 .in { padding: 80px 0 60px; }
.section06 .tit_set { text-align: center; margin: 0 0 55px; }
.section06 .tit_set .sec_tit { color: #111; font-size: 42px; font-weight: 600; line-height: 140%; letter-spacing: -0.03em; white-space: nowrap; margin-bottom: 14px; }
.section06 .tit_set .sec_tit .bold { font-weight: 800; }
.section06 .tit_set .s_tit { color: #111; font-size: 20px; font-weight: 500; line-height: 150%; letter-spacing: -0.02em; }
.section06 .speech_set { display: flex; flex-wrap: wrap; justify-content: center; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 20px 0; max-width: 993px; margin: 0 auto; }
.section06 .speech_set .speech { position: relative; display: flex; height: 161px; }
.section06 .speech_set .speech1 { z-index: 1; }
.section06 .speech_set .speech1 .image { background-image: url("../images/sec06_img01@1.5x.png"); }
.section06 .speech_set .speech2 { z-index: 2; margin-top: 93px; }
.section06 .speech_set .speech2 .image { background-image: url("../images/sec06_img02@1.5x.png"); left: auto; right: 0; }
.section06 .speech_set .speech3 { z-index: 3; margin-top: -93px; }
.section06 .speech_set .speech3 .image { background-image: url("../images/sec06_img03@1.5x.png"); }
.section06 .speech_set .speech4 { z-index: 4; }
.section06 .speech_set .speech4 .image { background-image: url("../images/sec06_img04@1.5x.png"); left: auto; right: 0; }
.section06 .speech_set .speech1, .section06 .speech_set .speech3 { width: 504px; justify-content: flex-end; }
.section06 .speech_set .speech1 .line, .section06 .speech_set .speech3 .line { left: 60px; }
.section06 .speech_set .speech1 .bubble_set .item, .section06 .speech_set .speech3 .bubble_set .item { width: 445px; aspect-ratio: 445/83; background-image: url("../images/sec06_bubble_bg01@1.5x.png"); }
.section06 .speech_set .speech2, .section06 .speech_set .speech4 { width: 489px; justify-content: flex-start; }
.section06 .speech_set .speech2 .line, .section06 .speech_set .speech4 .line { right: 60px; }
.section06 .speech_set .speech2 .bubble_set .item, .section06 .speech_set .speech4 .bubble_set .item { width: 430px; aspect-ratio: 430/83; background-image: url("../images/sec06_bubble_bg02@1.5x.png"); }
.section06 .speech_set .image { position: absolute; left: 0; top: 45px; z-index: 2; display: block; width: 116px; aspect-ratio: 5/5; background: no-repeat center center; background-size: contain; border-radius: 100%; }
.section06 .speech_set .line { position: absolute; bottom: 30px; z-index: 0; height: 5px; background: #fff; }
.section06 .speech_set .bubble_set .item { position: static; text-align: center; padding: 22px 0 0; }
.section06 .speech_set .line { width: 0; transition: width 0.3s ease; }
.section06 .speech_set .speech { opacity: 0; transition-property: opacity; transition-duration: 0.5s; transition-timing-function: ease; will-change: opacity, transform; }
.section06[data-show=y] .speech_set .line { transition: width 0.4s linear; }
.section06[data-show=y] .speech_set .speech { opacity: 1; transform: translate(0, 0); }
.section06[data-show=y] .speech_set .speech1 { transition-delay: 0s; }
.section06[data-show=y] .speech_set .speech1 .line { width: 600px; transition-delay: 0.3s; }
.section06[data-show=y] .speech_set .speech2 { transition-delay: 0.7s; }
.section06[data-show=y] .speech_set .speech2 .line { width: 600px; transition-delay: 1s; }
.section06[data-show=y] .speech_set .speech3 { transition-delay: 1.4s; }
.section06[data-show=y] .speech_set .speech3 .line { width: 600px; transition-delay: 1.7s; }
.section06[data-show=y] .speech_set .speech4 { transition-delay: 2.1s; }
.section07 { position: relative; overflow: hidden; background: #6A8EF2; }
.section07 .in { padding: 100px 0; }
.section07 .tit_set { text-align: center; margin: 0 0 120px; }
.section07 .tit_set .sec_tit { color: #FCF8F4; font-size: 42px; font-weight: 600; line-height: 140%; letter-spacing: -0.03em; white-space: nowrap; margin-bottom: 14px; }
.section07 .tit_set .sec_tit .bold { font-weight: 800; }
.section07 .tit_set .s_tit { color: #FCF8F4; font-size: 20px; font-weight: 500; line-height: 150%; letter-spacing: -0.02em; }
.section07 .swiper { overflow: hidden; }
.section07 .swiper .swiper-wrapper { display: flex; gap: 16px; width: max-content; animation: sec07_flow 30s linear infinite; }
.section07 .swiper1 .swiper-wrapper { animation-direction: normal; }
.section07 .swiper2 .swiper-wrapper { animation-direction: reverse; }
.section07 .swiper .swiper-wrapper:hover { animation-play-state: paused; }
@keyframes sec07_flow {
to { transform: translateX(calc(-50% - 8px)); }
}
.section07 .swiper .swiper-slide-icon { width: 120px; height: auto; aspect-ratio: 5/5; }
.section07 .swiper .swiper-slide-text { display: flex; align-items: center; gap: 20px; width: 400px; height: auto; aspect-ratio: 400/120; background: url("../images/sec07_slide_text_bg@1.5x.png") no-repeat center center; background-size: 100% 100%; padding: 0 8px; }
.section07 .swiper .icon { display: block; width: 100%; height: 100%; background: no-repeat center center; background-size: contain; }
.section07 .swiper .image { flex-shrink: 0; display: block; width: 104px; aspect-ratio: 5/5; background: no-repeat center center; background-size: contain; }
.section07 .swiper .txt_set .txt { color: #2A5EEC; font-size: 20px; font-weight: 700; line-height: 140%; letter-spacing: -0.02em; margin-bottom: 4px; }
.section07 .swiper .txt_set .name { color: #646464; font-size: 14px; font-weight: 500; line-height: 145%; letter-spacing: -0.01em; }
.section07 .swiper .campaign_logo { display: block; width: 298px; aspect-ratio: 298/36; height: auto; background: url("../images/sec07_campaign_logo@1.5x.png") no-repeat center center; background-size: contain; margin: 0 auto; }
.section07 .swiper1 { direction: ltr; margin-bottom: 20px; }
.section07 .swiper1 .icon1 { background-image: url("../images/sec07_slide1_icon1@1.5x.png"); }
.section07 .swiper1 .icon2 { background-image: url("../images/sec07_slide1_icon2@1.5x.png"); }
.section07 .swiper1 .icon3 { background-image: url("../images/sec07_slide1_icon3@1.5x.png"); }
.section07 .swiper1 .icon4 { background-image: url("../images/sec07_slide1_icon4@1.5x.png"); }
.section07 .swiper1 .image1 { background-image: url("../images/sec07_slide1_image1@1.5x.png"); }
.section07 .swiper1 .image2 { background-image: url("../images/sec07_slide1_image2@1.5x.png"); }
.section07 .swiper1 .image3 { background-image: url("../images/sec07_slide1_image3@1.5x.png"); }
.section07 .swiper1 .image4 { background-image: url("../images/sec07_slide1_image4@1.5x.png"); }
.section07 .swiper2 .icon1 { background-image: url("../images/sec07_slide2_icon1@1.5x.png"); }
.section07 .swiper2 .icon2 { background-image: url("../images/sec07_slide2_icon2@1.5x.png"); }
.section07 .swiper2 .icon3 { background-image: url("../images/sec07_slide2_icon3@1.5x.png"); }
.section07 .swiper2 .icon4 { background-image: url("../images/sec07_slide2_icon4@1.5x.png"); }
.section07 .swiper2 .icon5 { background-image: url("../images/sec07_slide2_icon5@1.5x.png"); }
.section07 .swiper2 .image1 { background-image: url("../images/sec07_slide2_image1@1.5x.png"); }
.section07 .swiper2 .image2 { background-image: url("../images/sec07_slide2_image2@1.5x.png"); }
.section07 .swiper2 .image3 { background-image: url("../images/sec07_slide2_image3@1.5x.png"); }
.section08 { position: relative; overflow: hidden; background: #2A5EEC; }
.section08 .in { padding: 100px 0 90px; }
.section08 .deco_set .deco1 { right: calc(50% + 66px); top: 56px; width: 32px; aspect-ratio: 32/43; background-image: url("../images/sec08_deco1@1.5x.png"); }
.section08 .deco_set .deco2 { left: calc(50% + 512px); top: 195px; width: 105px; aspect-ratio: 105/91; background-image: url("../images/sec08_deco2@1.5x.png"); }
.section08 .deco_set .deco3 { right: calc(50% + 555px); bottom: 102px; width: 97px; aspect-ratio: 97/235; background-image: url("../images/sec08_deco3@1.5x.png"); }
.section08 .tit_set { position: relative; text-align: center; margin: 0 0 50px; }
.section08 .tit_set .sec_tit { color: #FFF; font-size: 42px; font-weight: 600; line-height: 140%; letter-spacing: -0.02em; white-space: nowrap; margin-bottom: 14px; }
.section08 .tit_set .s_tit { color: #FFF; font-size: 20px; font-weight: 400; line-height: 150%; letter-spacing: -0.02em; }
.section08 .card_set { display: flex; align-items: stretch; justify-content: center; gap: 20px; width: 100%; margin: 50px 0; }
.section08 .card_set[data-loading=y] { pointer-events: none; }
.section08 .card_set[data-loading=y] .item::after { opacity: 1; }
.section08 .card_set .item { flex-shrink: 0; position: relative; display: flex; flex-direction: column; width: 320px; }
.section08 .card_set .item::after { position: absolute; inset: 0; z-index: 1; opacity: 0; width: 100%; height: 100%; border-radius: 20px; background: rgba(42, 93, 236, 0.4); -webkit-backdrop-filter: blur(5.5px); backdrop-filter: blur(5.5px); pointer-events: none; transition: opacity 0.3s ease; }
.section08 .card_set .item .img_set { position: relative; z-index: 0; display: block; width: 100%; height: 365px; border-radius: 20px 20px 0 0; overflow: hidden; }
.section08 .card_set .item .img_set img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.section08 .card_set .item .txt_set { flex: 1 1 auto; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; background: #FEECC5; border-radius: 20px; box-shadow: 1.688px 1.688px 6.75px 0 rgba(0, 0, 0, 0.15); padding: 20px 24px 25px; margin: -82px 0 0; }
.section08 .card_set .item .txt_set .c_tit { color: #111; font-size: 20px; font-weight: 600; line-height: 130%; letter-spacing: -0.02em; margin: 0 80px 8px 0; }
.section08 .card_set .item .txt_set .c_tit .c_name { font-weight: 800; word-break: break-all; }
.section08 .card_set .item .txt_set .c_txt { color: #111; font-size: 16px; font-weight: 500; line-height: 140%; letter-spacing: -0.01em; }
.section08 .card_set .item .txt_set .c_txt .c_name { font-weight: 700; }
@keyframes btn_pulse {
0% { scale: 1; }
50% { scale: 1.05; }
}
.section08 .card_set .item .txt_set .btn { position: absolute; right: 12px; top: -51px; z-index: 1; display: block; width: 146px; aspect-ratio: 146/80; height: auto; background: url("../images/sec08_btn_bg@1.5x.png") no-repeat center center; background-size: contain; -webkit-filter: drop-shadow(1.3px 1.3px 5px rgba(0, 0, 0, 0.15)); filter: drop-shadow(1.3px 1.3px 5px rgba(0, 0, 0, 0.15)); padding: 7px 0 0; color: #295BE4; font-size: 20px; font-weight: 500; line-height: 130%; letter-spacing: -0.02em; text-align: center; animation: btn_pulse 1s ease-in-out infinite alternate; }
.section08 .card_set .item .txt_set .btn .c_name { display: block; font-weight: 700; }
.section08 .btn_set { text-align: center; }
.section08 .btn_set .btn_refresh { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: url("../images/sec08_refresh_bg@1.5x.png") no-repeat center center; background-size: 100% 100%; padding: 19px 65px; transition: all 0.3s ease; }
.section08 .btn_set .btn_refresh .btn_arr { display: block; width: 20px; aspect-ratio: 5/5; height: auto; background-color: #11265E; -webkit-mask-image: url('data:image/svg+xml,'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; transition: background-color 0.3s ease; transform-origin: center center; transform: rotate(0deg); }
.section08 .btn_set .btn_refresh .btn_arr[data-rotate=y] { transform: rotate(360deg); transition: transform 0.6s ease; }
.section08 .btn_set .btn_refresh .btn_txt { color: #111; font-size: 20px; font-weight: 700; line-height: 140%; letter-spacing: -0.02em; }
.section09 { position: relative; overflow: hidden; background: #F2EFE9; }
.section09 .in { max-width: 1120px; margin: 0 auto; padding: 100px 0; }
.section09 .tit_set { text-align: center; margin: 0 0 50px; }
.section09 .tit_set .logo { display: block; width: 175px; aspect-ratio: 175/31; height: auto; background: url("../images/logo_lumir@2x.png") no-repeat center center; background-size: contain; margin: 0 auto 18px; }
.section09 .tit_set .sec_tit { color: #111; font-size: 42px; font-weight: 600; line-height: 140%; letter-spacing: -0.03em; white-space: nowrap; }
.section09 .tit_set .sec_tit .bold { font-weight: 800; }
.section09 .reward_set { display: grid; grid-template-columns: 380px 190px 275px 275px; grid-template-rows: 320px 200px 70px 250px; width: 100%; border-radius: 20px; overflow: hidden; }
.section09 .reward_set .item { display: block; background: no-repeat center center; background-size: cover; }
.section09 .reward_set .item1 { grid-column: 1/3; grid-row: 1/2; background-image: url("../images/sec09_reward01@1.5x.jpg"); }
.section09 .reward_set .item2 { grid-column: 3/5; grid-row: 1/2; background: #fff; display: flex; align-items: center; justify-content: center; }
.section09 .reward_set .item3 { grid-column: 1/2; grid-row: 2/3; background-image: url("../images/sec09_reward03@1.5x.jpg"); }
.section09 .reward_set .item4 { grid-column: 2/3; grid-row: 2/3; background-image: url("../images/sec09_reward04@1.5x.jpg"); }
.section09 .reward_set .item5 { grid-column: 3/4; grid-row: 2/4; background-image: url("../images/sec09_reward05@1.5x.jpg"); }
.section09 .reward_set .item6 { grid-column: 4/5; grid-row: 2/4; background-image: url("../images/sec09_reward06@1.5x.jpg"); }
.section09 .reward_set .item7 { grid-column: 1/3; grid-row: 3/5; background: #111; }
.section09 .reward_set .item8 { grid-column: 3/5; grid-row: 4/5; background-image: url("../images/sec09_reward08@1.5x.jpg"); }
.section09 .reward_set .txt_set .tit { color: #295BE4; font-size: 20px; font-weight: 800; line-height: 140%; letter-spacing: -0.4px; }
.section09 .reward_set .txt_set .txt { color: #111; font-size: 18px; font-weight: 500; line-height: 145%; letter-spacing: -0.01em; margin: 6px 0 30px; }
.section09 .reward_set .txt_set .desc li { display: flex; align-items: center; color: #505050; font-size: 15px; font-weight: 400; line-height: 145%; letter-spacing: -0.01em; display: flex; align-items: center; }
.section09 .reward_set .txt_set .desc li::before { content: ""; flex-shrink: 0; display: block; width: 3px; aspect-ratio: 5/5; background: #505050; border-radius: 100%; margin: 0 10px; }
.section09 .reward_set .video_set { position: relative; width: 100%; height: 100%; }
.section09 .reward_set .video_set .video { display: block; width: 100%; height: 100%; object-position: center center; object-fit: cover; }
.section_tab { position: relative; overflow: hidden; background: #E4E4E4; }
.section_tab .in { max-width: 1120px; margin: 0 auto; padding: 100px 0; }
.section_tab .sec_tit { color: #111; font-size: 41px; font-weight: 800; line-height: 140%; letter-spacing: -0.02em; white-space: nowrap; text-align: center; margin: 0 0 50px; }
.section_tab .tab_list { width: 100%; }
.section_tab .tab_list ul { display: flex; flex-direction: column; gap: 20px; }
.section_tab .tab_list ul li { background: url("../images/sec_tab_bg@1.5x.png") no-repeat center center; background-size: 100% 100%; padding: 22px 24px; }
.section_tab .tab_list ul li[data-show=y] .head button::after { transform: rotate(-180deg); }
.section_tab .tab_list ul li[data-show=y] .body { max-height: var(--max-height); }
.section_tab .tab_list .head button { position: relative; display: flex; align-items: center; width: 100%; color: #2A5EEC; font-size: 24px; font-weight: 700; line-height: 150%; letter-spacing: -0.02em; text-align: left; }
.section_tab .tab_list .head button::after { content: ""; flex-shrink: 0; margin-left: auto; margin-right: 10px; display: block; width: 24px; aspect-ratio: 24/13; height: auto; background-color: #6A8EF2; -webkit-mask-image: url('data:image/svg+xml,'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; transition: background-color 0.3s ease; transform: rotate(0deg); transform-origin: center center; transition: transform 0.3s ease; }
.section_tab .tab_list .body { position: relative; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.section_tab .tab_list .body .inner { color: #111; font-size: 16px; font-weight: 400; line-height: 150%; letter-spacing: -0.01em; padding: 14px 14px 0 0; margin: 14px 0 0; border-top: 2px solid #D5D5D5; }
.footer { background: #464646; }
.footer .in { display: flex; justify-content: center; align-items: center; gap: 150px; padding: 64px 0 122px; }
.footer .f_logo { display: block; width: 300px; aspect-ratio: 300/112; height: auto; background-color: #fff; -webkit-mask-image: url("../images/logo@4x.png"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; transition: background-color 0.3s ease; }
.footer .address { color: #BEBEBE; font-size: 20px; font-weight: 400; line-height: 130%; letter-spacing: -0.03em; margin-top: 3px; }
.footer .address a { display: inline; }
.footer .address em { display: block; font-size: 25px; font-weight: 800; letter-spacing: -0.05em; }
.footer .address .txt { display: block; margin: 30px 0 40px; }
.popup { display: none; position: fixed; inset: 0; z-index: -1; opacity: 0; flex-wrap: wrap; align-items: center; justify-content: center; transition: opacity 0.3s ease, z-index 0s 0.3s linear; }
.popup[data-block=y] { display: flex; }
.popup[data-show=y] { z-index: 99; opacity: 1; transition: opacity 0.3s ease, z-index 0s linear; }
.popup .popup_dimmed { position: fixed; inset: 0; z-index: 0; background: rgba(0, 0, 0, 0.7); overscroll-behavior: contain; touch-action: none; }
.popup .popup_wrap { position: relative; z-index: 1; }
.popup .popup_inner { position: relative; display: block; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.popup .btn_pop_close { position: absolute; z-index: 5; width: 50px; aspect-ratio: 5/5; }
.popup .btn_pop_close::after { content: ""; display: block; width: 100%; height: 100%; background-color: #111; -webkit-mask-image: url('data:image/svg+xml,'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: auto 52%; pointer-events: none; }
.popup .popup_dimmed { background: rgba(0, 0, 0, 0.3); }
.popup.popup_loading .popup_inner { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; background: url("../images/loading_img.png") no-repeat center center; background-size: contain; overflow: visible; }
@keyframes loading_bar_ani {
0% { height: 0; }
50% { height: 100%; }
}
.popup.popup_loading .bar { display: flex; }
.popup.popup_loading .bar div { position: absolute; z-index: 1; display: flex; align-items: flex-end; width: 5px; height: 11px; -webkit-mask: url("../images/loading_bar01.png") no-repeat center center; -webkit-mask-size: contain; overflow: hidden; }
.popup.popup_loading .bar div::after { content: ""; display: block; background: #6A8EF2; width: 100%; animation: loading_bar_ani 1s linear infinite; }
.popup.popup_loading .bar .b01 { left: calc(50% - 7px); bottom: calc(50% + 24px); transform: rotate(-30.922deg); }
.popup.popup_loading .bar .b02 { left: 50%; bottom: calc(50% + 29px); width: 6px; height: 15px; -webkit-mask: url("../images/loading_bar02.png") no-repeat center center; -webkit-mask-size: contain; }
.popup.popup_loading .bar .b02::after { background: #2A5EEC; }
.popup.popup_loading .bar .b03 { left: calc(50% + 11px); bottom: calc(50% + 29px); transform: rotate(38.76deg); }
@media (min-width: 769px){
.ver_pc { display: block !important; }
.ver_mo { display: none !important; } }
@media all and (max-width: 1280px){
html:has(.popup[data-show=y][backdrop]) .wrap_fixed .sticky_set, html:has(.popup_loading[data-show=y][backdrop]) .wrap_fixed .sticky_set { bottom: calc(var(--scrollBarWidth) + 16px); } }
@media (max-width: 768px){
.ver_pc { display: none !important; }
.ver_mo { display: block !important; } }