@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");
html,body {font-size: 2.666666666666667vw;width: 100%;height: 100%;}
.wrap {position: relative;width: 100%;}
/* wrap_fixed */
.wrap_fixed {}
.wrap_fixed .logo_set {position: fixed;top: 0;left: 1.5rem;z-index: -1;opacity: 0;transition: all 0.3s ease;}
.wrap_fixed .logo_set.show {opacity: 1;z-index: 200;}
.wrap_fixed .logo_set a {position: relative;width: 9.9rem;aspect-ratio: 99/61;background: #fff url("../images/logo@2x.png") no-repeat left center;background-size: contain;}
.wrap_fixed .sticky_set {position: fixed;left: 0;bottom: 2.5rem;z-index: -1;opacity: 0;width: 100%;padding: 0 2.5rem;transform: translateY(calc(100% + 3rem));transition: all 0.3s ease;}
.wrap_fixed .sticky_set.show {opacity: 1;z-index: 200;transform: translateY(0);}
.wrap_fixed .sticky_set .btn_sticky {display: flex;align-items: center;justify-content: center;gap: 3.3rem;width: 100%;height: 7rem;background: #F5D200;}
.wrap_fixed .sticky_set .btn_sticky .txt {display: block;width: 14.4rem;aspect-ratio: 144/24;background: url("../images/sticky_txt.png") no-repeat center center;background-size: contain;}
.wrap_fixed .sticky_set .btn_sticky .arr {display: block;
width: 2.2rem;aspect-ratio: 22/11;
background-color: #000;
-webkit-mask: url('data:image/svg+xml,') no-repeat center center;
-webkit-mask-size: contain;
}
/* wrap_visual */
.section_visual {position: relative;height: 100vh;background: #000;overflow: hidden;}
@supports (height: 100svh) {
.section_visual {height: 100svh;}
.section_visual .key_tit {background-size: 100vw 100svh;}
}
.section_visual .sec_sub {transition: all 0.3s ease;}
.section_visual .sub01 {position: absolute;left: 0;top: 0;display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;}
.section_visual .sub02 {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;}
.section_visual .key_tit {
display: block;height: 49.18vh;max-width: 28.1rem;aspect-ratio: 281/328;margin: 0 auto;
background: url("../images/main_keyvisual_img@2x.jpg") no-repeat center center;
background-size: 100vw 100vh;
-webkit-mask: url("../images/main_keyvisual_tit.svg") no-repeat center center;
-webkit-mask-size: contain;
}
.section_visual .eyebrow_txt {width: 22.79vh;aspect-ratio: 152/22;background: url("../images/main_sub_tit@2x.png") no-repeat center center;background-size: contain;margin: -6.75vh auto 0;}
.section_visual .sec_tit {position: relative;z-index: 1;width: 50.97vh;max-width: 34rem;aspect-ratio: 340/89;background: url("../images/main_title@2x.png") no-repeat center center;background-size: contain;margin: 0 auto;}
.section_visual .img_slide {width: 28.34vh;aspect-ratio: 189/265;margin: 6vh auto 6.3vh;}
.section_visual .img_slide .slick-list {overflow: visible;}
.section_visual .img_slide .item {width: 28.34vh;height: 39.73vh;background: no-repeat center center;background-size: cover;margin: 0.25rem;transform: scale(0.9);transition: all 0.3s ease;}
.section_visual .img_slide .slick-current .item {transform: scale(1);}
.section_visual .img_slide .item01 {width: 31.48vh;background-image: url("../images/main_img01@2x.jpg");}
.section_visual .img_slide .item02 {width: 31.48vh;background-image: url("../images/main_img02@2x.jpg");}
.section_visual .img_slide .item03 {background-image: url("../images/main_img03@2x.jpg");}
.section_visual .img_slide .item04 {background-image: url("../images/main_img04@2x.jpg");}
.section_visual .img_slide .item05 {background-image: url("../images/main_img05@2x.jpg");}
/* show */
.section_visual .sub01 {opacity: 1;z-index: 1;}
.section_visual .sub02 {opacity: 0;z-index: -1;transition: all 0.3s ease;}
.section_visual .key_tit {opacity: 1;transition: all 0.5s ease;}
.section_visual.show .key_tit {opacity: 0;height: 100%;max-width: unset;transition: all 0.5s ease, opacity 0.3s 0.2s ease;}
.section_visual.show .sub01 {opacity: 0;z-index: -1;transition: all 0.3s 0.5s ease;}
.section_visual.show .sub02 {opacity: 1;z-index: 1;transition: all 0.3s 0.5s ease;}
/* section01 */
.section01 {position: relative;height: 280vh;}
.section01 .section01_inner {position: sticky;top: 0;height: 100vh;}
.section01 .sec_sub {display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;}
.section01 .sub01 {background: #000 url("../images/sec01_sub01_bg@2x.jpg") no-repeat center center;background-size: cover;}
.section01 .sub01 .sec_tit {width: 51.12vh;max-width: 34.1rem;aspect-ratio: 341/334;background: url("../images/sec01_sub01_tit@2x.png") no-repeat center center;background-size: contain;margin: -8.25vh auto 3.75vh 1.65vh;}
.section01 .sub01 .s_txt {position: relative;width: 47.53vh;max-width: 31.7rem;aspect-ratio: 317/110;margin: 0 auto;}
.section01 .sub01 .s_txt::before,
.section01 .sub01 .s_txt::after {content:'';position: absolute;left: 0;top: 0;z-index: 0;width: 100%;height: 100%;background: no-repeat left top;background-size: contain;}
.section01 .sub01 .s_txt::before {background-image: url("../images/sec01_sub01_txt_wh@2x.png");}
.section01 .sub01 .s_txt::after {background-image: url("../images/sec01_sub01_txt_dodge@2x.png");}
.section01 .sub02 {background: #8b7b0a url("../images/sec01_sub02_bg@2x.jpg") no-repeat center center;background-size: cover;}
.section01 .sub02 .sec_tit {width: 56.22vh;max-width: 37.5rem;aspect-ratio: 375/346;background: url("../images/sec01_sub02_tit@2x.png") no-repeat center center;background-size: contain;margin: -6.75vh auto 1.5vh;}
.section01 .sub02 .s_txt {width: 46.93vh;max-width: 31.3rem;aspect-ratio: 313/117;background: url("../images/sec01_sub02_txt@2x.png") no-repeat center center;background-size: contain;margin: 0 auto;}
/* show */
.section01 .sub01 {}
.section01 .sub02 {transform: translateY(0);transition: all 0.5s ease;}
.section01.show .sub02 {transform: translateY(-100%);transition: all 0.5s 0.5s ease;}
/* section02 */
.section02 {}
.section02 .sec_sub {position: relative;background: #00ACCA;}
.section02 .tit_set {position: relative;height: 41rem;padding: 6rem 0 0 1.5rem;overflow: hidden;}
.section02 .tit_set::after {content:'';position: absolute;right: -0.4rem;bottom: 0;z-index: 0;width: 22.7rem;aspect-ratio: 227/175;background: url("../images/sec02_bg_num@2x.png") no-repeat center center;background-size: contain;opacity: 0.1;}
.section02 .tit_set .tit {background: no-repeat left center;background-size: contain;margin-bottom: 3.8rem;}
.section02 .tit_set .txt {background: no-repeat left center;background-size: contain;}
.section02 .keyword_set {position: relative;z-index: 1;height: 25.8rem;padding: 1rem 1.5rem;overflow: hidden;}
.section02 .keyword_set .txt_slide {}
.section02 .keyword_set .txt_slide .slick-list {overflow: visible;}
.section02 .keyword_set .txt_slide .item {height: 8.5rem;display: flex;align-items: center;border-top: 1px solid #fff;transition: border 0.2s 0.3s ease;}
.section02 .keyword_set .txt_slide .slick-current .item {border-color: transparent;}
.section02 .keyword_set .txt_slide .item p {
opacity: 0.5;
background-color: #c1c1c1;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: left center;
-webkit-mask-size: contain;
transition: opacity 0.3s ease, background-color 0.2s ease;
}
.section02 .keyword_set .txt_slide .slick-current .item p {background-color: #fff;opacity: 1;}
.section02 .keyword_set .bg_slide {position: absolute;left: 0;top: 0;z-index: 0;width: 100%;}
.section02 .keyword_set .bg_slide .bg {
width: 100%;height: 25.8rem;
background: no-repeat center top;background-size: cover;
transition: opacity 0.2s ease, z-index 0s 0.1s linear;
}
.section02 .btn_set {position: sticky;top: 1.5rem;right: 0;z-index: 5;}
.section02 .btn_set .btn {
position: absolute;top: 1.5rem;right: 0;z-index: 1;
display: flex;align-items: center;gap: 2.3rem;
width: 18rem;height: 5.6rem;
background: #000;
border-radius: 5.1rem 0 0 5.1rem;
box-shadow: 0 0.204rem 0.204rem 0 rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 0.204rem 0.204rem 0 rgba(0, 0, 0, 0.25);
padding-left: 3.3rem;
transition: all 0.3s ease;
}
.section02 .btn_set .btn .txt {width: 8.3rem;aspect-ratio: 83/13;background: url("../images/sec02_btn_txt@2x.png") no-repeat left center;background-size: contain;}
.section02 .btn_set .btn .arr {width: 2.7rem;aspect-ratio: 27/9;background: url('data:image/svg+xml,') no-repeat left center;background-size: contain;}
.section02 .btn_set .btn.hide {z-index: -1;opacity: 0;}
.section02 .sub01 .tit_set .tit {height: 9rem;aspect-ratio: 165/90;background-image: url("../images/sec02_sub01_tit@2x.png")}
.section02 .sub01 .tit_set .txt {height: 17.3rem;aspect-ratio: 341/173;background-image: url("../images/sec02_sub01_txt@2x.png")}
.section02 .sub01 .keyword_set .txt_slide .item01 p {height: 4.4rem;aspect-ratio: 120/44;-webkit-mask-image: url("../images/sec02_sub01_keyword01@2x.png")}
.section02 .sub01 .keyword_set .txt_slide .item02 p {height: 4.6rem;aspect-ratio: 108/46;-webkit-mask-image: url("../images/sec02_sub01_keyword02@2x.png")}
.section02 .sub01 .keyword_set .txt_slide .item03 p {height: 4.6rem;aspect-ratio: 167/46;-webkit-mask-image: url("../images/sec02_sub01_keyword03@2x.png")}
.section02 .sub01 .keyword_set .txt_slide .item04 p {height: 4.9rem;aspect-ratio: 149/49;-webkit-mask-image: url("../images/sec02_sub01_keyword04@2x.png")}
.section02 .sub01 .keyword_set .txt_slide .item05 p {height: 2.4rem;aspect-ratio: 156/24;-webkit-mask-image: url("../images/sec02_sub01_keyword05@2x.png")}
.section02 .sub01 .keyword_set .txt_slide .item06 p {height: 2.4rem;aspect-ratio: 279/24;-webkit-mask-image: url("../images/sec02_sub01_keyword06@2x.png")}
.section02 .sub01 .keyword_set .bg_slide .bg01 {background-image: url("../images/sec02_sub01_bg01@2x.jpg")}
.section02 .sub01 .keyword_set .bg_slide .bg02 {background-image: url("../images/sec02_sub01_bg02@2x.jpg")}
.section02 .sub01 .keyword_set .bg_slide .bg03 {background-image: url("../images/sec02_sub01_bg03@2x.jpg");background-position: center bottom;}
.section02 .sub01 .keyword_set .bg_slide .bg04 {background-image: url("../images/sec02_sub01_bg04@2x.jpg")}
.section02 .sub01 .keyword_set .bg_slide .bg05 {background-image: url("../images/sec02_sub01_bg05@2x.jpg");background-position: center bottom;}
.section02 .sub01 .keyword_set .bg_slide .bg06 {background-image: url("../images/sec02_sub01_bg06@2x.jpg")}
.section02 .sub02 {background: #006682;}
.section02 .sub02 .tit_set .tit {height: 8.8rem;aspect-ratio: 161/88;background-image: url("../images/sec02_sub02_tit@2x.png")}
.section02 .sub02 .tit_set .txt {height: 17.3rem;aspect-ratio: 275/173;background-image: url("../images/sec02_sub02_txt@2x.png")}
.section02 .sub02 .tit_set::after {opacity: 0.05;}
.section02 .sub02 .keyword_set .txt_slide .item01 p {height: 4.6rem;aspect-ratio: 158/46;-webkit-mask-image: url("../images/sec02_sub02_keyword01@2x.png")}
.section02 .sub02 .keyword_set .txt_slide .item02 p {height: 4.6rem;aspect-ratio: 226/46;-webkit-mask-image: url("../images/sec02_sub02_keyword02@2x.png")}
.section02 .sub02 .keyword_set .txt_slide .item03 p {height: 4.6rem;aspect-ratio: 164/46;-webkit-mask-image: url("../images/sec02_sub02_keyword03@2x.png")}
.section02 .sub02 .keyword_set .txt_slide .item04 p {height: 4.6rem;aspect-ratio: 227/46;-webkit-mask-image: url("../images/sec02_sub02_keyword04@2x.png")}
.section02 .sub02 .keyword_set .txt_slide .item05 p {height: 2.4rem;aspect-ratio: 227/24;-webkit-mask-image: url("../images/sec02_sub02_keyword05@2x.png")}
.section02 .sub02 .keyword_set .txt_slide .item06 p {height: 2.4rem;aspect-ratio: 306/24;-webkit-mask-image: url("../images/sec02_sub02_keyword06@2x.png")}
.section02 .sub02 .keyword_set .bg_slide .bg01 {background-image: url("../images/sec02_sub02_bg01@2x.jpg")}
.section02 .sub02 .keyword_set .bg_slide .bg02 {background-image: url("../images/sec02_sub02_bg02@2x.jpg")}
.section02 .sub02 .keyword_set .bg_slide .bg03 {background-image: url("../images/sec02_sub02_bg03@2x.jpg");background-position: center bottom;}
.section02 .sub02 .keyword_set .bg_slide .bg04 {background-image: url("../images/sec02_sub02_bg04@2x.jpg")}
.section02 .sub02 .keyword_set .bg_slide .bg05 {background-image: url("../images/sec02_sub02_bg05@2x.jpg")}
.section02 .sub02 .keyword_set .bg_slide .bg06 {background-image: url("../images/sec02_sub02_bg06@2x.jpg");background-position: center center;}
.section02 .sub03 .tit_set .tit {height: 8.8rem;aspect-ratio: 178/88;background-image: url("../images/sec02_sub03_tit@2x.png")}
.section02 .sub03 .tit_set .txt {height: 14.8rem;aspect-ratio: 295/148;background-image: url("../images/sec02_sub03_txt@2x.png")}
.section02 .sub03 .keyword_set .txt_slide .item01 p {height: 4.4rem;aspect-ratio: 215/44;-webkit-mask-image: url("../images/sec02_sub03_keyword01@2x.png")}
.section02 .sub03 .keyword_set .txt_slide .item02 p {height: 4.6rem;aspect-ratio: 153/46;-webkit-mask-image: url("../images/sec02_sub03_keyword02@2x.png")}
.section02 .sub03 .keyword_set .txt_slide .item03 p {height: 4.6rem;aspect-ratio: 318/46;-webkit-mask-image: url("../images/sec02_sub03_keyword03@2x.png")}
.section02 .sub03 .keyword_set .txt_slide .item04 p {height: 4.6rem;aspect-ratio: 213/46;-webkit-mask-image: url("../images/sec02_sub03_keyword04@2x.png")}
.section02 .sub03 .keyword_set .txt_slide .item05 p {height: 4.6rem;aspect-ratio: 220/46;-webkit-mask-image: url("../images/sec02_sub03_keyword05@2x.png")}
.section02 .sub03 .keyword_set .txt_slide .item06 p {height: 4.6rem;aspect-ratio: 206/46;-webkit-mask-image: url("../images/sec02_sub03_keyword06@2x.png")}
.section02 .sub03 .keyword_set .bg_slide .bg01 {background-image: url("../images/sec02_sub03_bg01@2x.jpg");background-position: center center;}
.section02 .sub03 .keyword_set .bg_slide .bg02 {background-image: url("../images/sec02_sub03_bg02@2x.jpg")}
.section02 .sub03 .keyword_set .bg_slide .bg03 {background-image: url("../images/sec02_sub03_bg03@2x.jpg")}
.section02 .sub03 .keyword_set .bg_slide .bg04 {background-image: url("../images/sec02_sub03_bg04@2x.jpg")}
.section02 .sub03 .keyword_set .bg_slide .bg05 {background-image: url("../images/sec02_sub03_bg05@2x.jpg")}
.section02 .sub03 .keyword_set .bg_slide .bg06 {background-image: url("../images/sec02_sub03_bg06@2x.jpg");background-position: center center;}
/* section03 */
.section03 {background: #000;padding: 3rem;overflow: hidden;}
.section03 .video_set {position: relative;aspect-ratio: 16/9;}
.section03 .video_set .video {position: absolute;top: 0;left: 0;z-index: 0;width: 100%;height: 100%;object-fit: cover;object-position: center center;}
.section03 .btn_mute {
position: absolute;top: 6rem;right: 1rem;z-index: 10;
width: 3.75rem;height: 3rem;
border-radius: 0;border: none;outline: 0;
background: transparent url("../images/sound_sprites@2x.png") no-repeat left -1rem center;
background-size: auto 5rem;
}
.section03 .btn_mute.on {background-position: left -5.75rem center;}
/* section04 */
.section04 {position: relative;height: calc(100vh + 340vw);background: #252525;}
@supports (height: 100lvh) {
.section04 {height: calc(100lvh + 330vw);}
}
.section04 .section04_inner {position: sticky;top: 0;z-index: 0;width: 100%;height: 100vh;overflow: hidden;}
@supports (height: 100lvh) {
.section04 .section04_inner {height: 100lvh;}
}
.section04 .in {position: absolute;top: 0;left: 0;display: flex;width: 400vw;height: 100%;pointer-events: none;transition: left 0.1s ease;}
.section04 .graph_line {position: absolute;left: 0;top: 0;z-index: 10;width: 100%;height: 100%;overflow: hidden;pointer-events: none;}
.section04 .graph_line .line {display: block;width: 100%;height: 100%;background: url("../images/sec04_graph_line@2x.png") no-repeat left bottom;background-size: 400vw 100%;}
.section04 .step {position: relative;z-index: 0;width: calc(100% / 4);height: 100%;}
.section04 .step p {background: no-repeat center center;background-size: contain;}
.section04 .animal {position: absolute;right: 0;bottom: 0;z-index: 0;width: 100%;height: 100%;background: no-repeat center bottom;background-size: contain;}
.section04 .back_img {position: absolute;left: 0;top: 0;z-index: -1;width: 100%;height: 100%;background: no-repeat center center;background-size: cover;}
.section04 .sec_tit {position: absolute;left: 50%;top: 19.49vh;z-index: 2;width: 34.93vh;max-width: 23.3rem;aspect-ratio: 233/115;background: url("../images/sec04_tit@2x.png") no-repeat center center;background-size: contain;transform: translateX(-50%);opacity: 1;transition: all 0.3s ease;}
.section04.hide .sec_tit {opacity: 0;}
.section04 .step01 {}
.section04 .step01 .back_img {background: #252525;}
.section04 .step02 {display: flex;flex-direction: column;}
.section04 .step02 .back_img {background-image: url("../images/sec04_step02_bg@2x.jpg");}
.section04 .step02 p {position: absolute;left: calc(50% - 7.3rem);bottom: 4.2vh;z-index: 2;width: 23.69vh;max-width: 15.8rem;aspect-ratio: 158/238;background-image: url("../images/sec04_step02_txt@2x.png");}
.section04 .step03 {}
.section04 .step03 .animal {background-image: url("../images/sec04_step03_animal@2x.png");}
.section04 .step03 .back_img {background-image: url("../images/sec04_step03_bg@2x.jpg");}
.section04 .step04 {}
.section04 .step04 .animal {background-image: url("../images/sec04_step04_animal@2x.png");}
.section04 .step04 .back_img {background-image: url("../images/sec04_step04_bg@2x.jpg");}
.section04 .step04 p {position: absolute;left: calc(50% - 6rem);top: 24.74vh;z-index: 1;width: 29.24vh;max-width: 19.5rem;aspect-ratio: 195/190;background-image: url("../images/sec04_step04_txt@2x.png");}
/* show */
/* 그래프 라인 */
/*.section04 .graph_line {width: 0;transition: width 0.3s ease;}*/
/*.section04.show .graph_line {width: 100%;transition: width 2s linear;}*/
/* 배경 이미지 */
.section04 .back_img {opacity: 0;transition: opacity 0.3s ease;}
.section04 .step.show .back_img {opacity: 1;}
/* 글자 */
.section04 .step p {opacity: 0;transition: opacity 0.3s ease;}
.section04 .step.show p {opacity: 1;transition-delay: 0.3s;}
/* 동물 */
.section04 .animal {opacity: 0;transition: opacity 0.3s ease;}
.section04 .step.show .animal {opacity: 1;transition-delay: 0.4s;}
/* section05 */
.section05 {position: relative;height: 100vh;background: #000;overflow: hidden;}
@supports (height: 100lvh) {
.section05 {height: 100lvh;}
}
.section05 .in {display: flex;align-items: center;justify-content: center;height: 100%;}
.section05 .sec_tit {width: 33.13vh;max-width: 22.1rem;aspect-ratio: 221/288;background: url("../images/sec05_tit@2x.png") no-repeat center center;background-size: contain;margin-top: -3vh;}
.section05 .img_set {}
.section05 .img_set .pic {position: absolute;z-index: 1;background: no-repeat center center;background-size: contain;}
.section05 .img_set .pic01 {left: 1.5rem;top: 5.4rem;width: 31.33vh;aspect-ratio: 200/95;background-image: url("../images/sec05_img01@2x.jpg")}
.section05 .img_set .pic02 {right: 2.5rem;top: 2rem;width:11.84vh;aspect-ratio: 79/66;background-image: url("../images/sec05_img02@2x.jpg")}
.section05 .img_set .pic03 {left: 0;bottom: 1.3rem;width: 22.64vh;aspect-ratio: 151/139;background-image: url("../images/sec05_img03@2x.jpg")}
.section05 .img_set .pic04 {z-index: 2;left: calc(50% + 3.15vh);top: calc(50% + 18.74vh);width: 9vh;aspect-ratio: 60/64;background-image: url("../images/sec05_img04@2x.jpg")}
.section05 .img_set .pic05 {right: 1.6rem;bottom: 4.9rem;width: 16.64vh;aspect-ratio: 110/120;background-image: url("../images/sec05_img05@2x.jpg")}
.section05 .scroll_set {position: absolute;left: 50%;bottom: 3.889vh;z-index: 10;display: flex;flex-direction: column;align-items: center;gap: 2rem;transform: translateX(-50%);}
.section05 .scroll_set .txt {width: 5rem;aspect-ratio: 50/10;background: url("../images/scroll_txt@2x.png") no-repeat center center;background-size: contain;}
.section05 .scroll_set .arr {width: 1rem;aspect-ratio: 10/55;background: url('data:image/svg+xml,') no-repeat center center;background-size: contain;animation: scroll_arr_ani 1s infinite ease-in-out;}
@keyframes scroll_arr_ani {
0% {transform: translateY(0)}
50% {transform: translateY(1rem)}
}
/* show */
.section05 .img_set .pic {opacity: 1;transition: 0.6s ease;}
.section05.show .img_set .pic {opacity: 0;
-webkit-filter: blur(1rem);
-moz-filter: blur(1rem);
-o-filter: blur(1rem);
-ms-filter: blur(1rem);
}
.section05.show .img_set .pic01 {transition-delay: 0s;}
.section05.show .img_set .pic04 {transition-delay: 0.6s;}
.section05.show .img_set .pic03 {transition-delay: 0.9s;}
.section05.show .img_set .pic05 {transition-delay: 1.2s;}
.section05.show .img_set .pic02 {transition-delay: 1.5s;}
/* section06 */
.section06 {position: relative;}
.section06 .sticky_outer {position: sticky;top: 0;z-index: 0;width: 100%;height: 300vh;}
.section06 .sticky_outer > div {position: sticky;top: 0;width: 100%;height: 100vh;background: url("../images/sec06_bg@2x.jpg") no-repeat center center;background-size: cover;}
.section06 .sticky_outer .sec_sub {
position: absolute;left: 0;top: 0;z-index: -1;opacity: 0;
display: flex;align-items: center;justify-content: center;
width: 100%;height: 100vh;
background: url("../images/sec06_bg@2x.jpg") no-repeat center center;background-size: cover;
overflow: hidden;
transition: opacity 0.5s ease, z-index 0s 1s ease;
}
.section06[data-sec="1"] .sub01,
.section06[data-sec="2"] .sub02,
.section06[data-sec="3"] .sub03 {opacity: 1;z-index: 1;transition: z-index 0s linear, opacity 0.3s ease;}
/*@supports (height: 100svh) {*/
/*.section06 .sticky_outer > div {height: 100svh;}*/
/*.section06 .sticky_outer .sec_sub {height: 100svh;}*/
/*}*/
.section06 .sec_sub {}
.section06 .sec_sub .in {}
.section06 .sec_tit {position: absolute;left: 50%;bottom: calc(50% + 19.34vh);z-index: 10;width: 32.6rem;aspect-ratio: 326/29;background: #000 url("../images/sec06_sec_tit@2x.png") no-repeat center center;background-size: contain;transform: translateX(-50%);}
.section06 .count_set {display: flex;align-items: flex-end;justify-content: center;gap: 1rem;}
.section06 .count_set .countUp {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-end;align-content: flex-end;align-items: flex-end;gap: 0.7rem;height: 7.5rem;}
.section06 .count_set .countUp img {width: auto;height: 7.5rem;}
.section06 .count_set .countUp img[data-num="0"] {width: 3rem;}
.section06 .count_set .countUp img[data-num="1"] {width: 2.4rem;}
.section06 .count_set .countUp img[data-num="2"] {width: 3.1rem;}
.section06 .count_set .countUp img[data-num="3"] {width: 3.1rem;}
.section06 .count_set .countUp img[data-num="4"] {width: 3.4rem;}
.section06 .count_set .countUp img[data-num="5"] {width: 3.1rem;}
.section06 .count_set .countUp img[data-num="6"] {width: 3.1rem;}
.section06 .count_set .countUp img[data-num="7"] {width: 3.1rem;}
.section06 .count_set .countUp img[data-num="8"] {width: 3rem;}
.section06 .count_set .countUp img[data-num="9"] {width: 3rem;}
.section06 .count_set .countUp img[data-num=","] {width: 1.8rem;height: 2.8rem;margin-bottom: -1.4rem;}
.section06 .sec_sub p {background: no-repeat center center;background-size: contain;}
/*.section06 .sub01 .in {margin-top: -16.49vh;}*/
.section06 .sub01 .count_set .countUp {width: 16.3rem;}
.section06 .sub01 .count_set .unit {width: 4.1rem;aspect-ratio: 41/46;background-image: url("../images/sec06_sub01_unit@2x.png");}
.section06 .sub01 .txt {width: 31.9rem;aspect-ratio: 319/54;background-image: url("../images/sec06_sub01_txt@2x.png");margin: 2.5rem 0 0;}
/*.section06 .sub02 .in {margin-top: -20.09vh;}*/
.section06 .sub02 .count_set {gap: 0.6rem;margin: 1.1rem 0 2.5rem;}
.section06 .sub02 .count_set .countUp {width: 7rem;}
.section06 .sub02 .count_set .unit {width: 4.8rem;aspect-ratio: 48/76;background-image: url("../images/sec06_sub02_unit@2x.png");}
.section06 .sub02 .txt1 {width: 15.7rem;aspect-ratio: 157/14;background-image: url("../images/sec06_sub02_txt01@2x.png");margin: 0 auto;}
.section06 .sub02 .txt2 {width: 30.8rem;aspect-ratio: 308/55;background-image: url("../images/sec06_sub02_txt02@2x.png");margin: 0 auto;}
/*.section06 .sub03 .in {margin-top: 3.45vh;}*/
.section06 .sub03 .set_tit {width: 26.8rem;aspect-ratio: 268/194;background-image: url("../images/sec06_sub03_tit@2x.png");margin: 0 auto 2.5rem;}
.section06 .sub03 .set_txt {width: 33.7rem;aspect-ratio: 337/47;background-image: url("../images/sec06_sub03_txt@2x.png");margin: 0 auto;}
.section06 .sub03 .btn_set {position: absolute;left: 50%;bottom: 0;z-index: 0;transform: translateX(-50%);}
.section06 .sub03 .btn_set .btn_love {display: flex;align-items: center;justify-content: center;gap: 2.6rem;width: 34.5rem;height: 7rem;background: #000;}
.section06 .sub03 .btn_set .btn_love .txt {width: 12.2rem;aspect-ratio: 122/16;background: url("../images/sec06_btn_txt@2x.png") no-repeat center center;background-size: contain;}
.section06 .sub03 .btn_set .btn_love .arr {width: 3.6rem;aspect-ratio: 36/9;background: url('data:image/svg+xml,') no-repeat center center;background-size: contain;}
/* show */
.section06.show {}
.section06 .sec_tit {opacity: 1;transition: opacity 0.3s ease;}
.section06[data-sec="3"] .sec_tit {opacity: 0;}
.section06 .sub02 .txt1,
.section06 .sub02 .txt2 {opacity: 0;transition: opacity 0.3s ease;}
.section06[data-sec="2"] .sub02 .txt1,
.section06[data-sec="2"] .sub02 .txt2 {opacity: 1;transition: opacity 0.3s 0.3s ease;}
.section06 .sub03 .set_tit {opacity: 0;transform: translateY(-3rem);transition: all 0.3s ease;}
.section06 .sub03 .set_txt {opacity: 0;transition: all 0.3s ease;}
.section06[data-sec="3"] .sub03 .set_tit {opacity: 1;transform: translateY(0);transition-delay: 0.2s;}
.section06[data-sec="3"] .sub03 .set_txt {opacity: 1;transition-delay: 0.4s;}
/* section07 */
.section07 {position: relative;background: #f7f7f7;overflow: hidden;}
.section07 .in {padding: 10.2rem 0 0;}
.section07 .sec_tit {width: 31.1rem;aspect-ratio: 311/113;background: url("../images/sec07_tit@2x.png") no-repeat center center;background-size: contain;margin: 0 auto;}
.section07 .select_set {margin: 4rem 0 5.7rem;}
.section07 .select_set .message_slide {width: 22rem;margin: 0 auto 2.3rem;}
.section07 .select_set .message_slide .slick-list {overflow: visible;}
.section07 .select_set .message_slide .slick-slide {width: 22rem;height: 25rem;margin: 0 0.75rem;}
.section07 .select_set .message_slide .slick-slide > div {width: 100%;height: 100%;}
.section07 .select_set .item {position:relative;width: 22rem;height: 25rem;background: no-repeat center center;background-size: cover;}
.section07 .select_set .item01 {background-image: url("../images/sec07_item01@2x.jpg");}
.section07 .select_set .item02 {background-image: url("../images/sec07_item02@2x.jpg");}
.section07 .select_set .item03 {background-image: url("../images/sec07_item03@2x.jpg");}
.section07 .select_set .item input[type="radio"] {overflow:hidden;position:absolute;clip:rect(0, 0, 0, 0);width:1px;height:1px;margin:-1px;}
.section07 .select_set .item input[type="radio"] + label .chk {position:relative;display:block;width:100%;height:100%;cursor:pointer;overflow: hidden;}
.section07 .select_set .item input[type="radio"]:checked + label .chk {
box-shadow: 0 0.2933rem 0.7333rem rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 0.2933rem 0.7333rem rgba(0, 0, 0, 0.15);
}
.section07 .select_set .item input[type="radio"]:checked + label .chk:before {
content:'';position:absolute;left: 0;top: 0;z-index:1;opacity:1;
width: 100%;aspect-ratio: 1/1;
background: url("../images/sec07_item_checked@2x.png") no-repeat center top;
background-size: 100% 100%;
box-sizing: border-box;
}
.section07 .select_set .item input[type="radio"]:checked + label .chk:after {
content: '';position: absolute;left: 50%;bottom: 4rem;z-index: 1;opacity: 1;
width: 3.3rem;aspect-ratio: 1/1;
background: #fff url('data:image/svg+xml,') no-repeat center center;
background-size: auto 1.2rem;
border-radius: 100%;
border: 0.2rem solid #F5D200;
transform: translateX(-50%);
}
.section07 .select_set .ctrl_set {display: flex;align-items: center;justify-content: center;gap: 1.5rem;}
.section07 .select_set .slide_arrow {
width: 0.8rem;aspect-ratio: 8/12;
background: url('data:image/svg+xml,') no-repeat center center;
background-size: contain;
}
.section07 .select_set .slide_next {transform: rotate(180deg);}
.section07 .select_set .slick-dots {display:flex;gap: 0.8rem;}
.section07 .select_set .slick-dots li {font-size:0;}
.section07 .select_set .slick-dots li button {width: 0.6rem;aspect-ratio: 1/1;background: #808080;border-radius:100%;transition: all 0.3s ease;opacity: 0.35;}
.section07 .select_set .slick-dots li.slick-active button {opacity: 1;}
.section07 .btn_go_promise {width: 34.5rem;height: 7rem;display: flex;align-items: center;justify-content: center;gap: 2.6rem;background:#00ACCA;margin: 0 auto;}
.section07 .btn_go_promise .txt {width: 9.5rem;aspect-ratio: 95/16;background: url("../images/sec07_promise@2x.png") no-repeat center center;background-size: contain;}
.section07 .btn_go_promise .arr {width: 3.6rem;aspect-ratio: 36/19;background: url('data:image/svg+xml,') no-repeat center center;background-size: contain;}
/* popup_promise 공유 */
.popup_promise {
position: absolute;left: 0;bottom: 0;z-index: -1;opacity: 0;
display: flex;align-items: flex-end;
width: 100%;height: 100%;
background: rgba(0,0,0,0.3);
transition: opacity 0.2s ease, z-index 0s 0.1s linear;
}
.popup_promise.show {z-index: 20;opacity: 1;transition: opacity 0.2s ease, z-index 0s linear;}
.popup_promise .popup_wrap {width: 100%;transition: all 0.3s ease;transform: translateY(100%);}
.popup_promise.show .popup_wrap {transform: translateY(0);}
.popup_promise .popup_inner {position: relative;}
.popup_promise .btn_pop_close {position: absolute;right: 1.5rem;top: 1.5rem;z-index: 5;width: 1.7rem;aspect-ratio: 1/1;background: url('data:image/svg+xml,') no-repeat center center;background-size: contain;}
.popup_promise .input_set {background:#1D1D1B;padding: 7rem 4rem 3.5rem;}
.popup_promise .input_set label {display: flex;align-items: center;gap: 1rem;margin-bottom: 1rem;}
.popup_promise .input_set label:last-child {margin-bottom: 0;}
.popup_promise .input_set .input {width:24rem;height:6rem;color:#000;font-weight: 700;font-size: 2rem;text-align:center;}
.popup_promise .input_set .input::placeholder {color: #B3B3B3;}
.popup_promise .input_set .txt {color:#fff;font-weight: 700;font-size: 1.8rem;line-height: 2.2rem;letter-spacing: -0.02em;}
.popup_promise .btn_share {width: 100%;height: 7.8rem;display: flex;align-items: center;justify-content: center;gap: 1.5rem;background:#00ACCA;}
.popup_promise .btn_share .txt {width: 9.5rem;aspect-ratio: 95/16;background: url("../images/sec07_promise@2x.png") no-repeat center center;background-size: contain;}
.popup_promise .btn_share .arr {width: 3.6rem;aspect-ratio: 36/19;background: url('data:image/svg+xml,') no-repeat center center;background-size: contain;}
/* section08 */
.section08 {position: relative;background: url("../images/sec08_bg@2x.jpg") no-repeat center center;background-size: cover;}
.section08::after {content:'';position: absolute;left: 0;top: 0;z-index: 1;width: 100%;height: 100%;background: url("../images/sec08_bg_bear@2x.png") no-repeat center bottom;background-size: auto 100%;}
.section08 .in {padding: 12.2rem 1.5rem 1.5rem;}
.section08 .sec_tit {position: relative;z-index: 0;width: 25.4rem;aspect-ratio: 254/377;background: url("../images/sec08_tit@2x.png") no-repeat center center;background-size: contain;margin: 0 auto 20.3rem;}
.section08 .btn_cta {position: relative;z-index: 2;display: flex;align-items: center;justify-content: center;gap: 2.7rem;width: 100%;height: 8.3rem;background: #000;}
.section08 .btn_cta .txt {width: 10.3rem;aspect-ratio: 103/18;background: url("../images/sec08_btn_txt@2x.png") no-repeat center center;background-size: contain;}
.section08 .btn_cta .arr {width: 5.1rem;aspect-ratio: 51/12;background: url('data:image/svg+xml,') no-repeat center center;background-size: contain;}
/* footer */
.footer {background: #141413;}
.footer .in {padding: 4.5rem 1.5rem 5rem;}
.footer .logo_set {display: flex;align-items: center;gap: 2.4rem;margin-bottom: 3.4rem;}
.footer .logo {width: 6.4rem;aspect-ratio: 64/71;background: url("../images/footer_logo@2x.png") no-repeat center center;background-size: contain;}
.footer .tit {width: 19.9rem;aspect-ratio: 199/13;background: url("../images/footer_tit@2x.png") no-repeat center center;background-size: contain;}
.footer .address {position: relative;width: 23rem;aspect-ratio: 230/236;background: url("../images/footer_txt@2x.png") no-repeat left top;background-size: contain;}
.footer .address a {position: absolute;z-index: 1;cursor: pointer;}
.footer .address a.tel {width: 7rem;height: 1.5rem;left: 4rem;top: 5.1rem;}
.footer .address a.mail1 {width: 13.8rem;height: 1.5rem;left: 4.2rem;top: 8.5rem;}
.footer .address a.mail2 {width: 14.8rem;height: 1.5rem;left: 4.2rem;top: 10.3rem;}
.footer .address a.mail3 {width: 14.2rem;height: 1.5rem;left: 9.1rem;top: 12.1rem;}
.footer .address a.mail4 {width: 11rem;height: 1.5rem;left: 4.4rem;top: 13.9rem;}
/* popup */
.popup {
position: fixed;top: 0;left: 0;z-index: -1;opacity: 0;
width: 100%;height: 100%;
background: rgba(0,0,0,0.3);
transition: opacity 0.2s ease, z-index 0s 0.1s linear;
}
.popup.show {z-index: 300;opacity: 1;transition: opacity 0.2s ease, z-index 0s linear;}
.popup .popup_wrap {transition: all 0.3s ease;transform: translateY(100%);}
.popup.show .popup_wrap {transform: translateY(0);}
.popup_cta {display: flex;align-items: flex-end;}
.popup_cta .popup_wrap {width: 100%;}
.popup_cta .popup_inner {position: relative;background: #000;padding: 5.2rem 5.2rem 3rem;}
.popup_cta .popup_inner {position: relative;background: #000;padding: 5.2rem 5.2rem 3rem;}
.popup_cta .btn_pop_close {position: absolute;right: 1.5rem;top: 1.5rem;z-index: 5;width: 2.2rem;aspect-ratio: 1/1;background: #fff url('data:image/svg+xml,') no-repeat center center;background-size: auto 0.8rem;}
.popup_cta .popup_inner a {display: flex;align-items:center;justify-content: center;gap: 1.5rem;width: 100%;height: 6.9rem;margin-bottom: 1rem;}
.popup_cta .popup_inner a:last-child {margin-bottom: 0;}
.popup_cta .popup_inner a .arr {width: 1.4rem;aspect-ratio: 1/1;background: url('data:image/svg+xml,') no-repeat center center;background-size: contain;}
.popup_cta .btn_once {background: #F5D200;}
.popup_cta .btn_once .txt {width: 13.4rem;aspect-ratio: 134/16;background: url("../images/sec06_btn_1000@2x.png") no-repeat center center;background-size: contain;}
.popup_cta .btn_pledge {background: #fff;}
.popup_cta .btn_pledge .txt {width: 11.9rem;aspect-ratio: 119/16;background: url("../images/sec06_btn_pledge@2x.png") no-repeat center center;background-size: contain;}