html {font-size: calc((10 / 1440) * 100vw);}
@media (min-width: 1440px) {
html {font-size: 10px;}
}
html:has(.popup[data-show="y"][backdrop]) {overflow: hidden;}
html:has(.popup[data-show="y"][backdrop]) body {height: auto !important;padding-right: var(--scrollBarWidth);}
.wrap {
position: relative;
width: 100%;
/* font */
--ft-neo300: 'NanumSquareNeoLight';
--ft-neo400: 'NanumSquareNeo';
--ft-neo700: 'NanumSquareNeoBold';
--ft-neo800: 'NanumSquareNeoExtraBold';
--ft-neo900: 'NanumSquareNeoHeavy';
--ft-paper: 'Paperlogy';
}
/* 커서 */
.wrap {
cursor: url('data:image/svg+xml,') 0 0, auto;
}
a, button {
cursor: url('data:image/svg+xml,') 12 11, auto;
}
/* 공통 */
.ver_pc {display: block;}
.ver_mo {display: none;}
.bold {font-weight: 700;}
.d-flex {display: flex;}
.btn_badge_set {display: inline-block;}
.btn_badge_set .btn {position: relative;display: block;width: 31rem;aspect-ratio: 310/120;background: #73FF8B;border-radius: 1rem;padding: 2.4rem 0 0 2.7rem;transition: background 0.3s ease;}
.btn_badge_set .btn .btn_txt {color: #1245B0;font-size: 2.2rem;font-weight: 600;line-height: 135%;letter-spacing: -0.02em;transition: color 0.3s ease;}
.btn_badge_set .btn .btn_arr {position: absolute;right: 3rem;bottom: 1.8rem;z-index: 1;display: block;width: 7.8rem;aspect-ratio: 78/25;background-color: #006EFF;-webkit-mask: url('data:image/svg+xml,') no-repeat center center;-webkit-mask-size: 100% 100%;transition: background 0.3s ease;animation: btn_arr_ani 1s ease-in-out infinite;}
@keyframes btn_arr_ani {
0% {transform: translateX(0);}
50% {transform: translateX(1rem);}
}
.btn_badge_set .btn .badge {position: absolute;right: -3.6rem;top: -2.6rem;z-index: 1;display: block;width: 10.5rem;aspect-ratio: 105/53;pointer-events: none;}
.btn_badge_set .btn .badge > span {position: absolute;left: 0;top: 0;z-index: 0;width: 100%;height: 100%;background: no-repeat left top;background-size: 100% 100%;}
.btn_badge_set .btn .badge .b01 {
background-image: url("../images/btn_badge_6001@1.5x.png");
animation: fadeCross 2.4s infinite;
}
.btn_badge_set .btn .badge .b02 {
background-image: url("../images/btn_badge_cool@1.5x.png");
animation: fadeCross 2.4s infinite;animation-delay: 1.2s;
}
@keyframes fadeCross {
0% {opacity: 1;} /* b01 표시 */
33% {opacity: 1;} /* 1초 유지 */
50% {opacity: 0;} /* 0.5초 동안 서서히 사라짐 */
83% {opacity: 0;} /* 다른 색상 유지 시간 */
100% {opacity: 1;} /* 다시 나타남 */
}
.btn_badge_set .desc {color: #868686;font-size: 1.4rem;font-weight: 400;line-height: 140%;letter-spacing: -0.01em;}
/* wrap_fixed */
.wrap_fixed {}
.wrap_fixed .logo_set {position: fixed;left: 3rem;top: 3rem;z-index: -1;opacity: 0;transition: opacity 0.3s ease, z-index 0.3s ease;}
.wrap_fixed .logo_set[data-show="y"] {opacity: 1;z-index: 200;}
.wrap_fixed .logo_set .logo {position: relative;width: 11.5rem;aspect-ratio: 115/44;background-color: #fff;-webkit-mask: url("../images/logo@2x.png") no-repeat center center;-webkit-mask-size: 100% 100%;transition: background-color 0.3s ease;}
.wrap_fixed .logo_set[data-color="wh"] .logo {background-color: #fff;}
.wrap_fixed .logo_set[data-color="bl"] .logo {background-color: #0A39C3;}
.wrap_fixed .sticky_set {position: fixed;right: 2rem;bottom: 1rem;z-index: 300;transform: translateY(calc(100% + 2rem));transition: transform 0.3s ease;}
.wrap_fixed .sticky_set[data-show="y"] {transform: translateY(0%);}
html:has(.popup[data-show="y"][backdrop]) .wrap_fixed .sticky_set {right: calc(2rem + var(--scrollBarWidth));}
.wrap_fixed .sticky_set .btn_sticky {position: relative;display: block;width: 31rem;aspect-ratio: 310/138;}
@media (min-width: 1001px) {
.wrap_fixed .sticky_set .btn_sticky::before,
.wrap_fixed .sticky_set .btn_sticky::after {content: '';position: absolute;left: 0;top: 0;z-index: 0;width: 100%;height: 100%;background: url("../images/sticky_sprites@2x.png?v=2") no-repeat left center;background-size: auto 100%;transition: opacity 0.3s ease;}
.wrap_fixed .sticky_set .btn_sticky::before {background-position: left center;}
.wrap_fixed .sticky_set .btn_sticky::after {background-position: left 100% center;opacity: 0;}
.wrap_fixed .sticky_set .btn_sticky:hover::after {opacity: 1;}
}
/* section_visual */
.section_visual_dummy {
position: relative;
width: 100%;
height: 100vh;
pointer-events: none;
}
.section_visual {
position: fixed;left: 0;top: 0;z-index: -1;
display: none;align-items: center;justify-content: center;
background: #0089F8 url("../images/main_bg@1.5x.jpg") no-repeat center center;
background-size: auto 100%;
width: 100%;
height: 100vh;
--parent-height: 100vh;
text-align: center;
}
.section_visual[data-show="y"] {display: flex;}
.section_visual .in {display: flex;align-items: center;height: 100%;}
.section_visual .tit_set {}
.section_visual .tit_set .sec_tit {display: block;width: calc(var(--parent-height) * (820 / 900));aspect-ratio: 820/580;background: url("../images/main_title@2x.png") no-repeat center center;background-size: 100% 100%;}
.section_visual .scroll_set {position: absolute;left: 50%;bottom: calc(var(--parent-height) * (17 / 900));z-index: 10;transform:translateX(-50%);}
.section_visual .scroll_set .scroll {animation: scroll_ani 1s ease-in-out infinite;}
.section_visual .scroll_set .arr {display: block;width: calc(var(--parent-height) * (21 / 900));aspect-ratio: 21/27;background: url("../images/main_scroll_arr@1.5x.png") no-repeat center center;background-size: 100% 100%;margin: 0 auto calc(var(--parent-height) * (9 / 900));}
.section_visual .scroll_set .txt {font-family: var(--ft-neo800);color: #00EAFF;font-size: calc(var(--parent-height) * (15 / 900));line-height: 100%;letter-spacing: -0.02em;text-align: center;}
@keyframes scroll_ani {
0% {transform: translateY(0);}
50% {transform: translateY(-1rem);}
}
/* section01 */
.section01 .sub_sec {background: no-repeat center center;background-size: auto 100%;}
.section01 .sub01 .sec_tit,
.section01 .sub02 .sec_tit,
.section01 .sub03 .sec_tit {position: absolute;left: 50%;top: 50%;z-index: 2;display: block;background: no-repeat center center;background-size: 100% 100%;transform: translate(-50%, -50%);}
.section01 .sub_sec .scroll_set {position: absolute;left: 50%;bottom: calc(var(--parent-height) * (23 / 900));z-index: 10;transform:translateX(-50%);}
.section01 .sub_sec .scroll_set .scroll {animation: scroll_ani 1s ease-in-out infinite;}
.section01 .sub_sec .scroll_set .arr {display: block;width: calc(var(--parent-height) * (22 / 900));aspect-ratio: 22/27;background: url("../images/sec01_sub03_scroll_arr@1.5x.png") no-repeat center center;background-size: 100% 100%;margin: 0 auto calc(var(--parent-height) * (6 / 900));}
.section01 .sub_sec .scroll_set .txt {font-family: var(--ft-neo800);color: #006EFF;font-size: calc(var(--parent-height) * (15 / 900));line-height: 100%;letter-spacing: -0.02em;text-align: center;}
.section01 .sub01 {background-image: url("../images/sec01_sub01_sticker@1.5x.png");;}
.section01 .sub01 .sec_tit {width: calc(var(--parent-height) * (704 / 900));aspect-ratio: 704/128;background-image: url("../images/sec01_sub01_tit@2x.png");}
.section01 .sub02 {background-image: url("../images/sec01_sub02_sticker@1.5x.png");}
.section01 .sub02 .sec_tit {width: calc(var(--parent-height) * (694 / 900));aspect-ratio: 694/128;background-image: url("../images/sec01_sub02_tit@2x.png");}
.section01 .sub03 {
background: url("../images/sec01_sub03_bg@1.5x.jpg") repeat-x center center;background-size: auto 100%;
}
.section01 .sub03 .sec_tit {width: calc(var(--parent-height) * (400 / 900));aspect-ratio: 400/138;background-image: url("../images/sec01_sub03_tit@2x.png");}
.section01 .sub04 {
background: url("../images/sec01_sub04_bg@1.5x.jpg") repeat-x center top;
background-size: auto 100%;
}
.section01 .sub04 .eyebrow_txt {font-family: var(--ft-paper);font-weight: 500;color: #fff;font-size: calc(var(--parent-height) * (25 / 900));line-height: 135%;text-align: center;}
.section01 .sub04 .sec_tit {position: relative;display: block;width: calc(var(--parent-height) * (760 / 900));aspect-ratio: 760/50;background: url("../images/sec01_sub04_tit@2x.png") no-repeat center center;background-size: 100% 100%;margin: calc(var(--parent-height) * (20 / 900)) auto calc(var(--parent-height) * (40 / 900));}
.section01 .sub04 .sec_tit::after {content:'';position: absolute;right: calc(var(--parent-height) * (45 / 900) * -1);bottom: calc(var(--parent-height) * (48 / 900));z-index: 1;width: calc(var(--parent-height) * (87 / 900));aspect-ratio: 87/60;background: url("../images/sec01_sub04_tit_deco@1.5x.png") no-repeat center center;background-size: 100% 100%;pointer-events: none;}
.section01 .sub04 .page_title {display: block;width: calc(var(--parent-height) * (486 / 900));aspect-ratio: 486/183;background: url("../images/sec01_sub04_page_logo@2x.png") no-repeat center center;background-size: 100% 100%;margin: 0 auto;}
.section01 .sub04 .scroll_set .arr {background-image: url("../images/sec01_sub04_scroll_arr@1.5x.png");}
.section01 .sub04 .scroll_set .txt {color: #2D515C;}
/* show */
@media (min-width: 1001px) {
.sec01_sticky_outer {
position: relative;
--parent-height: 100vh;
}
.sec01_sticky_outer::before {content: '';display: block;width: 100%;height: calc(var(--parent-height) * (265 / 900));background: url("../images/sec01_bg_top@1.5x.png") repeat-x center center;background-size: auto 100%;}
.sec01_sticky_outer .sec01_sticky_in {position: relative;width: 100%;height: 550vh;}
.section01 {
position: sticky;top: 0;z-index: 1;width: 100%;
height: var(--parent-height);
background: url("../images/sec01_bg@1.5x.jpg?v=2") repeat-x center center;
background-size: auto 100%;
}
.section01::before,
.section01::after {content:'';position: absolute;z-index: 2;background: no-repeat center center;background-size: 100% 100%;pointer-events: none;}
.section01::before {left: 0;bottom: 0;width: calc(var(--parent-height) * (98 / 900));aspect-ratio: 98/524;background-image: url("../images/sec01_side_left@1.5x.png");}
.section01::after {right: 0;top: calc(var(--parent-height) * (152 / 900));width: calc(var(--parent-height) * (145 / 900));aspect-ratio: 145/300;background-image: url("../images/sec01_side_right@1.5x.png");}
.section01 > div {position: relative;width: 100%;height: 100%;overflow: hidden;}
.section01 .sub_sec {
position: absolute;left: 0;top: 0;
width: 100%;height: 100%;
}
.section01 .sub01 {z-index: 1;transform: translateY(0);transition: transform 0.7s ease;}
.section01 .sub02 {z-index: 1;transform: translateY(100%);transition: transform 0.7s ease;}
.section01 .sub03 {
z-index: 3;
-webkit-mask: url('data:image/svg+xml,') no-repeat center center;
-webkit-mask-size: 0%;
transition: all 1s ease, opacity 0.3s ease;
pointer-events: none;
}
.section01 .sub04 {
z-index: 4;
transform: translateY(100%);
transition: transform 0.7s ease;
padding-top: calc(var(--parent-height) * (205 / 900));
}
.sec01_sticky_outer[data-page="0"]::before {content: '';}
.sec01_sticky_outer[data-page="1"]::before {content: '';}
.sec01_sticky_outer[data-page="2"] .sub01 {transform: translateY(-100%);}
.sec01_sticky_outer[data-page="3"] .sub01 {transform: translateY(-100%);}
.sec01_sticky_outer[data-page="4"] .sub01 {transform: translateY(-100%);}
.sec01_sticky_outer[data-page="2"] .sub02 {transform: translateY(0);}
.sec01_sticky_outer[data-page="3"] .sub02 {transform: translateY(0);}
.sec01_sticky_outer[data-page="4"] .sub02 {transform: translateY(0);}
.sec01_sticky_outer[data-page="3"] .sub03 {-webkit-mask-size: 200%;pointer-events: auto;}
.sec01_sticky_outer[data-page="4"] .sub03 {-webkit-mask-size: 200%;pointer-events: auto;}
.sec01_sticky_outer[data-page="4"] .sub04 {transform: translateY(0);}
.section01 .sub01 .sec_tit,
.section01 .sub02 .sec_tit,
.section01 .sub03 .sec_tit {opacity: 0;transition: opacity 0.3s ease;}
.sec01_sticky_outer[data-page="1"] .sub01 .sec_tit {opacity: 1;}
.sec01_sticky_outer[data-page="2"] .sub01 .sec_tit {opacity: 1;}
.sec01_sticky_outer[data-page="2"] .sub02 .sec_tit {opacity: 1;transition-delay: 0.7s;}
.sec01_sticky_outer[data-page="3"] .sub02 .sec_tit {opacity: 1;}
.sec01_sticky_outer[data-page="3"] .sub03 .sec_tit {opacity: 1;transition-delay: 0.3s;}
.sec01_sticky_outer[data-page="4"] .sub03 .sec_tit {opacity: 1;}
}
/* section02 */
.section02 {position: relative;background: url("../images/sec02_bg@1.5x.jpg?v=2") repeat-x center center;background-size: auto 100%;}
.section02 .in {padding: 11rem 0 12.1rem;}
.section02 .tit_set {}
.section02 .tit_set .sec_tit {font-family: var(--ft-paper);font-weight: 700;color: #FFF;font-size: 3.5rem;line-height: 135%;text-shadow: 1px 1px 0.2rem rgba(0, 0, 0, 0.20);text-align: center;margin-bottom: 1rem;}
.section02 .tit_set .s_tit {color: #FFF;font-size: 2.2rem;font-weight: 500;line-height: 135%;letter-spacing: -0.01em;text-align: center;}
.section02 .mission_set {position: relative;display: block;width: 107rem;background: url("../images/sec02_mission_board@1.5x.png") no-repeat center center;background-size: 100% 100%;padding: 8.1rem 0 5rem;margin: 4.2rem auto 7.3rem;}
.section02 .mission_set .list {display: flex;justify-content: center;gap: 1.5rem;margin-bottom: 3rem;}
.section02 .mission_set .item {position: relative;display: flex;width: 31rem;aspect-ratio: 5/5;background: no-repeat center center;background-size: cover;border-radius: 1rem;text-align: center;}
.section02 .mission_set .item1 {background-image: url("../images/sec02_mission01_img@1.5x.jpg?v=2");}
.section02 .mission_set .item2 {background-image: url("../images/sec02_mission02_img@1.5x.jpg?v=2");}
.section02 .mission_set .item3 {background-image: url("../images/sec02_mission03_img@1.5x.jpg?v=2");}
.section02 .mission_set .item::after {content:'';position: absolute;left: 50%;top: -3.8rem;z-index: 1;width: 9rem;aspect-ratio: 90/75;background: no-repeat center center;background-size: 100% 100%;transform: translateX(-50%);}
.section02 .mission_set .item1::after {background-image: url("../images/sec02_mission01_badge@1.5x.png");}
.section02 .mission_set .item2::after {background-image: url("../images/sec02_mission02_badge@1.5x.png");}
.section02 .mission_set .item3::after {background-image: url("../images/sec02_mission03_badge@1.5x.png");}
.section02 .mission_set .item .btn {position: absolute;left: 50%;bottom: 2rem;z-index: 1;display: flex;align-items: center;justify-content: center;gap: 0.8rem;width: 18.2rem;aspect-ratio: 182/40;transform: translateX(-50%);}
.section02 .mission_set .item .btn .btn_txt {color: #FFF;font-size: 1.6rem;font-weight: 600;line-height: 140%;letter-spacing: -0.01em;transition: color 0.3s ease;}
.section02 .mission_set .item .btn .btn_arr {display: block;width: 2rem;aspect-ratio: 20/12;background-color: #73FF8B;-webkit-mask: url('data:image/svg+xml,') no-repeat center center;-webkit-mask-size: 100% 100%;transition: background 0.3s ease;}
.section02 .mission_set .item .btn::before,
.section02 .mission_set .item .btn::after {content: '';position: absolute;left: 0;top: 0;z-index: -1;width: 100%;height: 100%;background: url("../images/sec02_btn_sprites@2x.png") no-repeat left center;background-size: auto 100%;transition: opacity 0.3s ease;}
.section02 .mission_set .item .btn::before {background-position: left center;}
.section02 .mission_set .item .btn::after {background-position: left 100% center;opacity: 0;}
@media (min-width: 1001px) {
.section02 .mission_set .item .btn:hover::after {opacity: 1;}
.section02 .mission_set .item .btn:hover .btn_txt {color: #006EFF;}
.section02 .mission_set .item .btn:hover .btn_arr {background-color: #006EFF;}
}
.section02 .mission_set > p {color: #121212;font-size: 1.6rem;font-weight: 500;line-height: 140%;letter-spacing: -0.01em;text-align: center;}
.section02 .how_set {display: flex;align-items: flex-end;justify-content: center;gap: 1.2rem;margin-left: 0.6rem;}
.section02 .how_set .how_tit {position: absolute;left: 50%;top: -2.4rem;z-index: 1;display: block;width: 28.8rem;aspect-ratio: 288/59;font-family: var(--ft-paper);font-weight: 700;color: #1245B0;font-size: 2.5rem;line-height: 135%;text-align: center;background: url("../images/sec02_how_tit_bg@1.5x.png") no-repeat center center;background-size: 100% 100%;padding: 1.1rem 0 0;transform: translateX(-50%);}
.section02 .how_set .txt_set {position: relative;display: block;width: 55.9rem;height: 32.5rem;background: url("../images/sec02_how_board@1.5x.png") no-repeat center center;background-size: 100% 100%;padding: 10.3rem 0 0;}
.section02 .how_set .txt_set .txt {}
.section02 .how_set .txt_set .txt p {color: #121212;font-size: 2.2rem;font-weight: 500;line-height: 135%;text-align: center;}
.section02 .how_set .txt_set .txt p:nth-child(1) {font-family: var(--ft-paper);}
.section02 .how_set .txt_set .txt p:nth-child(1) .bold {font-family: var(--ft-paper);font-weight: 700;}
.section02 .how_set .txt_set .txt p:nth-child(2) {font-size: 1.6rem;line-height: 140%;letter-spacing: -0.01em;margin-top: 1rem;}
.section02 .how_set .img_set {position: relative;display: block;width: 49.4rem;height: 32.4rem;background: url("../images/sec02_how_img_board@1.5x.png?v=2") no-repeat center center;background-size: 100% 100%;}
.section02 .how_set .img_set::after {content: '';position: absolute;left: calc(50% + -0.8rem);top: -2.5rem;z-index: 1;display: block;width: 3.7rem;aspect-ratio: 37/59;background: url("../images/sec02_how_img_pin@1.5x.png") no-repeat center center;background-size: 100% 100%;}
/* section03 */
.section03 {position: relative;background: url("../images/sec03_bg@1.5x.jpg?v=3") repeat-x center center;background-size: auto 100%;overflow: hidden;}
.section03 .in {padding: 11rem 0 15.7rem;}
.section03 .tit_set {}
.section03 .tit_set .sec_tit {font-family: var(--ft-paper);font-weight: 700;color: #FFF;font-size: 3.5rem;line-height: 135%;text-align: center;margin-bottom: 1rem;}
.section03 .tit_set .s_tit {color: #FFF;font-size: 2.2rem;font-weight: 500;line-height: 135%;letter-spacing: -0.01em;text-align: center;}
.section03 .visual_img {position: relative;display: block;width: 107.2rem;aspect-ratio: 1072/564;background: url("../images/sec03_visual_img@1.5x.png?v=2") no-repeat center center;background-size: 100% 100%;margin: 4.2rem auto 7.3rem;}
.section03 .visual_img .btn {position: absolute;right: 4rem;bottom: 4rem;z-index: 1;display: flex;align-items: center;justify-content: center;gap: 0.8rem;width: 18.4rem;aspect-ratio: 184/42;}
.section03 .visual_img .btn .btn_txt {color: #1245B0;font-size: 1.6rem;font-weight: 600;line-height: 140%;letter-spacing: -0.01em;transition: color 0.3s ease;}
.section03 .visual_img .btn .btn_arr {display: block;width: 2rem;aspect-ratio: 20/12;background-color: #006EFF;-webkit-mask: url('data:image/svg+xml,') no-repeat center center;-webkit-mask-size: 100% 100%;transition: background 0.3s ease;}
.section03 .visual_img .btn::before,
.section03 .visual_img .btn::after {content: '';position: absolute;left: 0;top: 0;z-index: -1;width: 100%;height: 100%;background: url("../images/sec03_btn_sprites@2x.png?v=3") no-repeat left center;background-size: auto 100%;transition: opacity 0.3s ease;}
.section03 .visual_img .btn::before {background-position: left center;}
.section03 .visual_img .btn::after {background-position: left 100% center;opacity: 0;}
@media (min-width: 1001px) {
.section03 .visual_img .btn:hover::after {opacity: 1;}
.section03 .visual_img .btn:hover .btn_txt {color: #006EFF;}
}
.section03 .step_set {position: relative;display: block;width: 107.2rem;height: 48.4rem;background: url("../images/sec03_step_board@1.5x.png") no-repeat left top;background-size: 100% 100%;padding: 9.5rem 0 0;margin: 0 auto;}
.section03 .step_set .step_tit {position: absolute;left: 50%;top: -2.5rem;z-index: 1;display: block;width: 28.8rem;aspect-ratio: 288/59;font-family: var(--ft-paper);font-weight: 700;color: #1245B0;font-size: 2.5rem;line-height: 135%;text-align: center;background: url("../images/sec03_step_tit_bg@1.5x.png") no-repeat center center;background-size: 100% 100%;padding: 1.1rem 0 0;transform: translateX(-50%);}
.section03 .step_set .list_set {display: flex;justify-content: center;gap: 1.5rem;}
.section03 .step_set .item .image {position: relative;display: flex;width: 31rem;aspect-ratio: 310/210;background: no-repeat center center;background-size: cover;border-radius: 1rem;text-align: center;}
.section03 .step_set .item1 .image {background-image: url("../images/sec03_step01_img@1.5x.jpg?v=2");}
.section03 .step_set .item2 .image {background-image: url("../images/sec03_step02_img@1.5x.jpg?v=2");}
.section03 .step_set .item3 .image {background-image: url("../images/sec03_step03_img@1.5x.jpg?v=2");}
.section03 .step_set .item .step {position: absolute;left: 50%;top: -2.1rem;z-index: 1;width: 8.2rem;aspect-ratio: 82/45;background: no-repeat center center;background-size: 100% 100%;transform: translateX(-50%);}
.section03 .step_set .item1 .step {background-image: url("../images/sec03_step01_badge@3x.png");}
.section03 .step_set .item2 .step {background-image: url("../images/sec03_step02_badge@3x.png");}
.section03 .step_set .item3 .step {background-image: url("../images/sec03_step03_badge@3x.png");}
.section03 .step_set .item .tit {font-family: var(--ft-paper);font-weight: 600;color: #006EFF;font-size: 2.2rem;line-height: 135%;text-align: center;margin: 2rem 0 0.6rem;}
.section03 .step_set .item .txt {color: #121212;font-size: 1.6rem;font-weight: 500;line-height: 140%;letter-spacing: -0.01em;text-align: center;}
/* section04 */
.section04 {position: relative;height: 88rem;background: url("../images/sec04_bg@1.5x.jpg") repeat-x center center;background-size: auto 100%;}
.section04 .in {display: flex;justify-content: center;gap: 8.6rem;height: 100%;}
.section04 .goods_set {position: relative;margin: 0 0 auto 2.5rem;}
.section04 .goods_set .goods {position: relative;display: block;width: 50rem;aspect-ratio: 500/760;}
.section04 .goods_set .goods::before {content:'';position: absolute;left: 0;top: 0;z-index:0;display: block;width: 100%;height: 100%;background: url("../images/sec04_goods_bg@1.5x.png?v=2") no-repeat center center;background-size: 100% 100%;animation: goods_bg_ani 1s ease-in-out infinite;pointer-events: none;}
@keyframes goods_bg_ani {
0% {transform: scale(1);}
50% {transform: scale(1.06);}
}
.section04 .goods_set .goods::after {content:'';position: relative;display: block;width: 100%;height: 100%;background: url("../images/sec04_goods_img@1.5x.png?v=2") no-repeat center center;background-size: 100% 100%;pointer-events: none;}
.section04 .goods_set .detail {position: absolute;z-index: 1;white-space: nowrap;}
.section04 .goods_set .detail.nfc {left: -7.8rem;top: 29.3rem;}
.section04 .goods_set .detail.keyring {right: -2.9rem;top: 16.2rem;}
.section04 .goods_set .detail.recycled {right: -3.5rem;bottom: -3.1rem;}
.section04 .goods_set .detail .line {position: absolute;z-index: 0;height: 1px;background: #0048E3;pointer-events: none;}
.section04 .goods_set .detail .line::before,
.section04 .goods_set .detail .line::after {content:'';position: absolute;top: 50%;z-index: 1;width: 0.6rem;aspect-ratio: 5/5;background: #0048E3;border-radius: 100%;transform: translateY(-50%);}
.section04 .goods_set .detail .line::before {right: 100%;}
.section04 .goods_set .detail .line::after {left: 100%;}
.section04 .goods_set .detail.nfc .line {width: 6.7rem;right: -8.2rem;bottom: 1rem;}
.section04 .goods_set .detail.keyring .line {width: 6.3rem;left: -7.6rem;top: -0.4rem;transform: rotate(19deg);}
.section04 .goods_set .detail.recycled .line {width: 12.8rem;left: -9.8rem;top: -5.6rem;transform: rotate(69deg);}
.section04 .goods_set .detail .eng {display: block;background: no-repeat center center;background-size: 100% 100%;margin-bottom: 0.7rem;}
.section04 .goods_set .detail .txt {color: #121212;font-size: 1.5rem;font-weight: 400;line-height: 150%;letter-spacing: -0.02em;}
.section04 .goods_set .detail.nfc .eng {width: 2.8rem;aspect-ratio: 28/18;background-image: url("../images/sec04_detail_nfc_eng@1.5x.png");}
.section04 .goods_set .detail.keyring .eng {width: 7.5rem;aspect-ratio: 75/19;background-image: url("../images/sec04_detail_keyring_eng@1.5x.png");}
.section04 .goods_set .detail.recycled .eng {width: 13.7rem;aspect-ratio: 137/19;background-image: url("../images/sec04_detail_recycled_eng@1.5x.png");}
.section04 .tit_set {margin: auto 0;}
.section04 .tit_set .sec_tit {font-family: var(--ft-paper);font-weight: 700;color: #006EFF;font-size: 3.5rem;line-height: 135%;margin-bottom: 1.5rem;}
.section04 .tit_set .s_tit {color: #121212;font-size: 1.6rem;font-weight: 500;line-height: 140%;letter-spacing: -0.01em;}
.section04 .btn_badge_set {margin-top: 3.5rem;}
.section04 .btn_badge_set .desc {margin: 1rem 0 0 0.4rem;}
@media (min-width: 1001px) {
.section04 .btn_badge_set .btn:hover {background-color: #F78AFF;}
.section04 .btn_badge_set .btn:hover .btn_txt {color: #fff;}
.section04 .btn_badge_set .btn:hover .btn_arr {background-color: #fff;}
}
/* section05 */
.section05 {position: relative;height: 84rem;background: url("../images/sec05_bg@1.5x.jpg") repeat-x center center;background-size: auto 100%;overflow: hidden;}
.section05 .in {padding: 10rem 0 0;}
.section05 .slide_set {position: relative;width: 47.3rem;margin: 0 auto;}
.section05 .slide_set .slick-list {overflow: visible;margin: 0 3.5rem;}
.section05 .slide_set .slick-track {display: flex;}
.section05 .slide_set .item {float: unset;position: relative;display: block;width: 100%;aspect-ratio: 330/435;margin: 0 -3.5rem;transition: transform 0.3s ease;will-change: transform;}
.section05 .slide_set .item .img {position: relative;width: 100%;height: 100%;background: no-repeat center center;background-size: cover;border-radius: 1rem;transform-origin: center center;transform: scale(0.7);filter: grayscale(1);transition: all 0.3s ease, width 0s, border-radius 0s;}
.section05 .slide_set .item1 .img {background-image: url("../images/sec05_slide01@1.5x.jpg?v=2");}
.section05 .slide_set .item2 .img {background-image: url("../images/sec05_slide02@1.5x.jpg?v=2");}
.section05 .slide_set .item3 .img {background-image: url("../images/sec05_slide03@1.5x.jpg?v=2");}
.section05 .slide_set .item4 .img {background-image: url("../images/sec05_slide04@1.5x.jpg?v=2");}
.section05 .slide_set .item5 .img {background-image: url("../images/sec05_slide05@1.5x.jpg?v=2");}
.section05 .slide_set .item6 .img {background-image: url("../images/sec05_slide06@1.5x.jpg");}
.section05 .slide_set .item7 .img {background-image: url("../images/sec05_slide07@1.5x.jpg");}
.section05 .slide_set .item8 .img {background-image: url("../images/sec05_slide08@1.5x.jpg");}
.section05 .slide_set .item .img::after {content:'';position: absolute;left: 50%;top: 50%;z-index: 1;width: calc(100% + 0.6rem);height: calc(100% + 0.6rem);background-color: #B6B6B6;-webkit-mask: url("../images/sec05_slide_border@1.5x.png") no-repeat center center;-webkit-mask-size: 100% 100%;transform: translate(-50%, -50%);transition: background 0.3s ease;}
.section05 .slide_set .slick-active-m .img {transform: scale(1);filter: grayscale(0);will-change: transform;}
.section05 .slide_set .slick-active-m .img::after {background-color: #fff;}
.section05 .slide_set .slick-active-m-prev {transform: translateX(-3.5rem);}
.section05 .slide_set .slick-active-m-next {transform: translateX(3.5rem);}
.section05 .slide_set .ctrl_set {display: flex;align-items: center;justify-content: center;gap: 1rem;margin: 2.1rem 0 0;}
.section05 .slide_set .slide_arrow {
position: relative;
display: block;
width: 3rem;aspect-ratio: 50/50;
background: transparent;
transition: background 0.3s ease;
font-size: 0;
}
.section05 .slide_set .slide_arrow::after {content:'';position: absolute;left: 0;top: 0;z-index: 0;width: 100%;height: 100%;background: url('data:image/svg+xml,') no-repeat center center;background-size: auto 60%;}
.section05 .slide_set .slide_next::after {transform: rotate(180deg);}
.section05 .slide_set .slick-dots {display: flex;align-items: center;justify-content: center;gap: 1rem;}
.section05 .slide_set .slick-dots li {font-size: 0;}
.section05 .slide_set .slick-dots li button {font-size: 0;display: block;opacity: 0.4;width: 0.8rem;aspect-ratio: 5/5;background: #006EFF;border-radius: 100%;transition: opacity 0.3s ease;}
.section05 .slide_set .slick-dots li.slick-active button {opacity: 1;}
.section05 .sticker_set {}
.section05 .sticker_set .sticker {position: absolute;z-index: 1;background: no-repeat center center;background-size: 100% 100%;pointer-events: none;}
.section05 .sticker_set .sticker.cursor {left: calc(50% + 21.2rem);bottom: 1rem;width: 4.7rem;aspect-ratio: 47/75;background-image: url("../images/sticker_cursor@1.5x.png");}
.section05 .sticker_set .sticker.summer {right: calc(50% + 45.3rem);bottom: 6.7rem;width: 21.7rem;aspect-ratio: 217/162;background-image: url("../images/sticker_summer@1.5x.png");animation: slide_sticker_ani 1s ease-in-out infinite;}
.section05 .sticker_set .sticker.school {left: calc(50% + 33.8rem);top: 4.6rem;width: 18.2rem;aspect-ratio: 182/96;background-image: url("../images/sticker_school@1.5x.png");animation: slide_sticker_ani 1s ease-in-out infinite;}
@keyframes slide_sticker_ani {
0% {transform: scale(1);}
50% {transform: scale(1.1);}
}
/* section06 */
.section06 {position: relative;background: url("../images/sec06_bg@1.5x.jpg") repeat-x center center;background-size: auto 100%;}
.section06 .in {padding: 10rem 0 9.7rem;}
.section06 .tit_set {margin: 0 0 4.7rem;}
.section06 .tit_set .sec_tit {font-family: var(--ft-paper);font-weight: 700;color: #006EFF;font-size: 3.5rem;line-height: 135%;text-align: center;}
.section06 .message_set {}
.section06 .message_set .item {position: relative;z-index: 0;display: block;width: 73.4rem;aspect-ratio: 734/135;padding: 2.9rem 0 0;margin: 0 auto 4.6rem;}
.section06 .message_set .item:last-child {margin-bottom: 0;}
.section06 .message_set .item::before {content:'';position: absolute;left: 0;top: 0;z-index: -1;display: block;width: 100%;height: 100%;background: url("../images/sec06_bubble_bg@1.5x.png") no-repeat center center;background-size: 100% 100%;pointer-events: none;}
.section06 .message_set .item2::before {transform: rotateY(180deg);}
.section06 .message_set .item::after {content:'';position: absolute;z-index: 1;display: block;background: no-repeat center center;background-size: 100% 100%;pointer-events: none;}
.section06 .message_set .item1::after {right: calc(100% + 3.2rem);top: 0.3rem;width: 15rem;aspect-ratio: 150/132;background-image: url("../images/sec06_sticker01@1.5x.png");}
.section06 .message_set .item2::after {left: calc(100% + 1.6rem);top: -2.5rem;width: 17.4rem;aspect-ratio: 5/5;background-image: url("../images/sec06_sticker02@1.5x.png");}
.section06 .message_set .item3::after {right: calc(100% + 3.3rem);top: -0.5rem;width: 14.6rem;aspect-ratio: 5/5;background-image: url("../images/sec06_sticker03@1.5x.png");}
.section06 .message_set .item .tit {font-family: var(--ft-paper);font-weight: 600;color: #fff;font-size: 1.8rem;line-height: 135%;text-align: center;margin-bottom: 0.7rem;}
.section06 .message_set .item .txt {color: #fff;font-size: 1.6rem;font-weight: 400;line-height: 140%;letter-spacing: -0.01em;text-align: center;}
/* show */
.section06 .message_set .item {opacity: 0;transition: opacity 0.3s ease;}
.section06[data-show="y"] .message_set .item {opacity: 1;}
.section06[data-show="y"] .message_set .item1 {transition-delay: 0s;}
.section06[data-show="y"] .message_set .item2 {transition-delay: 0.3s;}
.section06[data-show="y"] .message_set .item3 {transition-delay: 0.6s;}
/* section07 */
.section07 {position: relative;height: 78rem;background: url("../images/sec07_bg@1.5x.jpg") repeat-x center center;background-size: auto 100%;}
.section07 .in {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;height: 100%;padding-top: 2rem;}
.section07 .tit_set {margin: 0 0 4rem;}
.section07 .tit_set .s_tit {font-family: var(--ft-paper);font-weight: 500;color: #fff;font-size: 2.5rem;line-height: 135%;}
.section07 .tit_set .sec_tit {font-family: var(--ft-paper);font-weight: 700;color: #fff;font-size: 3.5rem;line-height: 135%;margin: 0.5rem 0 1.5rem;}
.section07 .tit_set .s_txt {color: #fff;font-size: 2.2rem;font-weight: 400;line-height: 140%;letter-spacing: -0.01em;}
.section07 .btn_badge_set .btn {background-color: #F78AFF;text-align: left;}
.section07 .btn_badge_set .btn .btn_txt {color: #fff;}
.section07 .btn_badge_set .btn .btn_arr {background-color: #fff;}
.section07 .btn_badge_set .desc {color: #B0B8BE;text-align: center;margin: 1.5rem 0 0;}
@media (min-width: 1001px) {
.section07 .btn_badge_set .btn:hover {background-color: #93F4FF;}
.section07 .btn_badge_set .btn:hover .btn_txt {color: #1245B0;}
.section07 .btn_badge_set .btn:hover .btn_arr {background-color: #006EFF;}
}
/* section_tab */
.section_tab {position: relative;background: #E2EAF0;}
.section_tab .in {width: 90rem;margin: 0 auto;padding: 10rem 0;}
.section_tab .sec_tit {font-family: var(--ft-paper);font-weight: 700;color: #006EFF;font-size: 3.5rem;line-height: 135%;text-align: center;margin-bottom: 4.5rem;}
.section_tab .tab_list {}
.section_tab .tab_list li {background: #fff;border-radius: 1rem;margin-bottom: 1.5rem;}
.section_tab .tab_list li:last-child {margin-bottom: 0;}
.section_tab .tab_list .head {}
.section_tab .tab_list .head button {
position: relative;display: flex;align-items: center;gap: 2.5rem;width: 100%;min-height: 7.8rem;
color: #121212;font-size: 1.8rem;font-weight: 600;line-height: 120%;text-align: left;
padding: 0 4rem;
transition: all 0.3s ease;
}
.section_tab .tab_list .head button::before {content:'Q';flex-shrink: 0;color: #0048FF;font-size: 2rem;font-weight: 900;line-height: 120%;}
.section_tab .tab_list .head button::after {
content: '';flex-shrink: 0;margin-left: auto;
display: block;width: 2.2rem;aspect-ratio: 22/14;
background-color: #0048FF;
-webkit-mask: url('data:image/svg+xml,') no-repeat center center;
-webkit-mask-size: 100% 100%;
transform: rotate(0);
}
.section_tab .tab_list .body {
position: relative;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
}
.section_tab .tab_list .body::before {content: 'A';position: absolute;left: 4rem;top: 2.5rem;z-index: 1;color: #0048FF;font-size: 2rem;font-weight: 900;line-height: 120%;}
.section_tab .tab_list .body .inner {position: relative;color: #121212;font-size: 1.6rem;font-weight: 400;line-height: 150%;letter-spacing: -0.03em;padding: 2.2rem 2.5rem 2rem 8rem;}
.section_tab .tab_list .body .inner::before {content:'';position: absolute;left: 50%;top: 0;z-index: 0;width: calc(100% - 6.2rem);height: 0.4rem;background: url("../images/tab_head_line@1.5x.png") no-repeat center center;background-size: 100% 100%;transform: translateX(-50%);}
.section_tab .tab_list .body .inner .bold {font-weight: 600;}
.section_tab .tab_list .body .inner a {display: inline;}
.section_tab .tab_list .body .inner .use {display: inline-block;color: #006EFF;font-weight: 600;}
.section_tab .tab_list .body .inner .use em {text-decoration-line: underline;text-underline-offset: 0.3rem;text-decoration-thickness: 0.2rem;}
.section_tab .tab_list li .head.show button::after {transform: rotate(180deg);}
.section_tab .tab_list li .head.show + .body {max-height: var(--max-height);}
/* footer */
.footer {position: relative;background: #0A39C3;}
.footer .in {display: flex;flex-wrap: wrap;max-width: 105rem;margin: 0 auto;padding: 8rem 0;}
.footer .logo_set .logo {width: 15.1rem;aspect-ratio: 115/44;background: url("../images/logo@2x.png") no-repeat center center;background-size: 100% 100%;}
.footer .link_set {display: flex;gap: 1rem;margin: auto 0 auto auto;}
.footer .link_set li {}
.footer .link_set li a {display: block;width: 4.4rem;aspect-ratio: 5/5;background: #f5f5f5 no-repeat center center;background-size: cover;border-radius: 0.5rem;}
.footer .link_set .youtube {background-image: url("../images/footer_link_youtube@1.5x.jpg");}
.footer .link_set .instargram {background-image: url("../images/footer_link_instargram@1.5x.jpg");}
.footer .link_set .threads {background-image: url("../images/footer_link_threads@1.5x.jpg");}
.footer .link_set .kakao {background-image: url("../images/footer_link_kakao@1.5x.jpg");}
.footer .address {flex: 1 1 100%;color: #BABABA;font-size: 1.5rem;font-weight: 400;line-height: 200%;letter-spacing: -0.02em;margin-top: 3.5rem;}
.footer .address a {display: inline;}
.footer .copyright {display: flex;justify-content: center;color: #DCDCDC;font-size: 1.4rem;font-weight: 400;line-height: 2.2rem;opacity: 0.5;margin-top: 1rem;}
/* popup 팝업 */
.popup {
position: fixed;top: 0;left: 0;z-index: -1;opacity: 0;
display: flex;flex-wrap: wrap;justify-content: center;align-items: center;
width: 100%;height: 100%;overflow-y: auto;
padding: 5rem 0;
transition: opacity 0.3s ease, z-index 0s 0.3s linear;
}
.popup[data-show="y"] {z-index: 200;opacity: 1;transition: opacity 0.3s ease, z-index 0s linear;}
.popup .popup_dimmed {position: fixed;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;background: rgba(18,18,18,0.6);}
.popup .popup_wrap {}
.popup .popup_inner {position: relative;}
.popup .btn_pop_close {
position: absolute;right: 1.3rem;top: 5.7rem;z-index: 1;
display: block;width: 7rem;aspect-ratio: 5/5;
}
.popup .btn_pop_close::after {
content:'';
position: absolute;left: 50%;top: 50%;z-index: 1;
transform: translate(-50%, -50%);
width: 3.6rem;aspect-ratio: 5/5;
background-color: #006EFF;
-webkit-mask: url('data:image/svg+xml,') no-repeat center center;
-webkit-mask-size: contain;
}
/* popup_mission */
.popup_mission {}
.popup_mission::after{
/* 소스만 다운받고 화면은 나태내지 않는다. (숨김 처리) */
position:absolute;
width:0;
height:0;
overflow:hidden;
z-index:-1;
/* load images */
content:url("../images/popup_mission01_bg@1.5x.png?v=2") url("../images/popup_mission02_bg@1.5x.png?v=3") url("../images/popup_mission03_bg@1.5x.png?v=3"); /* 필요한 이미지 소스들 다운 */
}
.popup_mission .popup_wrap {}
.popup_mission .popup_inner {width: 91.2rem;height: 58.9rem;background: no-repeat left top;background-size: 100% 100%;}
.popup_mission[data-tab="1"] .popup_inner {background-image: url("../images/popup_mission01_bg@1.5x.png?v=2");}
.popup_mission[data-tab="2"] .popup_inner {background-image: url("../images/popup_mission02_bg@1.5x.png?v=3");}
.popup_mission[data-tab="3"] .popup_inner {background-image: url("../images/popup_mission03_bg@1.5x.png?v=3");}
.popup_mission .tab_menu {display: flex;}
.popup_mission .tab_menu li {position: relative;flex: 0 0 24.6rem;}
.popup_mission .tab_menu li label {display: block;width: 100%;height: 5.6rem;cursor: pointer;}
.popup_mission .mission_wrap .tab_list .content {display: none;}
.popup_mission[data-tab="1"] .mission_wrap .tab_list .content:nth-child(1) {display: block;}
.popup_mission[data-tab="2"] .mission_wrap .tab_list .content:nth-child(2) {display: block;}
.popup_mission[data-tab="3"] .mission_wrap .tab_list .content:nth-child(3) {display: block;}
.popup_mission .mission_wrap .tab_list .content .c_in {display: flex;gap: 5rem;padding: 5.2rem 0 6.5rem 17.5rem;}
.popup_mission .mission_wrap .tab_list .img_set {width: 27.8rem;aspect-ratio: 278/410;background: no-repeat left top;background-size: cover;border-radius: 0.5rem;}
.popup_mission .mission_wrap .tab_list .content:nth-child(1) .img_set {background-image: url("../images/popup_mission01_img@1.5x.jpg?v=2");box-shadow: 0.3rem 0.3rem 0 0 rgba(10, 57, 195, 0.30);}
.popup_mission .mission_wrap .tab_list .content:nth-child(2) .img_set {background-image: url("../images/popup_mission02_img@1.5x.jpg?v=2");box-shadow: 0.3rem 0.3rem 0 0 rgba(10, 155, 195, 0.30);}
.popup_mission .mission_wrap .tab_list .content:nth-child(3) .img_set {background-image: url("../images/popup_mission03_img@1.5x.jpg?v=2");box-shadow: 0.3rem 0.3rem 0 0 rgba(247, 138, 255, 0.30);}
.popup_mission .mission_wrap .tab_list .txt_set {padding: 3rem 0 0;}
.popup_mission .mission_wrap .tab_list .txt_set .s_tit {font-family: var(--ft-paper);font-weight: 500;color: #006EFF;font-size: 2.5rem;line-height: 135%;}
.popup_mission .mission_wrap .tab_list .txt_set .tit {font-family: var(--ft-paper);font-weight: 700;color: #006EFF;font-size: 3.5rem;line-height: 125%;margin: 0.2rem 0 1.2rem;}
.popup_mission .mission_wrap .tab_list .txt_set .txt {color: #121212;font-size: 1.6rem;font-weight: 500;line-height: 140%;letter-spacing: -0.01em;}
.popup_mission[data-tab="12"] .mission_wrap .tab_list .txt_set .s_tit {color: #006EFF;}
.popup_mission[data-tab="1"] .mission_wrap .tab_list .txt_set .tit {color: #006EFF;}
.popup_mission[data-tab="2"] .mission_wrap .tab_list .txt_set .s_tit {color: #EF9F37;}
.popup_mission[data-tab="2"] .mission_wrap .tab_list .txt_set .tit {color: #EF9F37;}
.popup_mission[data-tab="3"] .mission_wrap .tab_list .txt_set .s_tit {color: #EE85F6;}
.popup_mission[data-tab="3"] .mission_wrap .tab_list .txt_set .tit {color: #EE85F6;}
/* popup_recycled */
.popup_recycled[data-show="y"] {z-index: 400;}
.popup_recycled .popup_inner {width: 100%;max-width: 128rem;background: #fff;border-radius: 1rem;padding: 7.7rem 11.5rem;}
@media (min-width: 1001px) {
.popup_recycled .btn_pop_close {right: 0.3rem;top: 0.3rem;}
}
.popup_recycled .pop_tit {font-family: var(--ft-paper);font-weight: 700;color: #006EFF;font-size: 3.5rem;line-height: 135%;text-align: center;margin-bottom: 1rem;}
.popup_recycled .pop_txt {color: #121212;font-size: 2.2rem;font-weight: 500;line-height: 135%;letter-spacing: -0.01em;text-align: center;}
.popup_recycled .cont_set {display: inline-block;background: url("../images/popup_recycled_border@1.5x.png") no-repeat center center;background-size: 100% 100%;padding: 5.5rem 4.5rem 3.4rem;margin: 4rem 0 0;}
.popup_recycled .process_set {}
.popup_recycled .process_set .list {display: flex;justify-content: center;gap: 1.5rem;margin-bottom: 3rem;}
.popup_recycled .process_set .item {position: relative;background: no-repeat center center;background-size: cover;border-radius: 1rem;text-align: center;}
.popup_recycled .process_set .item .image {position: relative;width: 31rem;aspect-ratio: 310/210;background: no-repeat center center;background-size: cover;border-radius: 1rem;text-align: center;}
.popup_recycled .process_set .item1 .image {background-image: url("../images/popup_recycled01_img@1.5x.jpg");}
.popup_recycled .process_set .item2 .image {background-image: url("../images/popup_recycled02_img@1.5x.jpg");}
.popup_recycled .process_set .item3 .image {background-image: url("../images/popup_recycled03_img@1.5x.jpg?v=2");}
.popup_recycled .process_set .item .step {position: absolute;left: 50%;top: -2.1rem;z-index: 1;width: 8.2rem;aspect-ratio: 82/45;background: no-repeat center center;background-size: 100% 100%;transform: translateX(-50%);}
.popup_recycled .process_set .item1 .step {background-image: url("../images/popup_recycled01_badge@1.5x.png");}
.popup_recycled .process_set .item2 .step {background-image: url("../images/popup_recycled02_badge@1.5x.png");}
.popup_recycled .process_set .item3 .step {background-image: url("../images/popup_recycled03_badge@1.5x.png");}
.popup_recycled .process_set .item .txt {color: #121212;font-size: 1.6rem;font-weight: 500;line-height: 140%;letter-spacing: -0.01em;text-align: center;margin-top: 1.8rem;}
.popup_recycled .sunday {position: relative;display: flex;align-items: center;gap: 5rem;padding: 2.8rem 0 0;margin: 2.8rem 0 0;}
.popup_recycled .sunday::before {content:'';position: absolute;left: 50%;top: 0;z-index: 1;width: 100%;height: 0.4rem;background: url("../images/popup_recycled_border_line@1.5x.png") no-repeat center center;background-size: 100% 100%;transform: translateX(-50%);}
.popup_recycled .sunday .img {flex: 0 0 auto;display: block;width: 25.8rem;aspect-ratio: 258/110;background: #FFFF00 url("../images/popup_recycled_sunday@1.5x.jpg") no-repeat center center;background-size: contain;}
.popup_recycled .sunday .txt {flex: 1 1 auto;color: #121212;font-size: 1.6rem;font-weight: 500;line-height: 140%;letter-spacing: -0.01em;text-align: left;}
.popup_recycled .logo_set {position: absolute;left: 3rem;top: 3rem;z-index: -1;opacity: 0;transition: opacity 0.3s ease, z-index 0.3s ease;}
.popup_recycled .logo_set[data-show="y"] {opacity: 1;z-index: 200;}
.popup_recycled .logo_set .logo {position: relative;width: 11.5rem;aspect-ratio: 115/44;background-color: #fff;-webkit-mask: url("../images/logo@2x.png") no-repeat center center;-webkit-mask-size: 100% 100%;transition: background-color 0.3s ease;}
.popup_recycled .logo_set[data-color="wh"] .logo {background-color: #fff;}
.popup_recycled .logo_set[data-color="bl"] .logo {background-color: #0A39C3;}
.popup_recycled .btn {display: none;}
@media (max-width: 1000px) {
html {font-size: 10px;}
.ver_pc {display: none;}
.ver_mo {display: block;}
.bold_mo {font-weight: 700;}
.btn_badge_set .btn {width: 65rem;aspect-ratio: 650/180;border-radius: 1.2rem;padding: 4.2rem 0 0 7rem;}
.btn_badge_set .btn .btn_txt {font-size: 3.6rem;}
.btn_badge_set .btn .btn_arr {right: 7.1rem;bottom: 4.8rem;width: 12.2rem;aspect-ratio: 122/36;-webkit-mask: url('data:image/svg+xml,') no-repeat center center;-webkit-mask-size: contain;}
.btn_badge_set .btn .badge {right: -5.6rem;top: -6.1rem;width: 21.4rem;aspect-ratio: 214/108;}
.btn_badge_set .btn .badge .b01 {background-image: url("../images/mo_btn_badge_6001@1.5x.png");}
.btn_badge_set .btn .badge .b02 {background-image: url("../images/mo_btn_badge_cool@1.5x.png");}
.btn_badge_set .desc {font-size: 2.8rem;text-align: center;}
.wrap_fixed .logo_set {left: 4rem;top: 4rem;}
.wrap_fixed .logo_set .logo {width: 14.4rem;}
.wrap_fixed .sticky_set {right: auto;left: 0;bottom: 1.5rem;width: 100%;transform: translateY(calc(100% + 9rem));}
.wrap_fixed .sticky_set .btn_sticky {width: 69.2rem;aspect-ratio: 692/168;background: url("../images/mo_sticky_btn@1.5x.png?v=2") no-repeat center center;background-size: contain;margin: 0 auto;}
.wrap_fixed .sticky_set .btn_sticky::after {content:'';position: absolute;right: 8.1rem;bottom: 1.4rem;z-index: 1;display: block;width: 18.1rem;aspect-ratio: 181/239;background: url("../images/mo_sticky_btn_img@1.5x.png?v=2") no-repeat center center;background-size: contain;pointer-events: none;}
.section_visual {
background-color: #0089F8;
background-image: url("../images/mo_main_bg_sticker@1.5x.png"), url("../images/mo_main_bg@1.5x.jpg");
background-repeat: no-repeat, repeat-x;
background-position: center center, center center;
background-size: auto 100%, auto 100%;
width: 100%;
height: 100vh;
--parent-height: 100vh;
}
@supports (height: 100svh) {
.section_visual_dummy {height: 100svh;}
.section_visual {
height: 100svh;
--parent-height: 100svh;
}
}
html.inapp .section_visual_dummy {height: calc((var(--vh, 1vh) * 100));}
html.inapp .section_visual {
height: calc((var(--vh, 1vh) * 100));
--parent-height: calc((var(--vh, 1vh) * 100));
}
.section_visual::before {
content:'';position: absolute;left: 0;top: 100%;z-index: 0;
width: 100%;height: var(--parent-height);background: #0089F8;
}
.section_visual .in {width: 100%;}
.section_visual .tit_set {width: 100%;}
.section_visual .tit_set .sec_tit {width: 100%;max-width: 87.2rem;height: 65rem;aspect-ratio: unset;background: url("../images/mo_main_title@1.5x.png") no-repeat center center;background-size: auto 100%;margin: 0 auto;}
.section_visual .scroll_set {bottom: 25.7rem;}
.section_visual .scroll_set .arr {width: 3.1rem;margin: 0 auto 0.7rem;}
.section_visual .scroll_set .txt {font-size: 2.4rem;}
@keyframes scroll_ani {
0% {transform: translateY(0);}
50% {transform: translateY(1rem);}
}
.sec01_sticky_outer::before {content: '';display: block;width: 100%;height: 19.2rem;background: url("../images/mo_sec01_bg_top@1.5x.png?v=2") no-repeat center center;background-size: auto 100%;}
.sec01_sticky_outer .sec01_sticky_in {height: auto;}
.section01 {position: static;height: auto;background: unset;}
.section01 .sub_sec {position: relative;}
.section01 .sub_sec .scroll_set {display: none;}
.section01 .sub01 {
height: 134rem;
background: url("../images/mo_sec01_sub01_bg@1.5x.jpg?v=2") no-repeat center center;
background-size: auto 100%;
}
.section01 .sub01 .sec_tit {width: 49.8rem;aspect-ratio: 498/364;background-image: url("../images/mo_sec01_sub01_tit@1.5x.png");top: calc(50% - 14.8rem);transform: translateX(-50%);}
.section01 .sub01::after {content:'';position: absolute;right: 0;top: 3.5rem;z-index: 2;width: 13.5rem;aspect-ratio: 135/272;background: url("../images/mo_sec01_sub01_side@1.5x.png") no-repeat center center;background-size: contain;pointer-events: none;}
.section01 .sub02 {
height: 119.2rem;
background: url("../images/mo_sec01_sub02_bg@1.5x.jpg?v=2") no-repeat center center;
background-size: auto 100%;
}
.section01 .sub02 .sec_tit {width: 60.8rem;aspect-ratio: 608/340;background-image: url("../images/mo_sec01_sub02_tit@1.5x.png");top: calc(50% - 17.5rem);transform: translateX(-50%);}
.section01 .sub02::after {content:'';position: absolute;left: 0;bottom: 14.7rem;z-index: 2;width: 9rem;aspect-ratio: 90/482;background: url("../images/mo_sec01_sub02_side@1.5x.png") no-repeat center center;background-size: contain;pointer-events: none;}
/* show */
.section01 .sub01 .sec_tit,
.section01 .sub02 .sec_tit {opacity: 0;transition: opacity 0.3s ease;}
.section01 .sub01[data-show="y"] .sec_tit,
.section01 .sub02[data-show="y"] .sec_tit {opacity: 1;}
.section01 .sub03 {
height: 144.5rem;
background: url("../images/mo_sec01_sub03_bg@1.5x.jpg?v=2") no-repeat center center;
background-size: auto 100%;
}
.section01 .sub03::before {
content:'';position: absolute;left: 0;top: 0;z-index: 0;
width: 100%;height: 144.5rem;
background: url("../images/mo_sec01_sub03_sticker@1.5x.jpg") no-repeat center center;
background-size: auto 100%;
}
.section01 .sub03 .sec_tit {width: 47.2rem;aspect-ratio: 472/155;background-image: url("../images/mo_sec01_sub03_tit@1.5x.png");top: 50%;transform: translateX(-50%);}
/* show */
.section01 .sub03::before,
.section01 .sub03 .sec_tit {opacity: 0;transition: opacity 0.3s ease;}
.section01 .sub03[data-show="y"]::before {opacity: 1;}
.section01 .sub03[data-show="y"] .sec_tit {opacity: 1;}
.section01 .sub04 {
height: 141.4rem;
background: url("../images/mo_sec01_sub04_bg@1.5x.jpg?v=2") no-repeat center center;
background-size: auto 100%;
}
.section01 .sub04 .sec_in {display: flex;flex-direction: column;align-items: center;padding: 28rem 0 0;}
.section01 .sub04 .page_title {order: 1;width: 66rem;aspect-ratio: 660/256;background: url("../images/mo_sec01_sub04_page_logo@1.5x.png") no-repeat center center;background-size: contain;}
.section01 .sub04 .eyebrow_txt {order: 2;font-size: 4.4rem;text-shadow: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.30);margin: 3rem 0 2.2rem;}
.section01 .sub04 .sec_tit {order: 3;width: 62rem;aspect-ratio: 620/136;background: url("../images/mo_sec01_sub04_tit@1.5x.png") no-repeat center center;background-size: contain;filter: drop-shadow(0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.30));margin: 0 auto;}
/* show */
.section01 .sub04 .eyebrow_txt,
.section01 .sub04 .sec_tit {opacity: 0;transform: translateY(2rem);transition: opacity 0.3s ease, transform 0.3s ease;}
.section01 .sub04[data-show="y"] .eyebrow_txt,
.section01 .sub04[data-show="y"] .sec_tit {opacity: 1;transform: translateY(0);}
.section02 {background-image: url("../images/mo_sec02_bg@1.5x.jpg?v=2");}
.section02 .in {padding: 16rem 0 18rem;}
.section02 .tit_set .sec_tit {font-size: 6rem;letter-spacing: -0.01em;margin-bottom: 2.5rem;}
.section02 .tit_set .s_tit {font-size: 3.2rem;font-weight: 400;line-height: 140%;}
.section02 .mission_set {display: flex;flex-direction: column;width: 73.4rem;background-image: url("../images/mo_sec02_mission_board@1.5x.png");padding: 8.4rem 4.7rem 13.4rem;margin: 6.7rem auto 11rem;}
.section02 .mission_set > p {order: 1;font-family: var(--ft-paper);font-size: 4rem;line-height: 135%;margin-bottom: 10.3rem;}
.section02 .mission_set > p .bold {font-family: var(--ft-paper);}
.section02 .mission_set .list {order: 2;flex-direction: column;align-items: center;gap: 11.3rem;margin: 0;}
.section02 .mission_set .item {width: 100%;aspect-ratio: 640/326;border-radius: 1.2rem;}
.section02 .mission_set .item1 {background-image: url("../images/mo_sec02_mission01_img@1.5x.jpg?v=2");}
.section02 .mission_set .item2 {background-image: url("../images/mo_sec02_mission02_img@1.5x.jpg?v=2");}
.section02 .mission_set .item3 {background-image: url("../images/mo_sec02_mission03_img@1.5x.jpg?v=2");}
.section02 .mission_set .item::after {width: 11.2rem;top: -4.8rem;}
.section02 .mission_set .item .btn {gap: 2rem;width: 41.2rem;bottom: -2.6rem;background: url("../images/mo_sec02_btn_bg@1.5x.png") no-repeat center center;background-size: contain;}
.section02 .mission_set .item .btn::before,
.section02 .mission_set .item .btn::after {content: none;}
.section02 .mission_set .item .btn .btn_txt {font-size: 3.2rem;}
.section02 .mission_set .item .btn .btn_arr {width: 6.2rem;aspect-ratio: 62/24;-webkit-mask: url('data:image/svg+xml,') no-repeat center center;-webkit-mask-size: contain;}
.section02 .how_set {flex-direction: column;align-items: center;gap: 2.8rem;margin: 0;}
.section02 .how_set .how_tit {top: -4rem;font-size: 4.4rem;width: 52.4rem;aspect-ratio: 524/91;background-image: url("../images/mo_sec02_how_tit_bg@1.5x.png")}
.section02 .how_set .img_set {order: 1;width: 73.6rem;height: 42.2rem;background-image: url("../images/mo_sec02_how_img_board@1.5x.png?v=2");}
.section02 .how_set .img_set::after {content: none;}
.section02 .how_set .txt_set {order: 2;width: 73.4rem;height: 35.9rem;background-image: url("../images/mo_sec02_how_board@1.5x.png");padding: 7rem 0 0;}
.section02 .how_set .txt_set .txt p {font-size: 4rem;}
.section02 .how_set .txt_set .txt p:nth-child(2) {font-size: 3.2rem;margin-top: 1.6rem;}
.section03 {background-image: url("../images/mo_sec03_bg@1.5x.jpg?v=2");}
.section03 .in {padding: 16rem 0 25rem;}
.section03 .tit_set .sec_tit {font-size: 6rem;letter-spacing: -0.01em;margin-bottom: 2.5rem;}
.section03 .tit_set .s_tit {font-size: 3.2rem;font-weight: 400;line-height: 140%;}
.section03 .visual_img {width: 73.8rem;aspect-ratio: 738/581;background-image: url("../images/mo_sec03_visual_img@1.5x.png?v=2");margin: 6.8rem auto 11rem;}
.section03 .visual_img .btn {right: auto;left: 50%;bottom: 4.2rem;gap: 2rem;width: 41.2rem;aspect-ratio: 618/129;background: url("../images/mo_sec03_btn_bg@1.5x.png") no-repeat center center;background-size: 100% 100%;transform: translateX(-50%);}
.section03 .visual_img .btn::before,
.section03 .visual_img .btn::after {content: none;}
.section03 .visual_img .btn .btn_txt {color: #1245B0;font-size: 3.2rem;}
.section03 .visual_img .btn .btn_arr {width: 6.2rem;aspect-ratio: 62/24;background-color: #006EFF;-webkit-mask: url('data:image/svg+xml,') no-repeat center center;-webkit-mask-size: contain;}
.section03 .step_set {width: 73.2rem;height: 91.1rem;background-image: url("../images/mo_sec03_step_board@1.5x.png");padding: 15.5rem 0 0;}
.section03 .step_set .step_tit {font-size: 4.4rem;top: -4rem;width: 52rem;aspect-ratio: 520/91;background-image: url("../images/mo_sec03_step_tit_bg@1.5x.png");padding: 1.4rem 0 0;}
.section03 .step_set .slick-list {overflow: visible;}
.section03 .step_set .slick-arrow {
position: absolute;top: 17.7rem;z-index: 1;
width: 7.6rem;aspect-ratio: 5/5;
background: url("../images/slide_arr@1.5x.png") no-repeat center center;
background-size: contain;
transition: background 0.3s ease;
font-size: 0;
}
.section03 .step_set .slick-prev {left: 1.3rem;}
.section03 .step_set .slick-next {right: 1.3rem;transform: rotate(180deg);}
.section03 .step_set .list_set {display: block;}
.section03 .step_set .item .image {width: 64rem;aspect-ratio: 640/430;border-radius: 1.2rem;margin: 0 auto;}
.section03 .step_set .item .step {width: 16.8rem;top: -4.5rem;}
.section03 .step_set .item .tit {font-size: 4rem;margin: 3.5rem 0 1rem;}
.section03 .step_set .item .txt {font-size: 3.2rem;}
.section04 {height: auto;background-image: url("../images/mo_sec04_bg@1.5x.jpg?v=2");}
.section04 .in {flex-direction: column;align-items: center;height: auto;gap: 5rem;padding: 0 0 15.8rem;}
.section04 .goods_set {margin: 0;}
.section04 .goods_set .goods {width: 70rem;aspect-ratio: 700/960;}
.section04 .goods_set .goods::before {background-image: url("../images/mo_sec04_goods_bg@1.5x.png?v=2")}
.section04 .goods_set .goods::after {background-image: url("../images/mo_sec04_goods_img@1.5x.png?v=2")}
.section04 .goods_set .detail {display: none;}
.section04 .tit_set {margin: 0;}
.section04 .tit_set .sec_tit {font-size: 6rem;letter-spacing: -0.01em;text-align: center;margin-bottom: 2.4rem;}
.section04 .tit_set .s_tit {font-size: 3.2rem;text-align: center;}
.section04 .btn_badge_set {margin-top: 8rem;}
.section04 .btn_badge_set .desc {margin: 2rem 0 0;}
.section05 {height: auto;background-image: url("../images/mo_sec05_bg@1.5x.jpg");}
.section05 .in {padding: 20.5rem 0 22rem;}
.section05 .slide_set {width: 64rem;}
.section05 .slide_set .slick-list {margin: 0 2rem;}
.section05 .slide_set .item {margin: 0 -2rem;}
.section05 .slide_set .item .img {transform: scale(0.77);}
.section05 .slide_set .slick-active-m .img {transform: scale(1);}
.section05 .slide_set .slick-active-m-prev {transform: unset;}
.section05 .slide_set .slick-active-m-next {transform: unset;}
.section05 .slide_set .ctrl_set {display: block;margin: 0;}
.section05 .slide_set .slide_arrow {
position: absolute;top: 38.2rem;z-index: 1;
width: 7.6rem;aspect-ratio: 5/5;
background: url("../images/slide_arr@1.5x.png") no-repeat center center;
background-size: contain;
transition: background 0.3s ease;
font-size: 0;
}
.section05 .slide_set .slide_arrow::after {content: none;}
.section05 .slide_set .slide_prev {left: -4.3rem;}
.section05 .slide_set .slide_next {right: -4.3rem;transform: rotate(180deg);}
.section05 .slide_set .slick-dots {position: absolute;left: 50%;bottom: -4.5rem;z-index: 1;gap: 2rem;transform: translateX(-50%);}
.section05 .slide_set .slick-dots li button {width: 1.6rem;}
.section05 .sticker_set .sticker.cursor {left: calc(50% + 28.3rem);bottom: -3.8rem;width: 5.7rem;}
.section05 .sticker_set .sticker.summer {right: calc(50% + 13rem);bottom: -1.4rem;width: 30rem;}
.section05 .sticker_set .sticker.school {left: calc(50% + 14rem);top: -7.7rem;width: 25.3rem;}
.section06 {height: 181.2rem;background-image: url("../images/mo_sec06_bg@1.5x.jpg");}
.section06 .in {padding: 16.3rem 0 0;}
.section06 .tit_set {margin: 0 0 6.5rem;}
.section06 .tit_set .sec_tit {font-size: 6rem;line-height: 125%;letter-spacing: -0.01em;}
.section06 .message_set .item {width: 72.9rem;aspect-ratio: 729/295;padding: 4.7rem 0 0;margin-bottom: 4.1rem;}
.section06 .message_set .item::before {background-image: url("../images/mo_sec06_bubble_bg@1.5x.png")}
.section06 .message_set .item::after {content: none;}
.section06 .message_set .item .tit {font-size: 3.6rem;margin-bottom: 1.6rem;}
.section06 .message_set .item .txt {font-size: 3.2rem;}
.section07 {height: 138.4rem;background-image: url("../images/mo_sec07_bg@1.5x.jpg");}
.section07 .in {padding: 0;}
.section07 .tit_set {margin: 0 0 8rem;}
.section07 .tit_set .s_tit {font-size: 4.4rem;letter-spacing: -0.01em;}
.section07 .tit_set .sec_tit {font-size: 6rem;letter-spacing: -0.01em;margin: 0.8rem 0 2.4rem;}
.section07 .tit_set .s_txt {font-size: 3.2rem;}
.section07 .btn_badge_set .desc {margin: 3rem 0 0;}
.section_tab {}
.section_tab .in {width: 100%;padding: 16.2rem 4rem;}
.section_tab .sec_tit {font-size: 6rem;letter-spacing: -0.01em;margin-bottom: 7.1rem;}
.section_tab .tab_list li {margin-bottom: 1rem;}
.section_tab .tab_list .head button {gap: 2rem;min-height: 12.3rem;font-size: 3rem;line-height: 150%;letter-spacing: -0.01em;padding: 0 3rem;}
.section_tab .tab_list .head button::before {font-size: 3rem;line-height: 150%;letter-spacing: -0.01em;}
.section_tab .tab_list .head button::after {
width: 3.5rem;
-webkit-mask: url('data:image/svg+xml,') no-repeat center center;
-webkit-mask-size: 100% 100%;
}
.section_tab .tab_list .body::before {left: 3rem;top: 4.5rem;font-size: 3rem;line-height: 150%;letter-spacing: -0.01em;}
.section_tab .tab_list .body .inner {font-size: 3rem;letter-spacing: -0.02em;padding: 4.4rem 7rem 5.8rem 7.5rem;}
.footer {}
.footer .in {max-width: unset;flex-direction: column;align-items: center;padding: 10rem 4.5rem;}
.footer .logo_set {order: 1;flex: 0 0 auto;}
.footer .logo_set .logo {width: 14.4rem;}
.footer .address {order: 2;font-size: 2.4rem;line-height: 3.4rem;letter-spacing: 0;text-align: center;margin-top: 4rem;}
.footer .copyright {order: 3;font-size: 2rem;line-height: 3.4rem;margin-top: 2rem;}
.footer .link_set {order: 4;flex: 1 1 100%;justify-content: center;gap: 1.4rem;margin: 4rem auto 0;}
.footer .link_set li a {width: 6rem;border-radius: 0.7rem;}
.popup .btn_pop_close {right: 4rem;top: 4rem;width: 6.4rem;}
.popup .btn_pop_close::after {width: 5rem;}
/* popup_mission */
.popup_mission[data-show="y"] {z-index: 400;}
.popup_mission::after{
/* 소스만 다운받고 화면은 나태내지 않는다. (숨김 처리) */
/* load images */
content:url("../images/mo_popup_mission01_bg@1.5x.png?v=2") url("../images/mo_popup_mission02_bg@1.5x.png?v=2") url("../images/mo_popup_mission03_bg@1.5x.png?v=2"); /* 필요한 이미지 소스들 다운 */
}
.popup_mission .popup_inner {width: 74rem;height: 123.5rem;}
.popup_mission[data-tab="1"] .popup_inner {background-image: url("../images/mo_popup_mission01_bg@1.5x.png?v=2");}
.popup_mission[data-tab="2"] .popup_inner {background-image: url("../images/mo_popup_mission02_bg@1.5x.png?v=2");}
.popup_mission[data-tab="3"] .popup_inner {background-image: url("../images/mo_popup_mission03_bg@1.5x.png?v=2");}
.popup_mission .btn_pop_close {position: fixed;}
.popup_mission .btn_pop_close::after {background-color: #fff;}
.popup_mission .tab_menu li {flex: 0 0 23.5rem;}
.popup_mission .tab_menu li label {height: 12.5rem;}
.popup_mission .mission_wrap .tab_list .content .c_in {display: block;padding: 5rem 0 0;}
.popup_mission .mission_wrap .tab_list .img_set {width: 64rem;aspect-ratio: 640/388;border-radius: 1.2rem;margin: 0 auto;}
.popup_mission .mission_wrap .tab_list .content:nth-child(1) .img_set {background-image: url("../images/mo_popup_mission01_img@1.5x.jpg?v=2");box-shadow: 0.5rem 0.5rem 0 0 rgba(10, 57, 195, 0.30);}
.popup_mission .mission_wrap .tab_list .content:nth-child(2) .img_set {background-image: url("../images/mo_popup_mission02_img@1.5x.jpg?v=2");box-shadow: 0.5rem 0.5rem 0 0 rgba(10, 155, 195, 0.30);}
.popup_mission .mission_wrap .tab_list .content:nth-child(3) .img_set {background-image: url("../images/mo_popup_mission03_img@1.5x.jpg?v=2");box-shadow: 0.5rem 0.5rem 0 0 rgba(247, 138, 255, 0.30);}
.popup_mission .mission_wrap .tab_list .txt_set {padding: 4rem 0 0;text-align: center;}
.popup_mission .mission_wrap .tab_list .txt_set .s_tit {font-size: 4.4rem;letter-spacing: -0.01em;}
.popup_mission .mission_wrap .tab_list .txt_set .tit {font-size: 6rem;line-height: 135%;letter-spacing: -0.01em;margin: 0.8rem 0 2.4rem;}
.popup_mission .mission_wrap .tab_list .txt_set .txt {font-size: 3.3rem;}
.popup_recycled {padding: 0;}
.popup_recycled .popup_wrap {width: 100%;}
.popup_recycled .popup_inner {padding: 14rem 0;border-radius: 0;text-align: center;}
.popup_recycled .pop_tit {font-size: 6rem;letter-spacing: -0.01em;margin-bottom: 2.4rem;}
.popup_recycled .pop_txt {font-size: 3.2rem;line-height: 140%;}
.popup_recycled .cont_set {background: unset;padding: 6rem 0 0;margin: 4rem 0 0;}
.popup_recycled .process_set .list {width: 72rem;flex-direction: column;align-items: center;gap: 8.5rem;margin-bottom: 3rem;}
.popup_recycled .process_set .list .item {display: flex;align-items: center;gap: 5.6rem;width: 100%;background: url("../images/mo_popup_recycled_border@1.5x.png") no-repeat center center;background-size: 100% 100%;}
.popup_recycled .process_set .list .item .image {width: 29rem;aspect-ratio: 290/265;}
.popup_recycled .process_set .item1 .image {background-image: url("../images/mo_popup_recycled01_img@1.5x.jpg");}
.popup_recycled .process_set .item2 .image {background-image: url("../images/mo_popup_recycled02_img@1.5x.jpg");}
.popup_recycled .process_set .item3 .image {background-image: url("../images/mo_popup_recycled03_img@1.5x.jpg?v=2");}
.popup_recycled .process_set .list .item .image::after {content:'';position: absolute;left: 50%;top: 50%;z-index: 0;width: calc(100% + 0.4rem);height: calc(100% + 0.4rem);background: url("../images/mo_popup_recycled_img_border@1.5x.png") no-repeat center center;background-size: 100% 100%;transform: translate(-50%, -50%);}
.popup_recycled .process_set .item .step {width: 14.4rem;top: -3.7rem;}
.popup_recycled .process_set .item .txt {font-size: 3rem;letter-spacing: 0;text-align: left;margin: 0;}
.popup_recycled .sunday {flex-direction: column;gap: 3rem;padding: 8rem 0 0;margin: 8rem 0 0;}
.popup_recycled .sunday::before {height: 0.6rem;background-image: url("../images/mo_popup_recycled_border_line@1.5x.png");}
.popup_recycled .sunday .txt {order: 1;font-size: 3rem;letter-spacing: 0;text-align: center;}
.popup_recycled .sunday .img {order: 2;width: 72rem;aspect-ratio: 720/204;}
.popup_recycled .logo_set {top: 4rem; left: 4rem;}
.popup_recycled .logo_set .logo {width: 14.4rem;}
.popup_recycled .btn {display: block;width: 32.6rem;aspect-ratio: 326/86;background: url("../images/mo_popup_recycled_btn_bg.png") no-repeat center center;background-size: contain;margin: 5.1rem auto 0;}
.popup_recycled .btn .btn_txt {color: #FFF;font-weight: 600;font-size: 3.2rem;line-height: 140%;letter-spacing: -0.01em;transition: color 0.3s ease;}
@media (max-width: 800px) {
html {font-size: calc((10 / 800) * 100vw);}
}
@media (orientation: landscape) {
html {font-size: calc((10 / 1200) * 100vw);}
}
}