@font-face {
font-family: 'NanumSquareRound';
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundR.eot);
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundR.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundR.woff2) format("woff2"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundR.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundR.ttf) format("truetype");
}
@font-face {
font-family: 'NanumSquareRoundB';
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundB.eot);
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundB.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundB.woff2) format("woff2"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundB.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundB.ttf) format("truetype");
}
@font-face {
font-family: 'NanumSquareRoundEB';
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundEB.eot);
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundEB.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundEB.woff2) format("woff2"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundEB.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundEB.ttf) format("truetype");
}
@font-face {
font-family: 'NanumSquareRoundL';
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundL.eot);
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundL.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundL.woff2) format("woff2"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundL.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundL.ttf) format("truetype");
}
html,body {width: 100%;height: 100%;scroll-behavior: smooth;}
.wrap {position: relative;width: 100%;min-width: 1280px;}
/*
font
나눔스퀘어라운드 굵기별 폰트패밀리
300 font-family: 'NanumSquareRoundL';
400 font-family: 'NanumSquareRound';
700 font-family: 'NanumSquareRoundB';
800 font-family: 'NanumSquareRoundEB';
*/
.h1 {font-family: 'NanumSquareRoundEB';font-size: 64px;font-weight: 800;line-height: 85px;letter-spacing: -0.04em;}
.h2 {font-family: 'NanumSquareRoundEB';font-size: 56px;font-weight: 800;line-height: 74px;letter-spacing: -0.03em;}
.h3 {font-family: 'NanumSquareRoundEB';font-size: 50px;font-weight: 800;line-height: 72px;letter-spacing: -0.04em;}
.h4 {font-family: 'NanumSquareRoundEB';font-size: 44px;font-weight: 800;line-height: 60px;letter-spacing: -0.02em;}
.h5 {font-family: 'NanumSquareRoundEB';font-size: 36px;font-weight: 800;line-height: 60px;letter-spacing: -0.03em;}
.body_main {font-family: 'NanumSquareRound';font-size: 36px;font-weight: 400;line-height: 54px;letter-spacing: -0.04em;}
.sub_tit1 {font-size: 27px;font-weight: 700;line-height: 40px;letter-spacing: -0.02em;}
.sub_tit2 {font-size: 24px;font-weight: 700;line-height: 40px;letter-spacing: -0.02em;}
.sub_tit3 {font-size: 22px;font-weight: 700;line-height: 40px;letter-spacing: -0.02em;}
.body1 {font-size: 22px;font-weight: 500;line-height: 40px;letter-spacing: -0.02em;}
.body1.bold {font-weight: 700;line-height: 38px;}
.body2 {font-size: 20px;font-weight: 500;line-height: 32px;letter-spacing: -0.02em;}
.body2.bold {font-weight: 700;}
.caption {font-size: 16px;font-weight: 600;line-height: 32px;letter-spacing: -0.02em;}
.caption.bold {font-weight: 800;}
.btn_txt {font-size: 24px;font-weight: 700;line-height: 36px;letter-spacing: -0.02em;}
.btn_txt.bold {font-weight: 800;}
.bold {font-weight: 700;}
/* 공통 */
.col_red {color: #FF5A4F;}
.txt_bg {position: relative;display: inline-block;z-index: 0;}
.txt_bg::after {content:'';position: absolute;top: 50%;left: 50%;z-index: -1;width: 100%;transform: translate(-50%, -50%);}
/*.section01 .txt_bg {color:#111;padding: 0 7px;margin-right: 2px;}*/
/*.section01 .txt_bg::after {height: calc(100% + 10px);background: skyblue;}*/
/* video */
/* 섹션 배경 비디오 */
.bg_video_set {position: absolute;left: 0;top: 0;z-index: -1;width: 100%;height: 100%;}
.bg_video_set .video {position: absolute;top: 0;left: 0;z-index: 0;width: 100%;height: 100%;object-fit: cover;object-position: center center;}
/* 비디오 삽입 */
.video_set {position: relative;width: 100%;max-width: 1280px;margin: 0 auto;}
.video_set .video {position: relative;width: 100%;aspect-ratio: 16/9;}
/* 비디오 음소거 */
.btn_mute {
position: absolute;top: 80px;right: 20px;z-index: 10;
width: 50px;height: 40px;border-radius: 0;border: none;outline: 0;
background: transparent url("../images/sound_sprites@2x.png") no-repeat left -10px center;
background-size: auto 60px;
}
.btn_mute.on {background-position: left -70px center;}
/* logo_set */
.wrap_fixed .logo_set {position: fixed;z-index: -1;opacity: 0;transition: all 0.3s ease;will-change: opacity;}
.wrap_fixed .logo_set.show {opacity: 1;z-index: 200;}
.wrap_fixed .logo_set .logo {position: relative;transition: all 0.3s ease;}
/* 좌측 아이콘 로고 */
.wrap_fixed .logo_set.icon {left: 50px;top: 50px;}
.wrap_fixed .logo_set.icon .logo {
width: 160px;aspect-ratio: 184/115;
-webkit-mask: url('data:image/svg+xml,') no-repeat center center;
-webkit-mask-size: contain;
mask: url('data:image/svg+xml,') no-repeat center center;
mask-size: contain;
}
.wrap_fixed .logo_set.icon.wh .logo {background-color: #fff;}
.wrap_fixed .logo_set.icon.red .logo {background-color: #FF7658;}
/* 우측 텍스트 로고 */
.wrap_fixed .logo_set.txt {right: 50px;top: 50px;}
.wrap_fixed .logo_set.txt .logo {width: 176px;aspect-ratio: 174/48;}
.wrap_fixed .logo_set.txt .logo::before,
.wrap_fixed .logo_set.txt .logo::after {content: '';position: absolute;left: 0;top: 0;z-index: 0;opacity: 0;width: 100%;height: 100%;background: url("../images/logo_txt_sprites@2x.png") no-repeat left -11px center;background-size: auto 68px;}
.wrap_fixed .logo_set.txt .logo::before {background-position: left -11px center;}
.wrap_fixed .logo_set.txt .logo::after {background-position: left -195px center;}
.wrap_fixed .logo_set.txt.wh .logo::before,
.wrap_fixed .logo_set.txt.red .logo::after {z-index: 1;opacity: 1;}
/* sticky_set */
.wrap_fixed .sticky_set {position: fixed;right: 0;bottom: 80px;z-index: -1;opacity: 0;transform: translateX(100%);transition: all 0.5s ease;}
.wrap_fixed .sticky_set.show {opacity: 1;z-index: 200;transform: translateX(0);will-change: opacity, transform;}
.wrap_fixed .sticky_set .btn_sticky {
position: relative;z-index: 0;
display: flex;justify-content: space-between;align-items: center;
width: 400px;height: 124px;
border-radius: 100px 0 0 100px;
box-shadow: 0 0 10px 0 rgba(255, 218, 203, 0.20);
padding: 0 35px 0 56px;
transition: all 0.3s ease;
overflow: hidden;
}
.wrap_fixed .sticky_set .btn_sticky::before,
.wrap_fixed .sticky_set .btn_sticky::after {content:'';position: absolute;left: 0;top: 0;z-index: -1;width: 100%;height: 100%;}
.wrap_fixed .sticky_set .btn_sticky::before {background: #FF5A4F;}
.wrap_fixed .sticky_set .btn_sticky::after {background: linear-gradient(330deg, #FFD4B5 18.43%, #FFF6ED 81.78%);}
.wrap_fixed .sticky_set .btn_sticky::after {opacity: 0;}
.wrap_fixed .sticky_set .btn_sticky:hover::before {opacity: 0;}
.wrap_fixed .sticky_set .btn_sticky:hover::after {opacity: 1;}
.wrap_fixed .sticky_set .btn_sticky .txt {color: #fff;transition: all 0.3s ease;}
.wrap_fixed .sticky_set .btn_sticky .arr {
width: 35px;aspect-ratio: 35/54;
background-color: #fff;
-webkit-mask: url('data:image/svg+xml,') no-repeat no-repeat center center;
-webkit-mask-size: contain;
opacity: 0.5;
transition: all 0.3s ease;
}
.wrap_fixed .sticky_set .btn_sticky:hover {}
.wrap_fixed .sticky_set .btn_sticky:hover .txt {color: #FF5A4F;}
.wrap_fixed .sticky_set .btn_sticky:hover .arr {background-color: #FF5A4F;opacity: 1;}
/* wrap_visual */
.section_visual {position: relative;height: 100vh;overflow: hidden;}
.section_visual::before {
content:'';
position: absolute;left: 0;top: 0;z-index: 1;width: 50%;height: 100%;
background: linear-gradient(-90deg, rgba(255, 227, 227, 0.00) 6.31%, rgba(254, 239, 239, 0.52) 30.22%, #FEFAFA 75.6%);
pointer-events: none;
}
.section_visual::after {
content:'';
position: absolute;left: 50%;bottom: 0;z-index: 2;
width: 100%;height: 316px;
background: url("../images/main_bg_bottom@2x.png") no-repeat center bottom;background-size: auto 100%;
transform: translateX(-50%);
pointer-events: none;
}
.section_visual .in {}
.section_visual .tit_set {
position: absolute;z-index: 20;
left: calc((100% - 1440px) / 2 - 67px);
top: 46%;
transform: translateY(-50%);
margin-top: -40px;
}
@media all and (max-width: 1940px) {
.section_visual .tit_set {left: 9vw;}
}
.section_visual .tit_set .eyebrow_txt {width: 390px;color: #FF7658;font-size: 27px;font-weight: 800;line-height: 45px;letter-spacing: -0.02em;text-align: center;border-radius: 32px;background: rgba(255, 255, 255, 0.6);backdrop-filter: blur(20px);margin: 0 auto 39px;}
.section_visual .tit_set .sec_tit {height: 47.838vh;aspect-ratio: 543/487;background: url("../images/main_title@2x.png") no-repeat center center;background-size: contain;margin: 0 auto;}
.section_visual .scroll_cursor {
position: absolute;left: 50%;bottom: 146px;z-index: 10;
display: flex;align-items: center;gap: 10px;
transform:translateX(-50%);
filter: drop-shadow(0 0 10px #808080);
}
.section_visual .scroll_cursor .icon {position:relative;width:12px;height:22px;border:2px solid #fff;border-radius:10px;}
.section_visual .scroll_cursor .txt {color:#fff;font-weight:400;font-size:18px;line-height: 22px;letter-spacing: -0.02em;}
.section_visual .scroll_cursor .icon::after {
content:'';position:absolute;top:2px;left:50%;
width:2px;height:4px;background:#fff;
transform:translateX(-50%);
animation:scroll_ani_cursor 1.5s ease-in-out infinite;
}
@keyframes scroll_ani_cursor {
0% {top:4px;}
50% {top:calc(100% - 4px - 4px);}
100% {top:4px;}
}
/* scroll_ani_wrapper */
.scroll_ani_wrapper {position: relative;overflow: hidden;}
.scroll_ani_wrapper .scroll_line_set {position: absolute;left: calc(50% - 655px);top: 1655px;z-index: 10;pointer-events: none;}
.scroll_ani_wrapper .line_heart {position: relative;}
.scroll_ani_wrapper .line_heart.pc1920 {width: 1360px;aspect-ratio: 1360/3664;}
.scroll_ani_wrapper .line_heart.pc1440 {display: none;width: 1121px;aspect-ratio: 1121/2761;}
.scroll_ani_wrapper .line_heart svg {position: absolute;left: 0;top: 0;z-index: 0;width: 100%;height: 100%;}
.scroll_ani_wrapper .circle {}
.scroll_ani_wrapper .circle .cc {position: absolute;z-index: 10;opacity: 0;aspect-ratio: 1/1;border-radius: 100%;overflow: hidden;transition: all 0.3s ease;will-change: opacity}
.scroll_ani_wrapper .circle .cc.show {opacity: 1;}
.scroll_ani_wrapper .circle .cc01 {left: calc(50% + 497px);top: 326px;width: 19px;}
.scroll_ani_wrapper .circle .cc02 {left: calc(50% + 505px);top: 484px;width: 12px;}
.scroll_ani_wrapper .circle .cc03 {left: calc(50% + 21px);top: 1220px;width: 12px;}
.scroll_ani_wrapper .circle .cc04 {left: calc(50% - 47px);top: 1346px;width: 19px;}
.scroll_ani_wrapper .circle .cc05 {right: calc(50% + 707px);top: 2150px;width: 19px;}
.scroll_ani_wrapper .circle .cc06 {left: calc(50% - 137px);top: 2422px;width: 19px;}
.scroll_ani_wrapper .circle .cc07 {left: calc(50% - 133px);top: 2575px;width: 12px;}
.scroll_ani_wrapper .circle .cc::after {content:'';position: absolute;left: 0;top: 0;z-index: 0;width: 100%;height: 100%;}
.scroll_ani_wrapper .circle .cc01::after {background: #F57168;}
.scroll_ani_wrapper .circle .cc02::after {background: #FCC7B5;}
.scroll_ani_wrapper .circle .cc03::after {background: #FCC7B5;opacity: 0.4;}
.scroll_ani_wrapper .circle .cc04::after {background: #F57168;opacity: 0.4;}
.scroll_ani_wrapper .circle .cc05::after {background: #FFC8B4;}
.scroll_ani_wrapper .circle .cc06::after {background: #FCB19D;}
.scroll_ani_wrapper .circle .cc07::after {background: #FDBBA5;}
.scroll_ani_wrapper .name_set {
position: absolute;left: 0;bottom: 0;
background: rgba(255, 255, 255, 0.80);
box-shadow: 0 0 21px 0 rgba(232, 207, 207, 0.70);
backdrop-filter: blur(15px);
border-radius: 80px;
padding: 12px 40px;
text-align: center;
opacity: 0;
transition: all 0.3s ease;
}
.scroll_ani_wrapper .name_set.show {opacity: 1;}
.scroll_ani_wrapper .name_set p {color: #787878;font-size: 24px;font-weight: 500;line-height: 32px;letter-spacing: -0.02em;}
.scroll_ani_wrapper .name_set strong {color: #F57168;font-size: 24px;font-weight: 800;line-height: 32px;letter-spacing: -0.02em;}
.scroll_ani_wrapper .btn_interview {
position: absolute;left: 50%;top: calc(100% + 12px);z-index: 0;
display: flex;align-items: center;justify-content: center;gap: 12px;
background: #FF7658;
border-radius: 80px;
box-shadow: 0 0 21px 0 rgba(232, 207, 207, 0.70);
padding: 6px 20px;
white-space: nowrap;
transform: translateX(-50%);
}
.scroll_ani_wrapper .btn_interview .txt {color:#fff;}
.scroll_ani_wrapper .btn_interview .txt em {font-weight: 800;}
.scroll_ani_wrapper .btn_interview .arr {width: 10px;aspect-ratio: 10/17;background: url('data:image/svg+xml,') no-repeat center center;background-size: contain;opacity: 0.5;}
.scroll_ani_wrapper .name_set.sec02 {left: calc(50% - 67px);top: 2483px;bottom: auto;z-index: 20;}
/* section01 */
.section01 {position:relative;height: 1789px;background: url("../images/sec01_bg@2x.png") no-repeat center center;background-size: 3000px 100%;overflow: hidden;}
.section01 .in {}
.section01 .img_set {}
.section01 .img_set li {position: absolute;z-index: 0;opacity: 0;transition: all 0.3s ease;will-change: opacity;}
.section01 .img_set .li01 {right: calc(50% + 72px);top: 119px;}
.section01 .img_set .li02 {left: calc(50% + 261px);top: 242px;}
.section01 .img_set .li02::after {content: '';position: absolute;left: 0;bottom: 0;z-index: 1;width: 324px;aspect-ratio: 324/401;background: url("../images/sec01_img02_effect@2x.png") no-repeat center center;background-size: contain;}
.section01 .img_set .li03 {right: calc(50% + 286px);top: 388px;}
.section01 .img_set .li04 {left: calc(50% + 376px);top: 699px;}
.section01 .img_set .li05 {left: calc(50% + 215px);top: 1004px;}
.section01 .img_set .li06 {right: calc(50% + 461px);top: 1082px;}
.section01 .img_set .li07 {right: calc(50% + 287px);top: 1181px;z-index: 1;}
.section01 .img_set .img {background: no-repeat center center;background-size: contain;}
.section01 .img_set .li01 .img {width: 300px;aspect-ratio: 300/197;background-image: url("../images/sec01_img01@2x.png");}
.section01 .img_set .li02 .img {width: 210px;aspect-ratio: 210/261;background-image: url("../images/sec01_img02@2x.png");}
.section01 .img_set .li03 .img {width: 400px;aspect-ratio: 400/243;background-image: url("../images/sec01_img03@2x.png");}
.section01 .img_set .li04 .img {width: 280px;aspect-ratio: 280/211;background-image: url("../images/sec01_img04@2x.png");}
.section01 .img_set .li05 .img {width: 380px;aspect-ratio: 380/255;background-image: url("../images/sec01_img05@2x.png");}
.section01 .img_set .li06 .img {width: 179px;aspect-ratio: 179/183;background-image: url("../images/sec01_img06@2x.png");}
.section01 .img_set .li07 .img {width: 239px;aspect-ratio: 239/289;background-image: url("../images/sec01_img07@2x.png");}
.section01 .img_set li p {position: absolute;left: 50%;top: calc(100% + 8px);z-index: 0;color: #B2ABA9;text-align: center;white-space: nowrap;transform: translateX(-50%);}
.section01 .history_set {position: absolute;left: calc(50%);top: 530px;display: flex;flex-direction: column;align-items: center;gap: 55px;transform: translateX(-50%);}
.section01 .history_set .y1984 {width: 304px;aspect-ratio: 304/108;background: url("../images/sec01_1984@2x.png") no-repeat center center;background-size: contain;opacity: 0;transition: all 0.3s ease;will-change: opacity;}
.section01 .history_set .y2024 {width: 319px;aspect-ratio: 319/108;background: url("../images/sec01_2024@2x.png") no-repeat center center;background-size: contain;opacity: 0;transition: all 0.3s ease;will-change: opacity;}
.section01 .history_set .line_set {position: relative;width: 127px;aspect-ratio: 127/647;}
.section01 .history_set .line_set svg {position:absolute;top:0;left:0;display:block;width:100%;height:100%;}
/*.section02 .line_set {position:absolute;left:0;bottom:10rem;z-index:0;width:100%;height:auto;padding-top:21%;}*/
/*.section02 .line_set svg {position:absolute;top:0;left:0;display:block;width:100%;height:100%;margin:0 auto;}*/
/*스크롤시 이미지 페이드인*/
.section01 .img_set li.show {opacity: 1;}
/*스크롤시 연도 페이드인*/
.section01 .history_set .y1984.show {opacity: 1;}
.section01 .history_set .y2024.show {opacity: 1;}
/* section_ani :: 섹션 02, 03, 04 공통 */
.section_ani {}
.section_ani .bg_set_ani {position: absolute;left: 50%;top: 0;z-index: 0;width:3000px;height: 100%;transform: translateX(-50%);}
.section_ani .bg_set_ani .bg {width:100%;height: 100%;display:inline-block;overflow:hidden;white-space: nowrap;}
.section_ani .bg_set_ani .bg .block {display: block;width: 3000px;height: 100%;background: no-repeat center center;background-size: auto 100%;}
.section_ani .bg_set_ani.right .bg {position: absolute;right: 0;top: 0;z-index: 0;}
.section_ani .bg_set_ani.right .bg .block {position: absolute;right: 0;top: 0;z-index: 0;}
.section_ani .in {position: relative;z-index: 1;display: flex;justify-content: center;align-items: center;height: 100%;}
.section_ani .tit_set {position: absolute;z-index: 0;}
.section_ani .tit_set h4 {position: relative;}
.section_ani .tit_set h4::after {content:'';position: absolute;left: 0;top: 0;z-index: -1;width: 100%;height: 100%;background: no-repeat left bottom;background-size: contain;}
.section_ani .tit_set h4 em {position: absolute;left: 0;top: 0;z-index: 0;width: 100%;height: 100%;background: no-repeat left bottom;background-size: contain;}
.section_ani .tit_set p {}
.section_ani .img_set {position: absolute;z-index: 0;}
.section_ani .img_set .photo {overflow: hidden;}
.section_ani .img_set .photo::after {content:'';display: block;width: 100%;height: 100%;background: no-repeat center bottom;background-size: contain;}
/* 1번째 페이드인 배경 */
.section_ani .bg_set_ani .bg {width:0;transition: all 0.5s linear;}
.section_ani.show .bg_set_ani .bg {width: 100%;}
/* 2번째 페이드인 - 타이틀 숫자 배경 */
.section_ani .tit_set h4::after {opacity: 0;transition: all 0.2s ease;}
.section_ani.show .tit_set h4::after {opacity: 1;/*transition-delay: 0.2s;*/}
/* 3번째 페이드인 - 타이틀 숫자 */
.section_ani .tit_set h4 em {opacity: 0;transition: all 0.2s ease;}
.section_ani.show .tit_set h4 em {opacity: 1;}
/*.section_ani.show .tit_set h4 .tit01 {transition-delay: 0.4s;}*/
/*.section_ani.show .tit_set h4 .tit02 {transition-delay: 0.5s;}*/
/*.section_ani.show .tit_set h4 .tit03 {transition-delay: 0.6s;}*/
/*.section_ani.show .tit_set h4 .tit04 {transition-delay: 0.7s;}*/
/*.section_ani.show .tit_set h4 .tit05 {transition-delay: 0.8s;}*/
/*.section_ani.show .tit_set h4 .tit06 {transition-delay: 0.9s;}*/
/*.section_ani.show .tit_set h4 .tit07 {transition-delay: 1.0s;}*/
/*.section_ani.show .tit_set h4 .tit08 {transition-delay: 1.1s;}*/
/* 4번째 페이드인 - 사람 */
.section_ani .img_set .photo::after {opacity: 0;transform: translateY(20px);transition: all 0.5s ease;}
.section_ani.show .img_set .photo::after {opacity: 1;transform: translateY(0);/*transition-delay: 0.8s;*/}
/* 5번째 페이드인 - 타이틀 문구 */
.section_ani .tit_set p {opacity: 0;transform: translateY(10%);transition: all 0.5s ease;}
.section_ani.show .tit_set p {opacity: 1;transform: translateY(0);/*transition-delay: 1.2s;*/}
/* 6번째 페이드인 사람 이름 */
.scroll_ani_wrapper .section_ani .name_set {opacity: 0;transition: all 0.3s ease;}
.scroll_ani_wrapper .section_ani.show .name_set {opacity: 1;/*transition-delay: 1.4s;*/}
/* section02 */
.section02 {position:relative;height: 1000px;background: url("../images/sec02_bg@2x.png") no-repeat center center;background-size: auto 100%;overflow: hidden;}
.section02 .bg_set_ani .bg .block {background-image: url("../images/sec02_person_bg@2x.png");}
.section02 .tit_set {right: calc(50% + 208px);top: 355px;}
.section02 .tit_set h4 {width: 396px;aspect-ratio: 396/119;}
.section02 .tit_set h4::after {background-image: url("../images/sec02_tit_bg@2x.png");}
.section02 .tit_set h4 .tit01 {background-image: url("../images/sec02_tit_1@2x.png");}
.section02 .tit_set h4 .tit02 {background-image: url("../images/sec02_tit_2@2x.png");}
.section02 .tit_set h4 .tit03 {background-image: url("../images/sec02_tit_3@2x.png");}
.section02 .tit_set h4 .tit04 {background-image: url("../images/sec02_tit_4@2x.png");}
.section02 .tit_set h4 .tit05 {background-image: url("../images/sec02_tit_5@2x.png");}
.section02 .tit_set h4 .tit06 {background-image: url("../images/sec02_tit_6@2x.png");}
.section02 .tit_set p {margin: 20px 0 0 44px;}
.section02 .img_set {left: calc(50% - 45px);top: 187px;}
.section02 .img_set .photo {width: 655px;aspect-ratio: 655/743;border-radius: 0 0 327px 327px;}
.section02 .img_set .photo::after {background-image: url("../images/sec02_img@2x.png");}
.section02 .name_set {left: -43px;bottom: 107px;visibility: hidden;}
/* section03 */
.section03 {position:relative;height: 1148px;background: url("../images/sec03_bg@2x.png") no-repeat center center;background-size: auto 100%;overflow: hidden;}
.section03 .bg_set_ani .bg .block {background-image: url("../images/sec03_person_bg@2x.png");}
.section03 .tit_set {left: calc(50% + 113px);top: 424px;}
.section03 .tit_set h4 {width: 529px;aspect-ratio: 529/113;}
.section03 .tit_set h4::after {background-image: url("../images/sec03_tit_bg@2x.png");}
.section03 .tit_set h4 .tit01 {background-image: url("../images/sec03_tit_1@2x.png");}
.section03 .tit_set h4 .tit02 {background-image: url("../images/sec03_tit_2@2x.png");}
.section03 .tit_set h4 .tit03 {background-image: url("../images/sec03_tit_3@2x.png");}
.section03 .tit_set h4 .tit04 {background-image: url("../images/sec03_tit_4@2x.png");}
.section03 .tit_set h4 .tit05 {background-image: url("../images/sec03_tit_5@2x.png");}
.section03 .tit_set h4 .tit06 {background-image: url("../images/sec03_tit_6@2x.png");}
.section03 .tit_set h4 .tit07 {background-image: url("../images/sec03_tit_7@2x.png");}
.section03 .tit_set h4 .tit08 {background-image: url("../images/sec03_tit_8@2x.png");}
.section03 .tit_set p {margin: 24px 0 0 36px;}
.section03 .img_set {right: calc(50% - 67px);top: 293px;}
.section03 .img_set .photo {width: 720px;aspect-ratio: 720/759;border-radius: 0 0 360px 360px;}
.section03 .img_set .photo::after {background-image: url("../images/sec03_img@2x.png");}
.section03 .name_set {left: auto;right: -33px;bottom: 131px;}
/* section04 */
.section04 {position:relative;height: 1080px;overflow: hidden;}
.section04 .bg_set_ani .bg .block {background-image: url("../images/sec04_person_bg@2x.png");}
.section04 .tit_set {right: calc(50% + 40px);top: 389px;}
.section04 .tit_set h4 {width: 564px;aspect-ratio: 564/116;}
.section04 .tit_set h4::after {background-image: url("../images/sec04_tit_bg@2x.png");}
.section04 .tit_set h4 .tit01 {background-image: url("../images/sec04_tit_1@2x.png");}
.section04 .tit_set h4 .tit02 {background-image: url("../images/sec04_tit_2@2x.png");}
.section04 .tit_set h4 .tit03 {background-image: url("../images/sec04_tit_3@2x.png");}
.section04 .tit_set h4 .tit04 {background-image: url("../images/sec04_tit_4@2x.png");}
.section04 .tit_set h4 .tit05 {background-image: url("../images/sec04_tit_5@2x.png");}
.section04 .tit_set h4 .tit06 {background-image: url("../images/sec04_tit_6@2x.png");}
.section04 .tit_set h4 .tit07 {background-image: url("../images/sec04_tit_7@2x.png");}
.section04 .tit_set h4 .tit08 {background-image: url("../images/sec04_tit_8@2x.png");}
.section04 .tit_set p {margin: 24px 0 0 44px;}
.section04 .img_set {left: calc(50% - 24px);top: 269px;}
.section04 .img_set .photo {width: 655px;aspect-ratio: 655/721;border-radius: 0 0 327px 327px;}
.section04 .img_set .photo::after {background-image: url("../images/sec04_img@2x.png");}
.section04 .name_set {left: -21px;bottom: 131px;}
/* section05 */
.section05 {position:relative;z-index: 15;padding: 226px 0 160px;overflow: hidden;}
.section05 .video_set {}
.section05 .video_set .btn_mute {}
/* 섹션 4, 5 배경 */
.section45_bg {background: url("../images/sec45_bg@2x.png") no-repeat center top;background-size: 3000px auto;}
/* section06 */
.section06 {position:relative;z-index: 2;}
.section06 .sticky_wrap {position: relative;height: 250vh;}
.section06 .sticky_in {
position: sticky;top: 0;height: 100vh;
display: flex;align-items: center;justify-content: center;
background: #FFE7D0 url("../images/sec06_bg@2x.png") no-repeat center bottom;
background-size: 3000px auto;
overflow: hidden;
}
.section06 .inner {width: 100%;margin-bottom: 50px;}
.section06 .sec_tit {text-align: center;}
.section06 .sec_tit .line {display: flex;justify-content: center;}
.section06 .txt_bg::after {height: 64px;background: rgba(255,255,255,0.7);border-radius: 18px;padding: 0 7px 0 6px;transform: translate(calc(-50% - -1px), -50%);}
.section06 .sub_set {position: relative;height: 496px;}
.section06 .sub_set .sub {
position: absolute;left: 50%;top: 0;z-index: -1;opacity: 0;
transform: translateX(-50%);
transition: z-index 0.2s ease, opacity 0.3s linear;
will-change: opacity;
}
.section06 .sub_set .sub01 {margin: 105px 0 0 42px;}
.section06 .sub_set .sub01 .sub_in {display: flex;align-items: center;justify-content: center;}
.section06 .sub_set .sub01 .circle_set {display: inline-flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;aspect-ratio: 1/1;border-radius: 100%;}
.section06 .sub_set .sub01 .circle_set .cc_in {margin: 22px 0 0;}
.section06 .sub_set .sub01 .circle_set p {}
.section06 .sub_set .sub01 .circle_set strong {display: flex;align-items: center;}
.section06 .sub_set .sub01 .right .circle_set strong em {letter-spacing: -0.08em;}
.section06 .sub_set .sub01 .left {position: relative;z-index: 0;}
.section06 .sub_set .sub01 .left::after {content:'';position: absolute;right: 129px;top: -12px;z-index: -1;width: 1068px;aspect-ratio: 1068/573;background: url("../images/sec06_left_circle_line.png") no-repeat center center;background-size: contain;}
.section06 .sub_set .sub01 .left .circle_set {width: 290px;background: radial-gradient(71.81% 71.81% at 41.38% 35.17%, #FFFDFA 0, #FFF7EA 35.5%, #FFD8AB 100%);}
.section06 .sub_set .sub01 .center {margin: 0 38px 0 47px;}
.section06 .sub_set .sub01 .center p {display: flex;align-items: center;color: #836F67;}
.section06 .sub_set .sub01 .center p span {margin: 0 0 -6px;}
.section06 .sub_set .sub01 .center em {font-size: 36px;font-weight: 800;line-height: 60px;letter-spacing: -0.02em;}
.section06 .sub_set .sub01 .center .img {width: 13px;height: 90px;background: url("../images/sec06_year_line@2x.png") no-repeat center center;background-size: contain;margin: 6px auto;}
.section06 .sub_set .sub01 .right {position: relative;}
.section06 .sub_set .sub01 .right::after {content:'';position: absolute;left: 175px;bottom: 0;z-index: -1;width: 1006px;aspect-ratio: 1006/946;background: url("../images/sec06_right_circle_line.png") no-repeat center center;background-size: contain;}
.section06 .sub_set .sub01 .right .circle_set {width: 380px;background: radial-gradient(57.73% 57.73% at 40.79% 36.83%, #FFFDFA 0, #FFE6DA 70.83%, #FFCDB1 100%);}
.section06 .sub_set .sub02 {margin: 76px 0 0;}
.section06 .sub_set .sub02 .card_list {display: flex;justify-content: center;gap: 18px;opacity: 0;transition: all 0.2s ease;}
.section06 .sub_set .sub02 .card_list .item {position: relative;width: 320px;height: 420px;background: no-repeat center center;background-size: cover;border-radius: 40px;overflow: hidden;text-align: center;padding: 36px 0;opacity: 0;transform: translateY(20px);transition: all 0.5s ease;}
.section06 .sub_set .sub02 .card_list .item01 {background-image: url("../images/sec06_card01@2x.jpg");}
.section06 .sub_set .sub02 .card_list .item02 {background-image: url("../images/sec06_card02@2x.jpg");}
.section06 .sub_set .sub02 .card_list .item03 {background-image: url("../images/sec06_card03@2x.jpg");}
.section06 .sub_set .sub02 .card_list .item04 {background-image: url("../images/sec06_card04@2x.jpg");}
.section06[data-no="2"] .sub_set .sub02 .card_list {opacity: 1;transition-delay: 0.2s;}
.section06[data-no="2"] .sub_set .sub02 .card_list .item {opacity: 1;transform: translateY(0);}
.section06[data-no="2"] .sub_set .sub02 .card_list .item01 {transition-delay: 0.3s;}
.section06[data-no="2"] .sub_set .sub02 .card_list .item02 {transition-delay: 0.4s;}
.section06[data-no="2"] .sub_set .sub02 .card_list .item03 {transition-delay: 0.5s;}
.section06[data-no="2"] .sub_set .sub02 .card_list .item04 {transition-delay: 0.6s;}
.section06 .sub_set .sub02 .card_list .li_tit {
display: inline-block;
color: #825F57;font-size: 24px;font-weight: 700;line-height: 40px;letter-spacing: -0.02em;
border-radius: 108px;
background: rgba(255, 255, 255, 0.70);
box-shadow: 0 4px 40px 0 rgba(113, 87, 76, 0.10);
backdrop-filter: blur(5px);
padding: 2px 20px;
}
.section06 .sub_set .sub02 .card_list .hover {
position: absolute;left: 0;top: 0;z-index: 1;opacity: 0;
display: flex;flex-direction: column;align-items: center;justify-content: space-between;
width: 100%;height: 100%;
background: rgba(78, 63, 59, 0.70);
backdrop-filter: blur(20px);
padding: 36px 0;
transition: z-index 0.2s ease, opacity 0.3s linear;
will-change: opacity;
}
.section06 .sub_set .sub02 .card_list .item:hover .hover {opacity: 1;}
.section06 .sub_set .sub02 .card_list .hover .li_tit {background: #fff;}
.section06 .sub_set .sub02 .card_list .hover .txt {color: #fff;}
.section06 .sub_set .sub02 .card_list .hover .link {display: flex;justify-content: center;align-items: center;gap: 28px;padding-bottom: 5px;border-bottom: 3px solid #FFA184;}
.section06 .sub_set .sub02 .card_list .hover .link .txt {color: #FFA184;}
.section06 .sub_set .sub02 .card_list .hover .link .arr {width: 21px;aspect-ratio: 1/1;background: url('data:image/svg+xml,') no-repeat center center;background-size: contain;}
/* 첫번째 페이드인 */
.section06 .sec_tit {opacity: 0;transition: all 0.3s 0.3s linear;}
.section06.show .sec_tit {opacity: 1;transition: all 0.3s linear;}
/* 두번째 페이드인 */
.section06 .sub_set .sub01 .sub_in {opacity: 0;transition: all 0.3s 0.3s linear;}
.section06.show .sub_set .sub01 .sub_in {opacity: 1;transition: all 0.3s 0.3s linear;}
/* 세번째 페이드인 */
.section06 .sub_set .sub01 .circle_set .cc_in {opacity: 0;transition: all 0.3s 0.3s linear;}
.section06.show .sub_set .sub01 .circle_set .cc_in {opacity: 1;transition: all 0.3s 0.7s linear;}
/*스크롤 시 콘텐츠 전환*/
.section06[data-no="1"] .sub_set .sub01,
.section06[data-no="2"] .sub_set .sub02 {z-index: 1;opacity: 1;}
/* section07 */
.section07 {position:relative;z-index: 1;height: 929px;background: #fffaf6 url("../images/sec07_bg@2x.png") no-repeat center center;background-size: 3000px 100%;padding: 110px 0 0;overflow: hidden;}
.section07 .in {}
.section07 .tit_set {position:relative;z-index: 1;text-align: center;margin: 0 0 28px;}
.section07 .tit_set p {color: #0C0C0C;font-family: 'NanumSquareRound';font-size: 30px;font-weight: 400;line-height: 51px;letter-spacing: -0.03em;margin: 0 0 14px;opacity: 0;transition: all 0.5s ease;}
.section07 .tit_set p em {font-family: 'NanumSquareRoundEB';font-weight: 800;}
.section07 .tit_set h3 {opacity: 0;transition: all 0.5s ease;}
.section07.show .tit_set p {opacity: 1;transition: all 0.5s ease;}
.section07.show .tit_set h3 {opacity: 1;transition: all 0.5s 0.2s ease;}
.section07 .ani_set {position: relative;z-index: 0;height: 374px;}
.section07 .ani_set .gradient {position: absolute;left: 50%;top: -87px;z-index:0;width: 521px;aspect-ratio: 1/1;transform: translateX(-50%);}
.section07 .ani_set .gradient::after {
content:'';display: block;width: 100%;height: 100%;
background: radial-gradient(50% 50% at 50% 50%, #FF998B 16.31%, rgba(255, 216, 208, 0.00) 100%);
transform: scale(0.4);opacity: 0;
border-radius: 521px;
will-change: opacity;
}
@keyframes gradient_ani {
0% {transform: scale(0.4);opacity: 0;}
40% {opacity: 1;}
100% {transform: scale(1.5);opacity: 0;}
}
.section07 .ani_set .heart {
position: absolute;left: 50%;top: 0;z-index: 1;
width: 1920px;aspect-ratio: 1920/597;
background: url("../images/sec07_heart_sprites.png") 0 0 no-repeat;
background-size: auto 100%;
transform: translateX(-50%);
margin: -110px 0 0;
}
@keyframes heart_ani {
0% {background-position: 0;}
50% {background-position: 100%;}
100% {background-position: 0;}
}
.section07.show .ani_set .gradient::after {animation: gradient_ani 1.4s infinite;}
.section07.show .ani_set .heart {animation: heart_ani steps(37) 2.6s infinite both;}
/* section08 */
.section08 {position:relative;height: 1658px;background: linear-gradient(180deg, #FFFAF6 34.9%, #FFE3C9 100%);padding: 190px 0 0;margin: -88px 0 0;overflow: hidden;}
.section08 .in {}
.section08 .sec_tit {text-align: center;margin: 0 0 50px;}
.section08 .video_set {max-width: 1080px;}
.section08 .card_set {position: relative;max-width: 540px;margin: 105px auto 0;}
.section08 .card_set .slick-list {overflow: visible;}
.section08 .card_set .item {opacity: 0.5;
width: 540px;height: 450px;
display: flex;flex-direction: column;align-items: center;justify-content: space-between;
background: #FFFDF8 url("../images/sec08_card_bg@2x.png") no-repeat center bottom 60px;
background-size: contain;
border-radius: 40px;
box-shadow: 0 8px 40px 0 rgba(248, 212, 185, 0.44);
padding: 50px;
margin: 0 12px;
transition: all 0.3s ease;
}
.section08 .card_set p {color: #5A443A;text-align: center;}
.section08 .card_set p:first-child {display: flex;justify-content: center;align-items: center;height: 190px;}
.section08 .card_set p:last-child {color: #836F67;}
.section08 .card_set .item.slick-active-m,
.section08 .card_set .item.slick-active-m-prev,
.section08 .card_set .item.slick-active-m-next {opacity: 1;}
.section08 .card_set .slick-dots {display: flex;align-items: center;justify-content: center;gap: 20px;margin: 30px 0 0;}
.section08 .card_set .slick-dots li {font-size: 0;}
.section08 .card_set .slick-dots li button {width: 12px;aspect-ratio: 1/1;background:#FFFAF6;border-radius:100%;transition: all 0.3s ease;}
.section08 .card_set .slick-dots li.slick-active button {background: #FF998B;}
.section08 .card_set .slick-arrow {
position: absolute;top: 50%;z-index: 1;
width: 70px;height: auto;aspect-ratio: 1/1;
background: #fff;
border-radius: 100%;
box-shadow: 0 3.5px 17.5px rgba(240, 187, 171, 0.80);
transform: translateY(calc(-50% - 25px));
transition: all 0.3s ease;
font-size: 0;
}
.section08 .card_set .slick-prev {left: -45px;}
.section08 .card_set .slick-next {right: -45px;}
.section08 .card_set .slick-arrow::after {content:'';position: absolute;left: 0;top: 0;z-index: 0;width: 100%;height: 100%;background: url('data:image/svg+xml,') no-repeat left 26px center;background-size: 24px auto;}
.section08 .card_set .slick-prev::after {transform: rotate(180deg);}
.section08 .card_set .slick-disabled {opacity: 0;}
/* section09 */
.section09 {position:relative;background: #FFDED3 url("../images/sec09_bg@2x.png") no-repeat center top;background-size: 3000px 100%;padding: 447px 0 151px;overflow: hidden;}
.section09 .in {}
.section09 .top_set {margin: 0 0 520px;}
.section09 .top_set .tit_set {text-align: center;}
.section09 .top_set .tit_set .sec_tit {}
.section09 .top_set .tit_set .sec_tit .txt_bg::after {height: 70px;padding: 0 10px;background: #fff;border-radius: 20px;}
.section09 .sticker_set {}
.section09 .sticker_set .sticker {position: absolute;z-index: 1;will-change: opacity, transform;}
.section09 .top_set .left {position: absolute;right: calc(50% + 297px);top: 322px;z-index: 0;}
.section09 .top_set .left .photo {width: 308px;aspect-ratio: 308/456;background: url("../images/sec09_photo01@2x.png") no-repeat center center;background-size: contain;}
/* Heart to Heart */
.section09 .top_set .left .sticker_set .stc01 {
left: calc(50% - 160px);bottom: calc(50% + 220px);
width: 259px;aspect-ratio: 903/319;
background-image: url("../images/sec09_left_stc01_sprites.png");background-size: auto 100%;
transform: rotate(-6deg);
}
/* 라인 하트 */
.section09 .top_set .left .sticker_set .stc02 {
right: calc(50% + 104px);bottom: calc(50% - 61px);z-index: -1;
width: 267px;aspect-ratio: 700/287;
background-image: url("../images/sec09_left_stc02_sprites.png");background-size: auto 100%;
transform: rotate(-10deg);
}
/* 심장이 캐릭터 */
.section09 .top_set .left .sticker_set .stc03 {
left: calc(50% + 7px);top: calc(50% + 90px);
width: 239px;aspect-ratio: 650/898;
background-image: url("../images/sec09_left_stc03_sprites.png");background-size: auto 100%;
transform: rotate(-10deg);
}
.section09 .top_set .right {position: absolute;left: calc(50% + 247px);top: 360px;z-index: 0;}
.section09 .top_set .right .photo {width: 461px;aspect-ratio: 461/622;background: url("../images/sec09_photo02@2x.png") no-repeat center center;background-size: contain;}
/* 심장이 캐릭터 */
.section09 .top_set .right .sticker_set .stc01 {
right: calc(50% + 25px);bottom: calc(50% + 200px);
width: 200px;aspect-ratio: 490/659;
background-image: url("../images/sec09_right_stc01_sprites.png");background-size: auto 100%;
}
/* 라인 하트 */
.section09 .top_set .right .sticker_set .stc02 {
left: calc(50% + 88px);top: calc(50% + 79px);z-index: -1;
width: 230px;aspect-ratio: 621/413;
background-image: url("../images/sec09_right_stc02_sprites.png");background-size: auto 100%;
transform: rotate(16deg);
}
/* I heart YOU */
.section09 .top_set .right .sticker_set .stc03 {
right: calc(50% + 142px);top: calc(50% + 129px);
width: 232px;aspect-ratio: 509/440;
background-image: url("../images/sec09_right_stc03_sprites.png");background-size: auto 100%;
transform: rotate(7deg);
}
@keyframes sec09_sticker_ani {
0% {background-position: 0;}
100% {background-position: 100%;}
}
.section09.show .top_set .left .sticker_set .stc01 {animation: sec09_sticker_ani steps(99) 3s infinite both;animation-iteration-count: 1;}
.section09.show .top_set .left .sticker_set .stc02 {animation: sec09_sticker_ani steps(39) 1.5s infinite both;}
.section09.show .top_set .left .sticker_set .stc03 {animation: sec09_sticker_ani steps(59) 2s infinite both;}
.section09.show .top_set .right .sticker_set .stc01 {animation: sec09_sticker_ani steps(119) 3.5s infinite both;}
.section09.show .top_set .right .sticker_set .stc02 {animation: sec09_sticker_ani steps(99) 3s infinite both;}
.section09.show .top_set .right .sticker_set .stc03 {animation: sec09_sticker_ani steps(39) 1.5s infinite both;}
.section09 .bottom_set {width: 100%;max-width: 1440px;background: rgba(255, 255, 255, 0.34);box-shadow: 0 0 123px 0 rgba(255, 132, 105, 0.30);backdrop-filter: blur(15px);border-radius: 60px;margin: 0 auto;padding: 75px 50px 46px;text-align: center;}
.section09 .bottom_set .tit_set {margin: 0 0 58px;}
.section09 .bottom_set .tit_set .eng {width: 276px;aspect-ratio: 276/34;background: url("../images/sec09_how_tit@2x.png") no-repeat center center;background-size: contain;margin: 0 auto 3px;}
.section09 .bottom_set .tit_set p {}
.section09 .how_list {display: flex;justify-content: center;gap: 19px;}
.section09 .how_list .item {width: 320px;}
.section09 .how_list .item .num {display: inline-block;color: #836F67;font-size: 22px;font-weight: 700;line-height: 36px;letter-spacing: -0.02em;padding: 0 13px;border-radius: 19px;background: #fff;}
.section09 .how_list .item .img {width: 100%;aspect-ratio: 320/500;background: no-repeat center top;background-size: cover;margin: 23px 0 28px;}
.section09 .how_list .item01 .img {background-image: url("../images/sec09_how_card01@2x.png");}
.section09 .how_list .item02 .img {background-image: url("../images/sec09_how_card02@2x.png");}
.section09 .how_list .item03 .img {background-image: url("../images/sec09_how_card03@2x.png");}
.section09 .how_list .item04 .img {background-image: url("../images/sec09_how_card04@2x.png");}
.section09 .how_list .item .txt {display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 96px;}
.section09 .dl_set {display: inline-block;background: rgba(255,255,255,0.6);border-radius: 31px;padding: 23px 186px;margin: 28px 0 0;}
.section09 .dl_set .set_in {min-width: 433px;}
.section09 .dl_set dl {display: flex;text-align: left;}
.section09 .dl_set dt {flex: 0 0 165px;color: #0C0C0C;font-size: 22px;font-weight: 700;line-height: 40px;letter-spacing: -0.02em;}
.section09 .dl_set dd {flex: 1 1 auto;color: #0C0C0C;}
.section09 .dl_set .caption {position: relative;display: inline-block;color: #B2ABA9;text-align: center;padding-left: 15px;margin: 2px 0 0;}
.section09 .dl_set .caption::before {content:'';position: absolute;left: 0;top: 50%;z-index: 0;width: 7px;aspect-ratio: 1/1;background: url('data:image/svg+xml,') no-repeat center center;background-size: contain;transform: translateY(-50%);}
/* section10 */
.section10 {position:relative;height: 960px;background: #F4EBE6 url("../images/sec10_bg@2x.jpg") no-repeat center center;background-size: 3000px 100%;overflow: hidden;}
.section10 .in {display: flex;flex-direction: column;justify-content: center;height: 100%;max-width: 1440px;margin: 0 auto;padding: 0 0 0 100px;}
.section10 .tit_set {margin: 0 0 0 24px;}
.section10 .tit_set .sec_tit {}
.section10 .btn_set {margin: 50px 0 10px;}
.section10 .btn_set .btn {
display: flex;justify-content: space-between;align-items: center;
width: 424px;
background: #FF5A4F;
box-shadow: 0 0 20px 0 rgba(255, 218, 203, 0.50);
border-radius: 100px;
padding: 26px 45px 26px 59px;
}
.section10 .btn_set .btn .txt {color: #fff;}
.section10 .btn_set .btn .txt .bold {font-weight: 900;}
.section10 .btn_set .btn .arr {width: 35px;aspect-ratio: 35/54;background: url('data:image/svg+xml,') no-repeat center center;background-size: contain;}
/* section11 */
.section11 {background: linear-gradient(180deg, #D4B0A1 0, #C7B5AE 100%);padding: 136px 0 160px;}
.section11 .faq_set {max-width: 1080px;margin: 0 auto;}
.section11 .faq_set:after {content:'';display:block;clear:both;}
/* 메뉴 */
.section11 .tab_menu {display: flex;justify-content: space-between;gap: 20px;margin-bottom: 40px;}
.section11 .tab_menu li {position: relative;flex: 1 1 auto;text-align: center;background: #F1D5CE;border-radius: 50px;overflow: hidden;}
.section11 .tab_menu li:nth-child(1) {flex: 0 0 180px;}
.section11 .tab_menu li input[type="radio"] {position:absolute;top:0;left:0;opacity:0;}
.section11 .tab_menu li input[type="radio"] + label {display:block;color: #0C0C0C;line-height: 70px;cursor:pointer;transition: all 0.3s ease;}
.section11 .tab_menu li input[type="radio"]:checked + label {color: #fff;background: #FF5A4F;}
/* 리스트 */
.section11 .tab_list,
.section11 .tab_list ul {display: flex;flex-direction: column;gap: 20px;}
.section11 .tab_list > ul {display:none;}
.section11 .tab_list[data-tab="tab_all"] ul.tab_all,
.section11 .tab_list[data-tab="heart"] ul.heart,
.section11 .tab_list[data-tab="celebrate"] ul.celebrate,
.section11 .tab_list[data-tab="event"] ul.event {display: flex;}
.section11 .tab_list li {background:#fff;border-radius:20px;padding: 0 35px;overflow:hidden;}
.section11 .tab_list .head {}
.section11 .tab_list .head button {
position:relative;width: 100%;height: 90px;
display:flex;justify-content: space-between;align-items: center;
color:#3A3A3A;font-weight:600;text-align: left;
transition: all 0.3s ease;
}
.section11 .tab_list .head button:after {
content:'';
display: block;
width:30px;height:30px;
background-color: #BDBDBD;
-webkit-mask: url('data:image/svg+xml,') no-repeat center center;
-webkit-mask-size: auto 17px;
transform-origin:center center;
transform: rotate(0);
transition: all 0.3s ease;
}
.section11 .tab_list .body {position:relative;max-height:0;overflow:hidden;transition: all 0.3s ease;}
.section11 .tab_list .body .inner {}
.section11 .tab_list .body p {color:#2C2C2C;font-weight:500;font-size:18px;line-height:32px;letter-spacing:-0.02em;padding: 25px 0 30px;border-top:1px solid #E3E3E3;}
.section11 .tab_list .body p a {display:inline;}
.section11 .tab_list .head.show button {height: 85px;font-weight: 700;}
.section11 .tab_list .head.show button:after {
background-color: #FF5A4F;
transform: rotate(180deg);
}
.section11 .tab_list .head.show + .body {max-height:500px;}
/* footer */
.footer {position:relative;height:320px;text-align:center;background:#3C3C3C;padding: 73px 0 0;}
.footer .in {display:flex;align-items: flex-start;justify-content:space-between;max-width: 1098px;margin: 0 auto;padding-right: 18px;text-align:left;}
.footer .f_logo {width:218px;aspect-ratio: 218/60;background:url("../images/f_logo@2x.png") no-repeat center center;background-size:contain;margin: 0 0 0 18px;}
.footer .address {color:#fff;font-weight:400;font-size:18px;line-height:31px;letter-spacing:-0.04em;margin: 1px 0 31px;}
.footer .address span {display:block;}
.footer .address a {display:inline;}
.footer .copyright {color:#A3A3A3;font-weight:500;font-size:18px;line-height:31px;letter-spacing:-0.04em;text-transform:uppercase;}
@media all and (max-width: 1440px) {
.h1 {font-size: 52px;line-height: 66px;}
.h2 {font-size: 44px;line-height: 58px;}
.h3 {font-size: 40px;line-height: 56px;}
.h4 {font-size: 36px;line-height: 46px;}
.h5 {font-size: 30px;line-height: 46px;}
.body_main {font-size: 32px;line-height: 48px;}
.sub_tit1 {font-size: 24px;line-height: 30px;}
.sub_tit2 {font-size: 22px;line-height: 38px;}
.sub_tit3 {font-size: 20px;line-height: 32px;}
.body1 {font-size: 18px;line-height: 30px;}
.body1.bold {font-weight: 700;line-height: 30px;}
.body2 {font-size: 16px;line-height: 27px;}
.caption {font-size: 14px;line-height: 26.4px;}
.btn_txt {font-size: 20px;line-height: 29px;}
.wrap_fixed .sticky_set {bottom: 50px;}
.wrap_fixed .sticky_set .btn_sticky {width: 318px;height: 100px;padding: 0 24px 0 39px;}
.wrap_fixed .sticky_set .btn_sticky .arr {width: 28px;}
.section_visual::before {width: 66%;background: linear-gradient(-90deg, rgba(255, 227, 227, 0.00) 6.31%, #FEFAFA 68.28%);}
.section_visual::after {height: 260px;background-position: center top 30px;}
.section_visual .tit_set {left: 8.33vw;margin-top: -35px;}
.section_visual .tit_set .eyebrow_txt {width: 319px;font-size: 22px;line-height: 38px;border-radius: 26px;backdrop-filter: blur(16px);margin: 0 auto 20px;}
.section_visual .tit_set .sec_tit {height: 48.125vh;}
.section_visual .scroll_cursor {bottom: 77px;gap: 8px;filter: drop-shadow(0 0 8px #808080);}
.section_visual .scroll_cursor .icon {width:12px;height:18px;border-radius:8px;}
.section_visual .scroll_cursor .txt {font-size:15px;line-height: 18px;}
.section_visual .scroll_cursor .icon::after {height:3px;animation:scroll_ani_cursor 1.5s ease-in-out infinite;}
@keyframes scroll_ani_cursor {
0% {top:3px;}
50% {top:calc(100% - 3px - 3px);}
100% {top:3px;}
}
.wrap_fixed .logo_set.icon .logo {width: 115px;}
.wrap_fixed .logo_set.txt .logo {width: 141px;aspect-ratio: 140/39;}
.wrap_fixed .logo_set.txt .logo::before,
.wrap_fixed .logo_set.txt .logo::after {background: url("../images/logo_txt_sprites_1440@2x.png") no-repeat left -11px center;background-size: auto 59px;}
.wrap_fixed .logo_set.txt .logo::before {background-position: left -11px center;}
.wrap_fixed .logo_set.txt .logo::after {background-position: left -161px center;}
.section01 {height: 1537px;background-image: url("../images/sec01_bg_1440@2x.png");background-size: cover;}
.section01 .img_set .li01 {right: calc(50% + 50px);top: 127px;}
.section01 .img_set .li02 {left: calc(50% + 224px);top: 229px;}
.section01 .img_set .li02::after {width: 267px;}
.section01 .img_set .li03 {right: calc(50% + 227px);top: 349px;}
.section01 .img_set .li04 {left: calc(50% + 319px);top: 605px;}
.section01 .img_set .li05 {left: calc(50% + 186px);top: 856px;}
.section01 .img_set .li06 {right: calc(50% + 369px);top: 920px;}
.section01 .img_set .li07 {right: calc(50% + 225px);top: 1002px;}
.section01 .img_set .li01 .img {width: 248px;}
.section01 .img_set .li02 .img {width: 173px;}
.section01 .img_set .li03 .img {width: 330px;}
.section01 .img_set .li04 .img {width: 231px;}
.section01 .img_set .li05 .img {width: 313px;}
.section01 .img_set .li06 .img {width: 148px;}
.section01 .img_set .li07 .img {width: 198px;}
.section01 .img_set li p {top: calc(100% + 10px);}
.section01 .history_set {top: 474px;gap: 44px;}
.section01 .history_set .y1984 {width: 245px;}
.section01 .history_set .y2024 {width: 256px;}
.section01 .history_set .line_set {width: 105px;}
.scroll_ani_wrapper .scroll_line_set {left: calc(50% - 573px);top: 1521px;}
.scroll_ani_wrapper .line_heart.pc1920 {display: none;}
.scroll_ani_wrapper .line_heart.pc1440 {display: block;}
.scroll_ani_wrapper .circle .cc01 {left: calc(50% + 506px);top: 178px;width: 8px;}
.scroll_ani_wrapper .circle .cc02 {left: calc(50% + 398px);top: 252px;}
.scroll_ani_wrapper .circle .cc03 {left: calc(50% + 102px);top: 900px;width: 16px;}
.scroll_ani_wrapper .circle .cc04 {left: calc(50% + 38px);top: 1020px;width: 10px;}
.scroll_ani_wrapper .circle .cc05 {right: calc(50% + 570px);top: 1650px;width: 16px;}
.scroll_ani_wrapper .circle .cc06 {left: calc(50% - 454px);top: 1753px;width: 10px;}
.scroll_ani_wrapper .circle .cc07 {left: calc(50% + 45px);top: 1913px;width: 14px;}
.scroll_ani_wrapper .circle .cc01::after {background: #FEE8D5;}
.scroll_ani_wrapper .circle .cc02::after {background: #FAAD9D;}
.scroll_ani_wrapper .circle .cc03::after {background: #FED3C1;opacity: 1;}
.scroll_ani_wrapper .circle .cc04::after {background: #FCB8A9;opacity: 1;}
.scroll_ani_wrapper .circle .cc05::after {background: #FEC9AE;}
.scroll_ani_wrapper .circle .cc06::after {background: #FDBBA5;}
.scroll_ani_wrapper .circle .cc07::after {background: #FCB19D;}
.scroll_ani_wrapper .name_set {
box-shadow: 0 0 18px 0 rgba(232, 207, 207, 0.70);
backdrop-filter: blur(13px);
border-radius: 70px;
padding: 12px 32px;
}
.scroll_ani_wrapper .name_set p {font-size: 21px;line-height: 28px;}
.scroll_ani_wrapper .name_set strong {font-size: 21px;line-height: 28px;}
.scroll_ani_wrapper .btn_interview {gap: 14px;padding: 6px 15px;}
.scroll_ani_wrapper .btn_interview .arr {width: 7px;}
.scroll_ani_wrapper .name_set.sec02 {left: calc(50% - 35px);top: 2104px;}
.section_ani .bg_set_ani {width: 1440px;}
.section_ani .bg_set_ani .bg .block {width: 1440px;}
.section_ani .tit_set h4::after {
top: auto;left: 50%;transform: translateX(-50%);
height: 82px;background: #fff;border-radius: 72px;
}
.section02 {height: 850px;background: url("../images/sec02_bg_1440@2x.png") no-repeat center center;background-size: cover;}
.section02 .bg_set_ani .bg .block {background-image: url("../images/sec02_person_bg_1440@2x.png");}
.section02 .tit_set {right: calc(50% + 222px);top: 286px;}
.section02 .tit_set h4 {width: 328px;}
.section02 .tit_set h4::after {width: 333px;bottom: -3px;transform: translateX(calc(-50% + 10px));}
.section02 .tit_set p {margin: 24px 0 0 31px;}
.section02 .img_set {left: calc(50% - 30px);top: 74px;}
.section02 .img_set .photo {width: 579px;aspect-ratio: 579/699;border-radius: 0 0 278px 278px;}
.section02 .img_set .photo::after {background-image: url("../images/sec02_img_1440@2x.png");}
.section02 .name_set {left: -5px;bottom: 70px;}
.section03 {height: 850px;background: url("../images/sec03_bg_1440@2x.png") no-repeat center center;background-size: cover;}
.section03 .bg_set_ani .bg .block {background-image: url("../images/sec03_person_bg_1440@2x.png");}
.section03 .tit_set {left: calc(50% + 99px);top: 270px;}
.section03 .tit_set h4 {width: 436px;}
.section03 .tit_set h4::after {width: 445px;bottom: -7px;transform: translateX(calc(-50% + 4px));}
.section03 .tit_set p {margin: 27px 0 0 26px;}
.section03 .img_set {right: calc(50% - 59px);top: 81px;}
.section03 .img_set .photo {width: 642px;aspect-ratio: 642/703;border-radius: 0 0 311px 309px;}
.section03 .img_set .photo::after {background-image: url("../images/sec03_img_1440@2x.png");}
.section03 .name_set {right: -22px;bottom: 127px;}
.section04 {height: 847px;}
.section04 .bg_set_ani .bg .block {background-image: url("../images/sec04_person_bg_1440@2x.png");}
.section04 .tit_set {right: calc(50% + 84px);top: 260px;}
.section04 .tit_set h4 {width: 466px;}
.section04 .tit_set h4::after {width: 466px;bottom: -3px;transform: translateX(calc(-50% + 5px));}
.section04 .tit_set p {margin: 22px 0 0 32px;}
.section04 .img_set {left: calc(50% - 16px);top: 71px;}
.section04 .img_set .photo {width: 564px;aspect-ratio: 564/664;border-radius: 0 0 276px 275px;}
.section04 .img_set .photo::after {background-image: url("../images/sec04_img_1440@2x.png");}
.section04 .name_set {left: -56px;bottom: 128px;}
.section05 {height: 948px;padding: 190px 0 0;}
.section05 .video_set {max-width: 1080px;}
.section45_bg {background: #FFB78F url("../images/sec45_bg_1440@2x.png") no-repeat center top;background-size: 100% auto;}
.section06 {}
.section06 .sticky_in {background-image: url("../images/sec06_bg_1440@2x.png");background-size: 1440px auto;}
.section06 .inner {margin-bottom: 35px;}
.section06 .sec_tit {margin-left: 33px;}
.section06 .txt_bg::after {height: 50px;border-radius: 14px;}
.section06 .sub_set {height: 390px;}
.section06 .sub_set .sub01 {margin: 54px 0 0 52px;}
.section06 .sub_set .sub01 .left::after {width: auto;height: 471px;top: -7px;right: 106px;}
.section06 .sub_set .sub01 .left .circle_set {width: 254px;}
.section06 .sub_set .sub01 .right::after {width: auto;height: 826px;left: 151px;bottom: -2px;}
.section06 .sub_set .sub01 .right .circle_set {width: 332px;}
.section06 .sub_set .sub01 .center {margin: 0 30px 0 40px;}
.section06 .sub_set .sub01 .center em {font-size: 28px;line-height: 48px;}
.section06 .sub_set .sub01 .center .img {width: 10px;height: 70px;margin: 6px auto;}
.section06 .sub_set .sub01 .circle_set .cc_in {margin: 14px 0 0;}
.section06 .sub_set .sub01 .circle_set p {margin: 0 0 5px;}
.section06 .sub_set .sub01 .right .circle_set strong em {letter-spacing: -0.07em;}
.section06 .sub_set .sub02 {margin: 54px 0 0;}
.section06 .sub_set .sub02 .card_list {gap: 14px;}
.section06 .sub_set .sub02 .card_list .item {width: 240px;height: 315px;border-radius: 30px;padding: 24px 0;}
.section06 .sub_set .sub02 .card_list .li_tit {font-size: 20px;line-height: 32px;border-radius: 81px;padding: 2px 15px;}
.section06 .sub_set .sub02 .card_list .hover {padding: 24px 0 30px;}
.section06 .sub_set .sub02 .card_list .hover .li_tit {margin: 0 0 6px;}
.section06 .sub_set .sub02 .card_list .hover .link {gap: 25px;border-width: 2px;padding-bottom: 2px;}
.section06 .sub_set .sub02 .card_list .hover .link .arr {width: 17px;}
.section07 {height: 687px;background-image: url("../images/sec07_bg_1440@2x.png");background-size: cover;padding: 37px 0 0;}
.section07 .tit_set {margin: 0 0 50px;}
.section07 .tit_set p {font-size: 25px;line-height: 38px;margin: 0 0 13px;}
.section07 .ani_set .gradient {width: 406px;}
.section07 .ani_set .heart {width: auto;height: 450px;margin-top: -83px;}
.section08 {height: 1298px;padding: 150px 0 0;margin: -67px 0 0;}
.section08 .video_set {max-width: 843px;}
.section08 .card_set {max-width: 412px;margin-top: 68px;}
.section08 .card_set .item {width: 412px;height: 362px;padding: 30px 30px 35px;margin: 0 9px;background-position: center bottom 53px;border-radius: 31px;}
.section08 .card_set p:first-child {height: 170px;}
.section08 .card_set .slick-dots {gap: 15px;margin: 24px 0 0;}
.section08 .card_set .slick-dots li button {width: 9px;}
.section08 .card_set .slick-arrow {
width: 64px;
box-shadow: 0 3.2px 16px rgba(240, 187, 171, 0.80);
transform: translateY(calc(-50% - 15px));
}
.section08 .card_set .slick-arrow::after {background-size: 22px auto;background-position: left 24px center;}
.section08 .card_set .slick-prev {left: -40px;}
.section08 .card_set .slick-next {right: -40px;}
.section09 {background-image: url("../images/sec09_bg_1440@2x.png");background-size: cover;padding: 280px 0 85px;}
.section09 .top_set {margin: 0 0 390px;}
.section09 .top_set .tit_set .sec_tit .txt_bg::after {height: 55px;border-radius: 15px;}
.section09 .top_set .left {right: calc(50% + 225px);top: 199px;}
.section09 .top_set .left .photo {width: 238px;}
/* Heart to Heart */
.section09 .top_set .left .sticker_set .stc01 {left: calc(50% - 131px);bottom: calc(50% + 177px);width: 199px;}
/* 라인 하트 */
.section09 .top_set .left .sticker_set .stc02 {right: calc(50% + 91px);bottom: calc(50% - 41px);width: 203px;}
/* 심장이 캐릭터 */
.section09 .top_set .left .sticker_set .stc03 {left: calc(50% + 1px);top: calc(50% + 63px);width: 185px;}
.section09 .top_set .right {left: calc(50% + 192px);top: 221px;}
.section09 .top_set .right .photo {width: 367px;}
/* 심장이 캐릭터 */
.section09 .top_set .right .sticker_set .stc01 {right: calc(50% + 25px);bottom: calc(50% + 162px);width: 156px;}
/* 라인 하트 */
.section09 .top_set .right .sticker_set .stc02 {left: calc(50% + 67px);top: calc(50% + 57px);width: 177px;}
/* I heart YOU */
.section09 .top_set .right .sticker_set .stc03 {right: calc(50% + 115px);top: calc(50% + 96px);width: 182px;}
.section09 .bottom_set {max-width: 1123px;border-radius: 47px;box-shadow: 0 0 96px 0 rgba(255, 132, 105, 0.30);backdrop-filter: blur(12px);padding: 62px 40px 41px;}
.section09 .bottom_set .tit_set {margin: 0 0 45px;}
.section09 .bottom_set .tit_set .eng {width: 218px;margin: 0 auto 2px;}
.section09 .how_list {gap: 15px;}
.section09 .how_list .item {width: 250px;}
.section09 .how_list .item .num {font-size: 18px;line-height: 27px;padding: 0 10px;border-radius: 14px;}
.section09 .how_list .item .img {margin: 19px 0;}
.section09 .how_list .item .txt {height: 81px;}
.section09 .dl_set {margin-top: 33px;padding: 16px 226px;}
.section09 .dl_set dt {flex: 0 0 135px;font-size: 18px;line-height: 30px;}
.section09 .dl_set .set_in {min-width: 352px;}
.section09 .dl_set .caption {margin: 11px 0 0;padding-left: 10px;}
.section09 .dl_set .caption::before {font-size: 15px;}
.section10 {height: 749px;background-size: cover;}
.section10 .in {max-width: 998px;padding: 0;}
.section10 .tit_set {margin: 0 0 0 18px;}
.section10 .btn_set {margin: 37px 0 0;}
.section10 .btn_set .btn {width: 340px;border-radius: 78px;box-shadow: 0 0 16px 0 rgba(255, 218, 203, 0.50);padding: 21px 40px 21px 46px;}
.section10 .btn_set .btn .txt {}
.section10 .btn_set .btn .arr {width: 28px;}
.section11 {padding: 100px 0 105px;}
.section11 .faq_set {max-width: 1000px;}
.section11 .tab_menu {margin-bottom: 37px;}
.section11 .tab_menu li:nth-child(1) {flex: 0 0 167px;}
.section11 .tab_menu li input[type="radio"] + label {line-height: 65px;}
.section11 .tab_list,
.section11 .tab_list ul {gap: 19px;}
.section11 .tab_list li {padding: 0 30px;}
.section11 .tab_list .head button {height: 80px;}
.section11 .tab_list .head.show button {height: 75px;}
.section11 .tab_list .body p {color: #0C0C0C;font-size: 16px;line-height: 27px;padding: 17px 0 25px;}
.footer {height:300px;}
.footer .in {max-width: 1060px;padding-right: 28px;}
.footer .f_logo {width:200px;margin: 0;}
.footer .address {font-size:16px;line-height:27px;letter-spacing:-0.02em;margin: 1px 0 34px;}
.footer .copyright {font-size:16px;line-height:27px;letter-spacing:-0.02em;}
}