html {font-size: calc((10 / 1440) * 100vw);}
.wrap {
position: relative;
width: 100%;
--ft-pretendard: 'Pretendard';
--ft-poppins: 'Poppins';
--ft-supermagic-b: 'Cafe24Supermagic-Bold-v1.0';
--ft-supermagic-r: 'Cafe24Supermagic-Regular-v1.0';
--ft-paper400: 'Paperlogy-4Regular';
--ft-paper500: 'Paperlogy-5Medium';
--ft-paper600: 'Paperlogy-6SemiBold';
--ft-paper700: 'Paperlogy-7Bold';
--ft-paper800: 'Paperlogy-8ExtraBold';
}
/* 공통 */
.bold {font-weight: 700;}
.ver_pc {display: block !important;}
.ver_mo {display: none !important;}
.dis_none {display: none;}
.txt_bg {position: relative;display: inline-block;z-index: 0;}
.txt_bg::after {content:'';position: absolute;top: 50%;left: 50%;z-index: -1;width: 100%;transform: translate(-50%, -50%);}
.btn_sound {
position: absolute;z-index: 10;
height: 2.6rem;aspect-ratio: 38/26;border-radius: 0;border: none;outline: 0;
background: transparent url("../images/sound_sprites@2x.png") no-repeat left center;
background-size: auto 100%;
}
.btn_sound.mute {background-position: left 100% center;}
/* wrap_fixed 로고 */
.wrap_fixed .logo_set {position: fixed;top: 3rem;left: 3rem;z-index: -1;opacity: 0;transition: opacity 0.3s ease, z-index 0s 0.3s linear;}
.wrap_fixed .logo_set[data-show="y"] {opacity: 1;z-index: 300;transition: opacity 0.3s ease, z-index 0s linear;}
.wrap_fixed .logo_set .logo {
position: relative;display: block;width: 12.2rem;aspect-ratio: 122/41;
background-color: #0068B7;
-webkit-mask: url("../images/pc_main_logo@1.5x.png") no-repeat center center;
-webkit-mask-size: 100% auto;
transition: background 0.3s ease;
}
.wrap_fixed .logo_set[data-color="wh"] .logo {background-color: #fff;}
.wrap_fixed .logo_set[data-color="bl"] .logo {background-color: #0068B7;}
/* fixed 스티키버튼 */
.wrap_fixed .sticky_set {position: fixed;right: 3rem;bottom: 0;z-index: 300;transform: translateY(101%);transition: transform 0.3s ease;}
.wrap_fixed .sticky_set[data-show="y"] {transform: translateY(0%);}
.wrap_fixed .sticky_set .btn_sticky {position: relative;z-index: 1;display: flex;align-items: center;justify-content: space-between;width: 35.8rem;aspect-ratio: 358/136;padding: 0 4rem;}
.wrap_fixed .sticky_set .btn_sticky::before {content:'';position: absolute;left: 0;top: 0;z-index: -1;width: 100%;height: 100%;background: url("../images/sticky_bg@1.5x.png") no-repeat center center;background-size: cover;}
.wrap_fixed .sticky_set .btn_sticky .btn_txt {position: relative;color: #fff;font-size: 2.4rem;font-weight: 800;line-height: 135%;}
.wrap_fixed .sticky_set .btn_sticky .btn_arr {flex-shrink: 0;
display: block;
width: 1.5rem;aspect-ratio: 15/26;
background-color: #fff;
-webkit-mask: url('data:image/svg+xml,') no-repeat center center;
-webkit-mask-size: 100% auto;
}
.wrap_fixed .sticky_set .btn_img {
position: absolute;left: 0;bottom: 100%;z-index: -2;
width: 100%;height: 11rem;
background: url("../images/sticky_img@1.5x.png") no-repeat center center;
background-size: 100% auto;
transform: translateY(101%);
transition: transform 0.3s ease;
pointer-events: none;
}
@media (min-width: 1001px) {
.wrap_fixed .sticky_set .btn_sticky:hover .btn_img {transform: translateY(0);}
}
/* fixed 페이지네이션 */
.wrap_fixed .pagination {
position: fixed;left: 3rem;top: 50%;z-index: -1;opacity: 0;
display: flex;align-items: center;gap: 2rem;
color: #0C0C0C;font-size: 1.8rem;font-weight: 400;line-height: 135%;white-space: nowrap;
transform-origin: center top;
transform: translate(-50%, 0) rotate(-90deg);
transition: opacity 0.3s ease, z-index 0s 0.3s linear;
}
.wrap_fixed .pagination[data-show="y"] {opacity: 1;z-index: 299;transition: opacity 0.3s ease, z-index 0s linear;}
.wrap_fixed .pagination > p,
.wrap_fixed .pagination ul {position: absolute;top: 50%;z-index: 0;transform: translateY(-50%);}
.wrap_fixed .pagination > p {right: calc(100% + 2rem);font-weight: 600;transition: color 0.3s ease;}
.wrap_fixed .pagination .line {position: relative;display: flex;align-items: center;width: 7.6rem;height: 2.5rem;transition: background 0.3s ease;}
.wrap_fixed .pagination .line::after {content:'';display: block;width: 100%;height: 1px;background: #0c0c0c;transition: background 0.3s ease;}
.wrap_fixed .pagination ul {left: calc(100% + 2rem);}
.wrap_fixed .pagination ul li {position: absolute;left: 0;top: 50%;z-index: 0;transform: translateY(-50%);overflow: hidden;pointer-events: none;}
.wrap_fixed .pagination ul li button {font-family: var(--ft-poppins);transform: translateY(-100%);transition: color 0.3s ease, transform 0.3s ease;}
.wrap_fixed .pagination[data-step="0"] ul li:nth-child(1) button,
.wrap_fixed .pagination[data-step="1"] ul li:nth-child(2) button,
.wrap_fixed .pagination[data-step="2"] ul li:nth-child(3) button,
.wrap_fixed .pagination[data-step="3"] ul li:nth-child(4) button,
.wrap_fixed .pagination[data-step="4"] ul li:nth-child(5) button,
.wrap_fixed .pagination[data-step="5"] ul li:nth-child(6) button {transform: translateY(0%);transition: color 0.3s ease, transform 0.3s 0.15s ease;}
.wrap_fixed .pagination[data-color="bk"] > p {color: #0C0C0C;}
.wrap_fixed .pagination[data-color="bk"] .line::after {background: #0C0C0C;}
.wrap_fixed .pagination[data-color="bk"] ul li button {color: #0C0C0C;}
.wrap_fixed .pagination[data-color="wh"] > p {color: #fff;}
.wrap_fixed .pagination[data-color="wh"] .line::after {background: #fff;}
.wrap_fixed .pagination[data-color="wh"] ul li button {color: #fff;}
/* section_visual */
.visual_sticky_outer {
--parent-height: 100vh;
height: calc(var(--parent-height) * 2.5);
}
.section_visual {
position: sticky;top: 0;
height: var(--parent-height);
background-image:
url("../images/pc_main_bg_open@1.5x.png"),
url("../images/pc_main_bg_left@1.5x.png"),
url("../images/pc_main_bg_right@1.5x.png"),
url("../images/pc_main_bg_light@1.5x.png"),
url("../images/pc_main_bg@1.5x.jpg")
;
background-repeat: no-repeat, repeat-y, repeat-y, no-repeat, no-repeat;
background-position: left top, left top, right top, right top, center top;
background-size:
52rem auto,
52rem auto,
3.2rem auto,
33rem auto,
cover
;
overflow: hidden;
}
.section_visual .in {}
.section_visual .bg_shutter {
position: absolute;left: 0;top: 0;z-index: 1;width: 100%;height: 100%;
background-image: url("../images/main_bg_shutter.jpg"), url("../images/main_bg_shutter_pattern.jpg");
background-repeat: no-repeat, repeat-x;
background-position: center center, center center;
background-size: auto 100%, auto 100%;
}
.section_visual .model_set {}
.section_visual .model_set .model,
.section_visual .model_set .model_hand {position: absolute;left: 50%;bottom: 0;height: 80rem;aspect-ratio: 600/800;background: no-repeat center bottom;background-size: 100% auto;transform: translateX(-50%);pointer-events: none;}
.section_visual .model_set .model {z-index: 2;background-image: url("../images/main_model@1.5x.png");}
.section_visual .model_set .model_hand {z-index: 4;background-image: url("../images/main_model_hand@1.5x.png");}
.section_visual .tit_set {position: absolute;left: 50%;bottom: 7.6rem;z-index: 3;display: block;width: 52.7rem;aspect-ratio: 527/371;background: #9AB8D7;padding: 1.7rem 1.6rem 0;transform: translateX(-50%);/*overflow: hidden;*/perspective: 1000px;}
.section_visual .tit_set .bg_inner {
position: relative;
display: block;width: 100%;height: 25.9rem;
background: #FFF9EA url("../images/main_tit_paper@2x.png") no-repeat right top;
background-size: 5.9rem auto;
clip-path: polygon(92.19% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 29.44%);
}
.section_visual .tit_set .line {
display: none;
position: absolute;left: 50%;bottom: 9.4rem;z-index: 1;
width: calc(100% - 3.2rem);height: 0.2rem;
background: #FFF9EA;
transform: translateX(-50%);
}
.section_visual .tit_set .sec_tit.before {
position: absolute;left: 0;top: 0;z-index: 0;
width: 100%;height: 100%;
background: url("../images/main_tit_before@2x.png") no-repeat center top;
background-size: 100% auto;
}
.section_visual .tit_set .sec_tit.after {
position: relative;z-index: 10;
width: 100%;height: 9.5rem;
transform-style: preserve-3d;
transition: transform 0.4s ease;
transform-origin: center top;
perspective: 30rem;
will-change: transform;
}
.section_visual .tit_set .sec_tit.after > span {position: absolute;top: 0;left: 0;width: 100%;height: 100%;backface-visibility: hidden;}
.section_visual .tit_set .sec_tit.after .front {background: #fff9ea;}
.section_visual .tit_set .sec_tit.after .back {
background: #0068B7 url("../images/main_tit_after@2x.png") no-repeat center bottom;
background-size: auto 100%;
transform: rotateX(180deg);
}
.section_visual .txt_set {position: absolute;left: calc(50% + 9.3rem);bottom: calc(50% + 14.2rem);z-index: 0;}
.section_visual .txt_set .txt {position: relative;font-family: var(--ft-supermagic-b);color: #0c0c0c;font-size: 2.8rem;font-weight: 700;line-height: 135%;}
.section_visual .txt_set .txt::before,
.section_visual .txt_set .txt::after {content:'';position: absolute;z-index: 0;display: block;width: 1.6rem;aspect-ratio: 16/13;background: url('data:image/svg+xml,') no-repeat center center;background-size: 100% auto;}
.section_visual .txt_set .txt::before {left: -2rem;top: 0.7rem;}
.section_visual .txt_set .txt::after {right: -2.2rem;bottom: 1.8rem;transform: rotate(180deg);}
.section_visual .scroll_set {position: absolute;left: 50%;bottom:5.3rem;z-index: 10;transform:translateX(-50%);}
.section_visual .scroll_set .arr {position:relative;display: block;width: 6rem;aspect-ratio: 5/5;background: rgba(255,255,255, 0.8) url('data:image/svg+xml,') no-repeat center center;background-size: auto 43.33%;border-radius: 100%;}
@media (min-width: 1001px){
.section_visual .scroll_set .arr {animation: main_scroll_ani 1s ease-in-out infinite;}
@keyframes main_scroll_ani {
0% {transform: translateY(0);}
50% {transform: translateY(1rem);}
}
/* vh */
@media (max-height: 800px) {
.section_visual {
background-size:
calc(var(--parent-height) * (520 / 800)) auto,
calc(var(--parent-height) * (520 / 800)) auto,
calc(var(--parent-height) * (32 / 800)) auto,
calc(var(--parent-height) * (330 / 800)) auto,
cover
;
}
}
.section_visual .model_set .model,
.section_visual .model_set .model_hand {height: calc(var(--parent-height) * (800 / 800));}
.section_visual .tit_set {bottom: calc(var(--parent-height) * (76 / 800));width: calc(var(--parent-height) * (527 / 800));padding: calc(var(--parent-height) * (17 / 800)) calc(var(--parent-height) * (16 / 800)) 0;}
.section_visual .tit_set .bg_inner {height: calc(var(--parent-height) * (259 / 800));background-size: calc(var(--parent-height) * (59 / 800)) auto;}
.section_visual .tit_set .line {bottom: calc(var(--parent-height) * (94 / 800));width: calc(100% - calc(var(--parent-height) * (32 / 800)));height: calc(var(--parent-height) * (2 / 800));}
.section_visual .tit_set .sec_tit.after {height: calc(var(--parent-height) * (95 / 800));}
.section_visual .txt_set {left: calc(50% + calc(var(--parent-height) * (93 / 800)));bottom: calc(50% + calc(var(--parent-height) * (142 / 800)));}
.section_visual .txt_set .txt {font-size: calc(var(--parent-height) * (28 / 800));}
.section_visual .txt_set .txt::before,
.section_visual .txt_set .txt::after {width: calc(var(--parent-height) * (16 / 800));}
.section_visual .txt_set .txt::before {left: calc(var(--parent-height) * (-20 / 800));top: calc(var(--parent-height) * (7 / 800));}
.section_visual .txt_set .txt::after {right: calc(var(--parent-height) * (-22 / 800));bottom: calc(var(--parent-height) * (18 / 800));}
.section_visual .scroll_set {bottom: calc(var(--parent-height) * (53 / 800));}
.section_visual .scroll_set .arr {width: calc(var(--parent-height) * (60 / 800));}
}
/* show */
.section_visual .bg_shutter {transform: translateY(0);transition: transform 0.3s ease-in-out;}
.section_visual .tit_set .line {opacity: 1;transition: opacity 0.3s 0.2s;}
/*.section_visual .tit_set .after {opacity: 0;transition: opacity 0.3s ease;}*/
.section_visual[data-show="y"] .bg_shutter {transform: translateY(-101%);transition: transform 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);}
.section_visual[data-show="y"] .tit_set .line {opacity: 0;transition: opacity 0.3s 0.3s;}
.section_visual[data-show="y"] .tit_set .after {transform: rotateX(180deg);transition: transform 0.8s 0.2s;}
/* section01 */
.section01 {position: relative;height: 69.7rem;display: flex;align-items: center;justify-content: center;overflow: hidden;}
.section01 .in {}
.section01 .tit_set {position: relative;}
.section01 .tit_set .sec_tit {}
.section01 .tit_set .sec_tit .line {display: flex;align-items: center;justify-content: center;gap: 0.9rem;}
.section01 .tit_set .sec_tit .line p {font-family: var(--ft-paper700);font-weight: 700;color: #0c0c0c;font-size: 6.8rem;line-height: 140%;text-align: center;}
.section01 .tit_set .sec_tit .box {position: relative;width: 13.2rem;height: 6.2rem;}
.section01 .tit_set .sec_tit .box .insert {position: absolute;left: 50%;top: 50%;z-index: 1;width: 100%;height: 100%;transform: translate(-50%, -50%);}
.section01 .tit_set .sec_tit .line01 .box .insert {background: url("../images/sec01_img01@2x.jpg") no-repeat center center;background-size: cover;}
.section01 .tit_set .sec_tit .line02 .box .insert {background: url("../images/sec01_img02@1.5x.jpg") no-repeat center center;background-size: cover;}
.section01 .tit_set .sec_tit .line02 .box {position: relative;width: auto;height: 6.2rem;aspect-ratio: 1920 / 1080;}
.section01 .tit_set .sec_tit .line02 .box .insert iframe {width: 100%;height: 100%;opacity: 0;transition: opacity 0.3s ease;}
.section01 .btn_sound {top: 50%;right: 2rem;transform: translateY(-50%);opacity: 0;}
/* show */
.section01 .tit_set .sec_tit .box .insert {transition: all 0.5s ease;}
.section01[data-show="y"] .tit_set .sec_tit .line02 .box .insert {width: 88.3rem;height: 49.7rem;transform: translate(calc(-50% + 11.8rem), calc(-50% + -4.8rem));}
.section01[data-show="y"] .tit_set .sec_tit .line02 .box .insert iframe,
.section01[data-show="y"] .tit_set .sec_tit .line02 .box .insert .btn_sound {opacity: 1;transition: opacity 0.3s 0.5s ease;}
/* section02 */
.sec02_sticky_outer {
--parent-height: 100vh;
height: calc(var(--parent-height) * 3.5);
}
.section02 {
position: sticky;top: 0;
display: flex;flex-direction: column;
height: var(--parent-height);
}
.section02 .sub_sec {position: relative;transition: all 0.5s ease;}
.section02 .sub01 {background: #191C22;}
.section02 .sub02 {background: #C6D7E9;}
.section02[data-step="0"] .sub01,
.section02[data-step="1"] .sub01,
.section02[data-step="2"] .sub02 {flex: 1 1 auto;}
.section02[data-step="1"] .sub02,
.section02[data-step="2"] .sub01 {flex: 0 0 auto;}
.section02 .sub_sec .sec_in {position: relative;display: flex;height: 100%;transition: padding 0.5s ease;}
.section02[data-step="0"] .sub01 .sec_in,
.section02[data-step="1"] .sub01 .sec_in,
.section02[data-step="2"] .sub02 .sec_in {padding: 10rem 4rem 0;}
.section02[data-step="0"] .sub02 .sec_in,
.section02[data-step="1"] .sub02 .sec_in,
.section02[data-step="2"] .sub01 .sec_in {padding: 2rem;}
.section02 .image {position: relative;z-index: 1;display: block;height: 37.6rem;aspect-ratio: 670/376;background: no-repeat center center;background-size: cover;margin: 0 0 0 auto;transition: height 0.5s ease;}
.section02 .sub01 .image {background-image: url("../images/sec02_sub01_img@1.5x.jpg");}
.section02 .sub02 .image {background-image: url("../images/sec02_sub02_img@1.5x.jpg");}
.section02[data-step="0"] .sub02 .image,
.section02[data-step="1"] .sub02 .image,
.section02[data-step="2"] .sub01 .image {height: 12.4rem;}
.section02 .bg_txt {position: absolute;right: 0;bottom: -0.2rem;z-index: 0;background: no-repeat right bottom;background-size: 100% auto;transition: all 0.5s ease;}
.section02 .sub01 .bg_txt {opacity: 0.08;aspect-ratio: 1365/200;background-image: url("../images/sec02_sub01_bg_txt@1.5x.png");}
.section02 .sub02 .bg_txt {opacity: 0.3;aspect-ratio: 891/198;background-image: url("../images/sec02_sub02_bg_txt@1.5x.png");}
.section02[data-step="0"] .sub02 .bg_txt,
.section02[data-step="1"] .sub02 .bg_txt,
.section02[data-step="2"] .sub01 .bg_txt {right: 26rem;bottom: 2rem;}
.section02[data-step="0"] .sub01 .bg_txt,
.section02[data-step="1"] .sub01 .bg_txt {width: 91rem;}
.section02[data-step="2"] .sub01 .bg_txt {width: 13.8rem;}
.section02[data-step="0"] .sub02 .bg_txt,
.section02[data-step="1"] .sub02 .bg_txt {width: 9rem;}
.section02[data-step="2"] .sub02 .bg_txt {width: 59.4rem;}
.section02 .tit_set {position: absolute;left: calc((100% - 144rem) / 2 + 16rem);top: 10rem;z-index: 0;opacity: 0;transition: opacity 0.5s ease;}
.section02[data-step="1"] .sub01 .tit_set {opacity: 1;transition: opacity 0.5s 0.2s ease;}
.section02[data-step="2"] .sub02 .tit_set {opacity: 1;transition: opacity 0.5s 0.3s ease;}
.section02 .tit_set .sec_tit {font-family: var(--ft-paper700);font-weight: 700;color: #fff;font-size: 4rem;line-height: 140%;}
.section02 .sub02 .tit_set .sec_tit {color: #0C0C0C;}
.section02 .tit_set em {display: block;overflow: hidden;}
.section02 .tit_set div > em {display: inline-block;}
/*.section02 .tit_set em > em {transform: translateY(101%);transition: transform 0.3s ease;}*/
/*.section02[data-step="1"] .sub01 .tit_set em > em {transform: translateY(0);}*/
/*.section02[data-step="1"] .sub01 .tit_set .sec_tit em.ani01 > em {transition-delay: 0.5s;}*/
/*.section02[data-step="1"] .sub01 .tit_set .sec_tit em.ani02 > em {transition-delay: 0.8s;}*/
/*.section02[data-step="1"] .sub01 .tit_set .sec_tit em.ani03 > em {transition-delay: 1.2s;}*/
/*.section02[data-step="1"] .sub01 .tit_set .txt em > em {transition-delay: 1.5s;}*/
/*.section02[data-step="2"] .sub02 .tit_set em > em {transform: translateY(0);}*/
/*.section02[data-step="2"] .sub02 .tit_set .sec_tit em:nth-child(1) > em {transition-delay: 0.5s;}*/
/*.section02[data-step="2"] .sub02 .tit_set .sec_tit em:nth-child(2) > em {transition-delay: 0.8s;}*/
/*.section02[data-step="2"] .sub02 .tit_set .txt em > em {transition-delay: 1.2s;}*/
.section02 .tit_set .sec_tit .txt_bg {color: #fff;padding: 0 0.4rem;margin-right: 0.3rem;}
.section02 .tit_set .sec_tit .txt_bg::after {height: 4.5rem;background: #0068B7;}
.section02 .tit_set .txt {color: #fff;font-size: 2.4rem;font-weight: 600;line-height: 135%;margin: 2.4rem 0 0 9.1rem;}
/*.section02 .tit_set .txt {opacity: 0;transition: opacity 0.3s ease;}*/
.section02 .sub02 .tit_set .txt {color: #0C0C0C;}
/*.section02[data-step="1"] .sub01 .tit_set .txt {opacity: 1;transition: opacity 0.3s 1.5s ease;}*/
/*.section02[data-step="2"] .sub02 .tit_set .txt {opacity: 1;transition: opacity 0.3s 1.2s ease;}*/
/* vh */
@media (min-aspect-ratio: 1440/780) {
.section02[data-step="0"] .sub01 .sec_in,
.section02[data-step="1"] .sub01 .sec_in,
.section02[data-step="2"] .sub02 .sec_in {padding: calc(var(--parent-height) * (100 / 780)) calc(var(--parent-height) * (40 / 780)) 0;}
.section02[data-step="0"] .sub02 .sec_in,
.section02[data-step="1"] .sub02 .sec_in,
.section02[data-step="2"] .sub01 .sec_in {padding: calc(var(--parent-height) * (20 / 780));}
.section02 .image {height: calc(var(--parent-height) * (376 / 780));}
.section02[data-step="0"] .sub02 .image,
.section02[data-step="1"] .sub02 .image,
.section02[data-step="2"] .sub01 .image {height: calc(var(--parent-height) * (124 / 780));}
.section02[data-step="0"] .sub02 .bg_txt,
.section02[data-step="1"] .sub02 .bg_txt,
.section02[data-step="2"] .sub01 .bg_txt {right: calc(var(--parent-height) * (260 / 780));bottom: calc(var(--parent-height) * (20 / 780));}
.section02[data-step="0"] .sub01 .bg_txt,
.section02[data-step="1"] .sub01 .bg_txt {width: calc(var(--parent-height) * (910 / 780));}
.section02[data-step="2"] .sub01 .bg_txt {width: calc(var(--parent-height) * (138 / 780));}
.section02[data-step="0"] .sub02 .bg_txt,
.section02[data-step="1"] .sub02 .bg_txt {width: calc(var(--parent-height) * (90 / 780));}
.section02[data-step="2"] .sub02 .bg_txt {width: calc(var(--parent-height) * (594 / 780));}
.section02 .tit_set {left: calc((100% - calc(var(--parent-height) * (1440 / 780))) / 2 + calc(var(--parent-height) * (160 / 780)));top: calc(var(--parent-height) * (100 / 780));}
.section02 .tit_set .sec_tit {font-size: calc(var(--parent-height) * (40 / 780));}
.section02 .tit_set .sec_tit .txt_bg {padding: 0 calc(var(--parent-height) * (4 / 780));margin-right: 0.calc(var(--parent-height) * (30 / 780));}
.section02 .tit_set .sec_tit .txt_bg::after {height: calc(var(--parent-height) * (45 / 780));}
.section02 .tit_set .txt {font-size: calc(var(--parent-height) * (24 / 780));margin: calc(var(--parent-height) * (24 / 780)) 0 0 calc(var(--parent-height) * (91 / 780));}
}
/* section03 */
.section03 {background: #0C0C0C;overflow: hidden;}
.section03 .in {max-width: 112rem;margin: 0 auto;padding: 10rem 0 14rem;}
.section03 .tit_set {margin: 0 0 6rem;}
.section03 .tit_set .sec_tit {font-family: var(--ft-paper700);color: #fff;font-size: 4rem;font-weight: 700;line-height: 135%;text-align: center;}
.section03 .tit_set .sec_tit .txt_bg {color: #0068B7;padding: 0 0.3rem;margin-right: 0.3rem;}
.section03 .tit_set .sec_tit .txt_bg::after {height: 4.5rem;background: #fff;}
.section03 .slide_set {position: relative;z-index: 1;width: 100%;}
.section03 .slide_set .slide {}
.section03 .slide_set .item {position: relative;}
.section03 .slide_set .video_set {position: relative;display: block;width: calc(74rem + 1px);height: 52.9rem;}
.section03 .slide_set .video_set .video {position: absolute;top: 0;left: 0;z-index: 0;width: 100%;height: 100%;object-fit: cover;object-position: center center;}
.section03 .slide_set .video_set .btn_sound {height: 3rem;left: 3rem;top: 3rem;background-image: url("../images/sound_sprites_wh@2x.png");filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.40));}
.section03 .slide_set .slide_arrow {font-size: 0;position: absolute;top: 17.6rem;z-index: 10;width: 7.5rem;aspect-ratio: 5/5;background-color: #fff;transform: translateY(-100%);transition: background-color 0.3s ease;}
.section03 .slide_set .slide_arrow::after {content:'';position: absolute;left: 0;top: 0;z-index: 0;width: 100%;height: 100%;background-color: #0068B7;-webkit-mask: url('data:image/svg+xml,') no-repeat left 45% center;-webkit-mask-size: auto 26.66666666667%;transition: background-color 0.3s ease;}
.section03 .slide_set .slide_prev {right: calc(7.5rem + 30.45rem);}
.section03 .slide_set .slide_next {right: 30.45rem;}
.section03 .slide_set .slide_next::after {transform: rotate(180deg);}
/*.section03 .slide_set .slide_arrow.slick-disabled {background: #E5E5E5;}*/
/*.section03 .slide_set .slide_arrow.slick-disabled::after {background: #ABABAB;}*/
@media (min-width: 1001px) {
.section03 .slide_set .slide_arrow:hover {background: #C6D7E9;}
}
.section03 .slick-dots {position: absolute;right: 2rem;top: 2rem;z-index: 10;display: flex;align-items: center;gap: 0.8rem;}
.section03 .slick-dots li {font-size: 0;}
.section03 .slick-dots li button {font-size: 0;opacity: 0.3;width: 0.8rem;aspect-ratio: 5/5;background: #fff;border-radius: 100%;transition: opacity 0.3s ease;}
.section03 .slick-dots li.slick-active button {opacity: 1;}
.section03 .slide_txt_set {position: absolute;right: 0;top: 0;z-index: 2;display: flex;flex-direction: column;align-items: flex-end;width: 45.5rem;height: 100%;pointer-events: none;}
.section03 .slide_txt_set .item {position: absolute;left: 0;top: 0;z-index: 0;opacity: 0;display: flex;flex-direction: column;align-items: flex-end;height: 100%;transition: opacity 0.3s ease, z-index 0s 0.3s linear;}
.section03 .slide_txt_set p {pointer-events: auto;}
.section03[data-slide="1"] .slide_txt_set .item01,
.section03[data-slide="2"] .slide_txt_set .item02,
.section03[data-slide="3"] .slide_txt_set .item03 {z-index: 1;opacity: 1;transition: opacity 0.3s ease, z-index 0s linear;}
.section03 .slide_txt_set .caption_set {position: relative;width: 38rem;height: 17.6rem;}
.section03 .slide_txt_set .caption {position: absolute;right: 2rem;bottom: 1.6rem;z-index: 1;opacity: 0.5;color: #fff;font-size: 1.3rem;font-weight: 600;line-height: 135%;}
.section03 .slide_txt_set .txt_set {position: relative;width: 45.5rem;flex: 1 1 auto;display: flex;flex-direction: column;justify-content: flex-end;padding: 0 0 3.6rem 4rem;}
.section03 .slide_txt_set .txt_set .txt {color: #fff;font-size: 2.8rem;font-weight: 600;line-height: 135%;margin: 0 0 1.6rem;}
.section03 .slide_txt_set .txt_set .txt::before {content:'';display: block;width: 2.2rem;aspect-ratio: 22/18;background: url('data:image/svg+xml,') no-repeat left top;background-size: 100% auto;margin: 0 0 2rem;}
.section03 .slide_txt_set .txt_set .from {position: relative;color: #fff;font-size: 1.4rem;font-weight: 600;line-height: 135%;opacity: 0.5;padding-left: 2.7rem;}
.section03 .slide_txt_set .txt_set .from::before {content:'';position: absolute;left: 0;top: 50%;z-index: 0;width: 2.3rem;height: 1px;background: #fff;transform: translateY(-50%);}
.section03 .slide_bg_set {position: absolute;right: 0;top: 0;z-index: 1;display: flex;flex-direction: column;align-items: flex-end;width: 45.5rem;height: 100%;pointer-events: none;}
.section03 .slide_bg_set .box_set {position: relative;display:inline-block;overflow:hidden;}
.section03 .slide_bg_set .box_set.capt {width: 38rem;height: 17.6rem;}
.section03 .slide_bg_set .box_set.capt .ani {width: 38rem;}
.section03 .slide_bg_set .box_set.text {width: 45.5rem;flex: 1 1 auto;}
.section03 .slide_bg_set .box_set.text .ani {width: 45.5rem;}
.section03 .slide_bg_set .box_set .box {
position: absolute;top:0;right: 0;z-index: 1;
display:block;width:0;height: 100%;
overflow:hidden;
transition: width 0.3s ease;
}
.section03[data-slide="1"] .slide_bg_set .box_set .box01,
.section03[data-slide="2"] .slide_bg_set .box_set .box01,
.section03[data-slide="2"] .slide_bg_set .box_set .box02,
.section03[data-slide="3"] .slide_bg_set .box_set .box01,
.section03[data-slide="3"] .slide_bg_set .box_set .box02,
.section03[data-slide="3"] .slide_bg_set .box_set .box03 {width:100%;}
.section03 .slide_bg_set .box_set .box .ani {position:absolute;right:0;top:0;z-index: 0;height:100%;}
.section03 .slide_bg_set .box_set.capt .box01 .ani {background-color: #39403C;}
.section03 .slide_bg_set .box_set.capt .box02 .ani {background-color: #403939;}
.section03 .slide_bg_set .box_set.capt .box03 .ani {background-color: #2B303B;}
.section03 .slide_bg_set .box_set.text .box01 .ani {background-color: #222624;}
.section03 .slide_bg_set .box_set.text .box02 .ani {background-color: #262222;}
.section03 .slide_bg_set .box_set.text .box03 .ani {background-color: #191C22;}
/* section04 */
.section04 {position: relative;background: url("../images/sec04_bg@1.5x.jpg") no-repeat center center;background-size: cover;overflow: hidden;}
.section04 .in {max-width: 112rem;margin: 0 auto;padding: 10rem 0 4.9rem;text-align: center;}
.section04 .tit_set {text-align: left;margin: 0 0 8.6rem;}
.section04 .tit_set .sec_tit {color: #0c0c0c;font-size: 2.8rem;font-weight: 600;line-height: 135%;margin: 0 0 2rem;}
.section04 .txt_box {position: relative;display: flex;flex-direction: column;gap: 1.6rem;width: 55.1rem;background: url("../images/sec04_box_bg@1.5x.png") no-repeat right top;background-size: cover;padding: 4rem 0 3.4rem 4rem;}
.section04 .txt_box .line {display: flex;align-items: center;gap: 0.4rem;}
.section04 .txt_box .line p {font-family: var(--ft-paper700);color: #fff;font-size: 4rem;font-weight: 700;line-height: 140%;}
.section04 .txt_box .line .num {font-family: var(--ft-poppins);color: #fff;font-size: 4rem;font-weight: 600;line-height: 135%;}
.section04 .txt_box .line01 .digit {margin-left: 1rem;}
.section04 .txt_box .digit {position: relative;z-index: 0;display: inline-block;width: 4.8rem;height: 5.4rem;text-align: center;/*overflow: hidden;*/}
.section04 .txt_box .digit::before,
.section04 .txt_box .digit::after {content:'';position: absolute;left: 0;z-index: -1;width: 100%;height: 3rem;}
.section04 .txt_box .digit::before {bottom: 50%;background: linear-gradient(180deg, #0C0C0C 0%, #171717 100%);}
.section04 .txt_box .digit::after {top: 50%;background: linear-gradient(180deg, #232323 0%, #232323 100%);}
.section04 .txt_box .half_line {position: absolute;left: 0;top: 0;z-index: 11;display: block;width: 4.8rem;height: 2.7rem;box-sizing: content-box;background-color: transparent;border-bottom: 1px solid #000;pointer-events: none;}
.section04 .txt_box .num {position: absolute;display: block;width: 4.8rem;height: 5.4rem;perspective: 30rem}
.section04 .txt_box .primary {z-index: 10;height: 2.7rem;transform-origin: 50% 100%;transform-style: preserve-3d;}
.section04 .txt_box .num::before {background: linear-gradient(180deg, #0C0C0C 0%, #171717 100%)}
.section04 .txt_box .num::after {background: linear-gradient(180deg, #232323 0%, #232323 100%)}
.section04 .txt_box .num::before,
.section04 .txt_box .num::after {display: block;position: absolute;width: 4.8rem;/*height: calc(2.7rem + 1px);*/height: 2.7rem;backface-visibility: hidden;overflow: hidden;}
.section04 .txt_box .primary::after {transform: rotateX(180deg);line-height: 0;}
.section04 .txt_box .secondary::after {top: 50%;line-height: 0;}
.section04 .txt_box .digit.flip .primary {transform: rotateX(180deg);transition: all 0.5s;}
.section04 .txt_box .num::before {line-height: 1.41;}
.section04 .txt_box .num::after {line-height: 0.07;}
[data-number="0"] span.primary::before {content: "0";}
[data-number="1"] span.primary::before {content: "1";}
[data-number="2"] span.primary::before {content: "2";}
[data-number="3"] span.primary::before {content: "3";}
[data-number="4"] span.primary::before {content: "4";}
[data-number="5"] span.primary::before {content: "5";}
[data-number="6"] span.primary::before {content: "6";}
[data-number="7"] span.primary::before {content: "7";}
[data-number="8"] span.primary::before {content: "8";}
[data-number="9"] span.primary::before {content: "9";}
[data-number="0"] span.primary::after {content: attr(title);}
[data-number="1"] span.primary::after {content: attr(title);}
[data-number="2"] span.primary::after {content: attr(title);}
[data-number="3"] span.primary::after {content: attr(title);}
[data-number="4"] span.primary::after {content: attr(title);}
[data-number="5"] span.primary::after {content: attr(title);}
[data-number="6"] span.primary::after {content: attr(title);}
[data-number="7"] span.primary::after {content: attr(title);}
[data-number="8"] span.primary::after {content: attr(title);}
[data-number="9"] span.primary::after {content: attr(title);}
[data-number="0"] span.secondary::after {content: "0";}
[data-number="1"] span.secondary::after {content: "1";}
[data-number="2"] span.secondary::after {content: "2";}
[data-number="3"] span.secondary::after {content: "3";}
[data-number="4"] span.secondary::after {content: "4";}
[data-number="5"] span.secondary::after {content: "5";}
[data-number="6"] span.secondary::after {content: "6";}
[data-number="7"] span.secondary::after {content: "7";}
[data-number="8"] span.secondary::after {content: "8";}
[data-number="9"] span.secondary::after {content: "9";}
[data-number="0"] span.secondary::before {content: attr(title);}
[data-number="1"] span.secondary::before {content: attr(title);}
[data-number="2"] span.secondary::before {content: attr(title);}
[data-number="3"] span.secondary::before {content: attr(title);}
[data-number="4"] span.secondary::before {content: attr(title);}
[data-number="5"] span.secondary::before {content: attr(title);}
[data-number="6"] span.secondary::before {content: attr(title);}
[data-number="7"] span.secondary::before {content: attr(title);}
[data-number="8"] span.secondary::before {content: attr(title);}
[data-number="9"] span.secondary::before {content: attr(title);}
.section04 .food_set {position: absolute;left: calc(50% + 4.3rem);bottom: 17.5rem;z-index: 0;}
.section04 .food_set .food {position: absolute;left: 0;bottom: 0;z-index: 0;opacity: 1;width: 76.5rem;aspect-ratio: 765/500;background: no-repeat center center;background-size: 100% auto;transition: opacity 0.3s ease;}
.section04 .food.f01 {background-image: url("../images/sec04_food01@1.5x.png");}
.section04 .food.f02 {background-image: url("../images/sec04_food02@1.5x.png");}
.section04 .food.f03 {background-image: url("../images/sec04_food03@1.5x.png");}
.section04[data-step="1"] .food.f02 {opacity: 0;}
.section04[data-step="1"] .food.f03 {opacity: 0;}
.section04[data-step="2"] .food.f03 {opacity: 0;}
.section04 .bottom_set {
display: inline-flex;align-items: center;justify-content: center;gap: 2.4rem;
border-radius: 5.35rem;
background: rgba(255, 255, 255, 0.50);
backdrop-filter: blur(0.25rem);
padding: 1.2rem 1.2rem 1.2rem 3.2rem;
text-align: center;
}
.section04 .range_set {position: relative;width: 41.7rem;}
.section04 .range_set .range-wrapper {position: relative;width: 30.6rem;margin: 0 auto;}
.section04 .range_set .range-wrapper .range-track {
position: absolute;top: 50%;left: 50%;z-index: 1;
width: 41.7rem;height: 0.8rem;
background: linear-gradient(90deg, rgba(25, 28, 34, 0.3) 0%, rgba(0, 104, 183, 0.3) 100%);
border-radius: 1.2rem;
transform: translate(-50%, -50%);
}
.section04 .range_set .range-track-progress {
position: absolute;top: 0;left: 0;z-index: 0;
width: 7.5rem;height: 100%;
border-radius: 1.2rem;
transition: all 0.05s ease;
overflow: hidden;
}
.section04 .range_set .range-track-progress::after {
content:'';
display: block;width: 41.7rem;height: 100%;
background: linear-gradient(90deg, #CFCFCF 0%, #FFBA24 30%);
}
.section04 .range_set .range-wrapper input[type="range"] {
-webkit-appearance: none;
position: relative;z-index: 2;
width: 100%;height: 0.8rem;
background: transparent;
margin: 0;
}
/* Webkit 기반 브라우저 - Chrome/Edge... */
.section04 .range_set input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 5.6rem;
height: 5.6rem;
background: url('data:image/svg+xml,') no-repeat center center;
background-size: contain;
border: none;
outline: none;
box-shadow: none;
cursor: pointer;
}
/* 파이어폭스 */
.section04 .range_set input[type="range"]::-moz-range-thumb {
-webkit-appearance: none;
width: 5.6rem;
height: 5.6rem;
background: url('data:image/svg+xml,') no-repeat center center;
background-size: contain;
border: none;
outline: none;
box-shadow: none;
cursor: pointer;
}
.section04 .point_set {position: absolute;left: 0;top: 0;z-index: 1;width: 100%;height: 100%;display: flex;align-items: center;justify-content: space-between;}
.section04 .point_set .checkpoint {width: 1.4rem;aspect-ratio: 5/5;background: #FFF;border-radius: 100%;border: 1px solid #FFBA24;}
.section04 .point_set .checkpoint:nth-child(1) {transform: translateX(150%);}
.section04 .point_set .checkpoint:nth-child(2) {}
.section04 .point_set .checkpoint:nth-child(3) {transform: translateX(-150%);}
.section04 .btn_set {}
.section04 .btn_set .btn {display: inline-flex;align-items: center;gap: 2rem;height: 8rem;background: #0074C2;border-radius: 10rem;padding: 0 3.2rem;transition: background-color 0.3s ease;}
.section04 .btn_set .btn .btn_txt {color: #fff;font-size: 2.4rem;font-weight: 700;line-height: 135%;}
.section04 .btn_set .btn .btn_arr {flex-shrink: 0;display: block;width: 1.2rem;aspect-ratio: 12/21;background-color: #fff;-webkit-mask: url('data:image/svg+xml,') no-repeat center center;-webkit-mask-size: 100% auto;}
@media (min-width: 1001px) {
.section04 .btn_set .btn:hover {background: #00558F;}
}
.section04 .desc {color: #000;font-size: 1.4rem;font-weight: 600;line-height: 135%;text-align: center;margin: 1.2rem 0 0;opacity: 0.5;}
/* section05 */
.section05 {background: url("../images/sec05_bg@1.5x.png") no-repeat center center;background-size: cover;}
.section05 .in {padding: 12rem 0 9.8rem;}
.section05 .tit_set {}
.section05 .tit_set .sec_tit {margin: 0 0 2rem;}
.section05 .tit_set .sec_tit {font-family: var(--ft-paper700);color: #0C0C0C;font-size: 4rem;font-weight: 700;line-height: 135%;text-align: center;}
.section05 .tit_set .sec_tit .txt_bg {color: #fff;padding: 0.3rem;margin-right: 0.3rem;}
.section05 .tit_set .sec_tit .txt_bg::after {height: 4.5rem;background: #0068B7;}
.section05 .tit_set .txt {color: #0C0C0C;font-size: 2.4rem;font-weight: 600;line-height: 135%;text-align: center;}
.section05 .card_set {display: flex;justify-content: center;gap: 2.4rem;margin: 6rem 0 2.4rem;}
.section05 .card_set .item {position: relative;width: 36rem;aspect-ratio: 360/300;background: no-repeat center center;background-size: cover;}
.section05 .card_set .item::before {content:'';position: absolute;left: 0;bottom: 0;z-index: 0;width: 100%;height: 8rem;background: linear-gradient(180deg, rgba(0, 104, 183, 0.00) 0%, #0068B7 90%);}
.section05 .card_set .item01 {background-image: url("../images/sec05_img01@1.5x.jpg");}
.section05 .card_set .item02 {background-image: url("../images/sec05_img02@1.5x.jpg");}
.section05 .card_set .item03 {background-image: url("../images/sec05_img03@1.5x.jpg");}
.section05 .card_set .item .txt {position: absolute;left: 2rem;bottom: 1.6rem;z-index: 1;color: #fff;font-size: 1.4rem;font-weight: 600;line-height: 135%;}
.section05 .card_set .item .caption {position: absolute;right: 1rem;bottom: 1.2rem;z-index: 1;opacity: 0.8;color: #fff;font-size: 1.3rem;font-weight: 600;line-height: 135%;text-align: right;text-shadow: 0 0 1rem rgba(0, 0, 0, 0.50);transform-origin: right bottom;transform: rotate(90deg) translateY(100%);}
.section05 .desc {position: relative;color: #000;font-size: 1.3rem;font-weight: 600;line-height: 1.8rem;text-align: center;opacity: 0.5;}
.section05 .desc::before {content:'';display: inline-block;width: 1.1rem;height: 1.8rem;background-color: #000;-webkit-mask: url('data:image/svg+xml,') no-repeat center center;-webkit-mask-size: 100% auto;vertical-align: bottom;}
/* show */
.section05 .tit_set em {display: block;overflow: hidden;}
.section05 .tit_set em > em {transform: translateY(101%);transition: transform 0.3s ease;}
.section05[data-show="y"] .tit_set em > em {transform: translateY(0);}
.section05[data-show="y"] .tit_set .sec_tit em:nth-child(1) > em {transition-delay: 0s;}
.section05[data-show="y"] .tit_set .sec_tit em:nth-child(2) > em {transition-delay: 0.3s;}
.section05[data-show="y"] .tit_set .txt em > em {transition-delay: 0.6s;}
/* section06 */
.section06 {
position: relative;
display: flex;align-items: center;
height: 80rem;
background-color: #0068B7;
background-image: url("../images/sec06_model@1.5x.png"), url("../images/sec06_bg@1.5x.jpg");
background-repeat: no-repeat, no-repeat;
background-position: center center, center center;
background-size: auto 100%, auto 100%;
overflow: hidden;
}
.section06::after {content:'';position: absolute;right: 0;bottom: -1px;z-index: 1;width: 36.3rem;aspect-ratio: 363/312;background: url("../images/sec06_bg_bookmark@1.5x.png") no-repeat center center;background-size: 100% auto;}
.section06 .in {width: 100%;max-width: 112rem;margin: 0 auto;}
.section06 .tit_set {margin: 0 0 6rem;}
.section06 .tit_set .sec_tit {display: flex;flex-direction: column;align-items: flex-start;font-family: var(--ft-paper700);color: #0C0C0C;font-size: 5rem;font-weight: 700;line-height: 140%;white-space: nowrap;margin: 0 0 1.6rem;}
.section06 .tit_set .sec_tit .txt_bg {color: #fff;padding: 0 0.5rem;}
.section06 .tit_set .sec_tit .txt_bg::after {height: 6.2rem;background: #191C22;}
.section06 .tit_set .txt {color: #fff;font-size: 2.4rem;font-weight: 600;line-height: 135%;}
.section06 .btn_set {}
.section06 .btn_set .btn {display: inline-flex;align-items: center;gap: 2rem;height: 8rem;background: #fff;border-radius: 10rem;padding: 0 3.2rem;transition: background-color 0.3s ease;}
.section06 .btn_set .btn .btn_txt {color: #0068B7;font-size: 2.4rem;font-weight: 700;line-height: 135%;}
.section06 .btn_set .btn .btn_arr {flex-shrink: 0;display: block;width: 1.2rem;aspect-ratio: 12/21;background-color: #0068B7;-webkit-mask: url('data:image/svg+xml,') no-repeat center center;-webkit-mask-size: 100% auto;}
@media (min-width: 1001px) {
.section06 .btn_set .btn:hover {background: #C6D7E9;}
}
/* show */
.section06 .tit_set em {display: block;overflow: hidden;}
.section06 .tit_set em > em {transform: translateY(101%);transition: transform 0.3s ease;}
.section06[data-show="y"] .tit_set em > em {transform: translateY(0);}
.section06[data-show="y"] .tit_set .sec_tit em:nth-child(1) > em {transition-delay: 0s;}
.section06[data-show="y"] .tit_set .sec_tit em:nth-child(2) > em {transition-delay: 0.3s;}
.section06[data-show="y"] .tit_set .txt em > em {transition-delay: 0.6s;}
/* footer */
.footer {position: relative;background: #202020;padding: 4.6rem 7.5rem 4.6rem 6rem;}
.footer .in {position: relative;display: flex;}
.footer .f_logo {display: inline-block;width: 7.2rem;aspect-ratio: 96/118;background: url("../images/footer_logo@2x.png") no-repeat center center;background-size: 100% auto;margin-right: 3.75rem;}
.footer .address {display: block;}
.footer .address p {font-family: var(--ft-pretendard);color: #E6E6E6;font-size: 1.2rem;font-weight: 400;line-height: 170%;letter-spacing: -0.02em;}
.footer .address p:nth-child(1) {font-size: 1.35rem;font-weight: 600;margin-bottom: 0.75rem;}
.footer .address p.copy {font-family: var(--ft-pretendard);color: #787878;font-size: 1.05rem;margin-top: 1.125rem;}
.footer .address a {display: inline;}
.footer .share_set {display: flex;align-items: center;justify-content: center;gap: 1.125rem;margin: auto 0 0 auto;}
.footer .share_set {position: absolute;right: 0;bottom: 0;z-index: 1;}
.footer .share_set li a {display: block;width: 3rem;aspect-ratio: 40/40;background: url("../images/share_sprites@2x.png") no-repeat left center;background-size: auto 126.31578947368%;}
.footer .share_set li a.facebook {background-position: left 3.597% center;}
.footer .share_set li a.twitter {background-position: left 34.532% center;}
.footer .share_set li a.youtube {background-position: left 65.468% center;}
.footer .share_set li a.blog {background-position: left 96.403% center;}
@media all and (min-width: 1920px) {
html,body {font-size: 13.334px;}
}
@media (max-width: 1000px) {
html {font-size: calc((10 / 750) * 100vw);}
.ver_mo {display: block !important;}
.ver_pc {display: none !important;}
.btn_sound {height: 3.2rem;}
.wrap_fixed .logo_set {top: 4rem;left: 4rem;}
.wrap_fixed .logo_set .logo {width: 16.5rem;}
.wrap_fixed .pagination {display: none;}
.wrap_fixed .sticky_set {right: auto;left: 0;bottom: 2rem;width: 100%;padding: 0 2rem;transform: translateY(calc(101% + 4rem + 6.8rem));}
.wrap_fixed .sticky_set .btn_sticky {width: 100%;height: 15.2rem;aspect-ratio: unset;justify-content: unset;background: #0068B7;border-radius: 10rem;padding: 0 1.7rem;box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.15);/*transition: background-color 0.3s ease;*/overflow: hidden;}
.wrap_fixed .sticky_set .btn_sticky::before {content: none;}
.wrap_fixed .sticky_set .btn_sticky .btn_txt {font-size: 3.2rem;line-height: 140%;margin-left: 4.8rem;transition: color 0.3s ease;}
.wrap_fixed .sticky_set .btn_sticky .btn_arr {display: none;}
.wrap_fixed .sticky_set .btn_sticky .btn_img {
left: auto;right: 1.5rem;bottom: -1px;z-index: 0;
width: 19.4rem;height: auto;aspect-ratio: 194/137;
background: url("../images/mo_sticky_img@1.5x.png") no-repeat center center;
background-size: contain;
transform: unset;
transition: unset;
}
.wrap_fixed .sticky_set .ver_mo .btn_sticky {}
.wrap_fixed .sticky_set .btn_sticky .drag {position: relative;left: 0;z-index: 2;display: block;width: 12rem;aspect-ratio: 5/5;background: #fff;border-radius: 100%;transition: background-color 0.3s ease;}
.wrap_fixed .sticky_set .btn_sticky .drag::after {content:'';display: block;width: 100%;height: 100%;background-color: #0068B7;
mask: url('data:image/svg+xml,') no-repeat center center;
mask-size: 49.16666666667% auto;
transition: background-color 0.3s ease;pointer-events: none;}
.wrap_fixed .sticky_set[data-color="wh"] .btn_sticky {background-color: #fff;}
.wrap_fixed .sticky_set[data-color="wh"] .btn_sticky .btn_txt {color: #0068B7;}
.wrap_fixed .sticky_set[data-color="wh"] .btn_sticky .drag {background-color: #0068B7;}
.wrap_fixed .sticky_set[data-color="wh"] .btn_sticky .drag::after {background-color: #fff;}
/* section_visual */
.visual_sticky_outer {--parent-height: 100vh;}
.section_visual {
background-image: url("../images/mo_main_bg_light@1.5x.png"), url("../images/mo_main_bg_left@1.5x.png"), url("../images/mo_main_bg_right@1.5x.png"), url("../images/mo_main_bg@1.5x.jpg");
background-repeat: no-repeat, repeat-y, repeat-y, no-repeat;
background-position: right top, left top, right top, center top;
background-size: 27.9rem auto, 2.3rem auto, 2.3rem auto, cover;
}
.section_visual .bg_shutter {background: url("../images/mo_main_bg_shutter@1.5x.jpg") no-repeat center bottom;background-size: cover;}
.section_visual .model_set .model,
.section_visual .model_set .model_hand {top: 31.4rem;bottom: auto;width: 100%;height: 100vh;aspect-ratio: unset;background: no-repeat center top;background-size: 100% auto;}
.section_visual .model_set .model {z-index: 2;background-image: url("../images/mo_main_model@1.5x.png");}
.section_visual .model_set .model_hand {z-index: 4;background-image: url("../images/mo_main_model_hand@1.5x.png");}
.section_visual .tit_set {top: 58.6rem;bottom: auto;width: 61.4rem;aspect-ratio: 614/458;padding: 1.8rem 1.8rem 0;}
.section_visual .tit_set .bg_inner {
height: 32.6rem;
background: #FFF9EA url("../images/mo_main_tit_paper@2x.png") no-repeat right top;
background-size: 6.9rem auto;
clip-path: polygon(92.19% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 23.44%);
}
.section_visual .tit_set .line {bottom: 11.5rem;width: calc(100% - 3.6rem);height: 0.2rem;}
.section_visual .tit_set .sec_tit {background: no-repeat center center;background-size: cover;}
.section_visual .tit_set .sec_tit.before {background-image: url("../images/mo_main_tit_before@2x.png");}
/*.section_visual .tit_set .sec_tit.after {background-image: url("../images/mo_main_tit_after@1.5x.jpg");}*/
.section_visual .tit_set .sec_tit.after {height: 11.6rem;}
.section_visual .txt_set {left: 50%;top: 14.4rem;bottom: auto;transform: translateX(-50%);}
.section_visual .txt_set .txt {font-size: 4rem;text-align: center;white-space: nowrap;text-shadow: 0 0 4rem #FFF;}
.section_visual .txt_set .txt::before,
.section_visual .txt_set .txt::after {position: static;display: block;width: 2.4rem;}
.section_visual .txt_set .txt::before {margin: 0 auto 0.8rem;}
.section_visual .txt_set .txt::after {margin: 0 auto;}
.section_visual .scroll_set {display: none;}
/* inapp */
@supports (height: 100lvh) {
.visual_sticky_outer {--parent-height: 100lvh;}
}
html.inapp .visual_sticky_outer {--parent-height: calc(var(--lvh, 1vh) * 100);}
/*html.inapp .section_visual .model_set .model,*/
/*html.inapp .section_visual .model_set .model_hand {top: calc(var(--parent-height) * (314 / 1334));}*/
/*html.inapp .section_visual .tit_set {top: calc(var(--parent-height) * (586 / 1334));padding: calc(var(--parent-height) * (18 / 1334)) calc(var(--parent-height) * (18 / 1334)) 0;}*/
/*html.inapp .section_visual .tit_set .bg_inner {height: calc(var(--parent-height) * (326 / 1334));background-size: calc(var(--parent-height) * (69 / 1334)) auto;}*/
/*.section_visual .tit_set .line {bottom: calc(var(--parent-height) * (115 / 1334));width: calc(100% - calc(var(--parent-height) * (36 / 1334)));height: calc(var(--parent-height) * (2 / 1334));}*/
/*html.inapp .section_visual .txt_set {top: calc(var(--parent-height) * (144 / 1334));}*/
/*html.inapp .section_visual .txt_set .txt {font-size: calc(var(--parent-height) * (40 / 1334));}*/
/*html.inapp .section_visual .txt_set .txt::before,*/
/*html.inapp .section_visual .txt_set .txt::after {width: calc(var(--parent-height) * (24 / 1334));}*/
/*html.inapp .section_visual .txt_set .txt::before {margin: 0 auto calc(var(--parent-height) * (8 / 1334));}*/
/* section01 */
.section01 {height: auto;padding: 24rem 0;}
.section01 .tit_set .sec_tit .line {display: flex;gap: 0;}
.section01 .tit_set .sec_tit .line p {font-size: 8rem;}
.section01 .tit_set .sec_tit .line .t01 {order: 2;}
.section01 .tit_set .sec_tit .line .t02 {order: 3;}
.section01 .tit_set .sec_tit .line .box {order: 1;height: 15.2rem;}
.section01 .tit_set .sec_tit .box {width: auto;height: auto;}
.section01 .tit_set .sec_tit .line01 {flex-wrap: wrap;gap: 1.6rem 0;margin: 0 0 1.6rem;}
.section01 .tit_set .sec_tit .line01 .box {width: 100%;}
.section01 .tit_set .sec_tit .line01 .box .insert {width: 32.6rem;}
.section01 .tit_set .sec_tit .line02 {flex-direction: column;}
.section01 .tit_set .sec_tit .line02 .box {width: 32.6rem;margin-bottom: 1.6rem;}
.section01 .tit_set .sec_tit .box .insert {transition: all 0.5s ease;}
.section01 .tit_set .sec_tit .line01 {opacity: 1;transition: opacity 0.3s ease;}
.section01 .tit_set .sec_tit .line02 p {opacity: 1;transition: opacity 0.3s ease;}
.section01[data-show="y"] .tit_set .sec_tit .line01 {opacity: 0;}
.section01[data-show="y"] .tit_set .sec_tit .line02 p {opacity: 0;}
.section01[data-show="y"] .tit_set .sec_tit .line02 .box .insert {width: 67rem;height: 37.6rem;transform: translate(-50%, -50%);}
/* section02 */
.sec02_sticky_outer {--parent-height: 100vh;height: calc(var(--parent-height) * 2.5);}
/* inapp */
@supports (height: 100lvh) {
.sec02_sticky_outer {--parent-height: 100lvh;}
}
html.inapp .sec02_sticky_outer {--parent-height: calc(var(--lvh, 1vh) * 100);}
.section02[data-step="0"] .sub01 .sec_in,
.section02[data-step="1"] .sub01 .sec_in,
.section02[data-step="2"] .sub02 .sec_in {padding: 12rem 4rem 0;}
.section02[data-step="0"] .sub02 .sec_in,
.section02[data-step="1"] .sub02 .sec_in,
.section02[data-step="2"] .sub01 .sec_in {padding: 4rem;}
.section02 .image {height: 28.2rem;aspect-ratio: 500/282;}
.section02 .sub01 .image {background-image: url("../images/mo_sec02_sub01_img@1.5x.jpg");}
.section02[data-step="0"] .sub02 .image,
.section02[data-step="1"] .sub02 .image,
.section02[data-step="2"] .sub01 .image {height: 12.2rem;}
.section02[data-step="0"] .sub02 .bg_txt,
.section02[data-step="1"] .sub02 .bg_txt,
.section02[data-step="2"] .sub01 .bg_txt {right: 27rem;bottom: 4.05rem;}
.section02[data-step="0"] .sub01 .bg_txt,
.section02[data-step="1"] .sub01 .bg_txt {width: 75rem;}
.section02[data-step="2"] .sub01 .bg_txt {width: 22.1rem;}
.section02[data-step="0"] .sub02 .bg_txt,
.section02[data-step="1"] .sub02 .bg_txt {width: 14.4rem;}
.section02[data-step="2"] .sub02 .bg_txt {width: 45rem;}
.section02 .tit_set {left: 4rem;top: 44.8rem;}
.section02 .tit_set .sec_tit {font-size: 5.2rem;}
.section02 .tit_set .sec_tit .txt_bg {padding: 0 0.6rem;margin-right: 0.6rem;}
.section02 .tit_set .sec_tit .txt_bg::after {height: 6rem;}
.section02 .tit_set .txt {font-size: 3.6rem;margin: 2rem 0 0 5.8rem;}
.section02 .tit_set div > em {display: block;}
.section02[data-step="1"] .sub01 .tit_set .sec_tit em.ani01 > em {transition-delay: 0.5s;}
.section02[data-step="1"] .sub01 .tit_set .sec_tit em.ani02 > em {transition-delay: 0.8s;}
.section02[data-step="1"] .sub01 .tit_set .sec_tit em.ani03 > em {transition-delay: unset;}
.section02[data-step="1"] .sub01 .tit_set .sec_tit em.mo_ani03 > em {transition-delay: 1.2s;}
.section02[data-step="1"] .sub01 .tit_set .sec_tit em.mo_ani04 > em {transition-delay: 1.5s;}
.section02[data-step="1"] .sub01 .tit_set .txt em > em {transition-delay: 1.8s;}
/* section03 */
.section03 .in {padding: 24rem 4rem;}
.section03 .tit_set {margin: 0 0 12rem;}
.section03 .tit_set .sec_tit {font-size: 5.2rem;line-height: 140%;}
.section03 .tit_set .sec_tit .txt_bg {padding: 0 0.6rem;margin-right: 0.6rem;}
.section03 .tit_set .sec_tit .txt_bg::after {height: 6rem;}
.section03 .slide_set {height: auto;}
.section03 .slide_set .video_set {width: 100%;height: 100.6rem;aspect-ratio: unset;}
.section03 .slide_set .video_set .video {height: auto;aspect-ratio: 670/584;}
.section03 .slide_set .slide_arrow {width: 12rem;top: auto;right: 0;bottom: 42.2rem;transform: unset;}
.section03 .slide_set .slide_prev {transform: translateX(calc(-100% + 1px));}
.section03 .slide_set .slide_next {right: 0;}
.section03 .slide_set .video_set .btn_sound {height: 4rem;}
.section03 .slick-dots {right: auto;top: 43.6rem;left: 3.2rem;gap: 1rem;}
.section03 .slick-dots li button {width: 1rem;}
.section03 .slide_txt_set {top: auto;bottom: 0;width: 100%;height: 42.2rem;}
.section03 .slide_txt_set .item {top: auto;bottom: 0;display: block;width: 100%;height: 100%;}
.section03 .slide_txt_set .caption_set {position: absolute;left: 0;bottom: 100%;z-index: 1;width: 55rem;height: 18rem;}
.section03 .slide_txt_set .caption {right: auto;left: 3.2rem;bottom: 3.2rem;font-size: 2.2rem;}
.section03 .slide_txt_set .txt_set {align-items: flex-start;width: 100%;height: 100%;padding: 0 0 5rem 5.7rem;}
.section03 .slide_txt_set .txt_set .txt {font-size: 4rem;margin: 0 0 3.2rem;}
.section03 .slide_txt_set .txt_set .txt::before {width: 2.8rem;margin: 0 0 1.6rem;}
.section03 .slide_txt_set .txt_set .from {font-size: 2.6rem;padding-left: 5.5rem;}
.section03 .slide_txt_set .txt_set .from::before {width: 4.4rem;height: 0.24rem;}
.section03 .slide_bg_set {right: auto;top: auto;bottom: 0;width: 100%;height: auto;align-items: flex-start;}
.section03 .slide_bg_set .box_set.capt {width: 55rem;height: 18rem;}
.section03 .slide_bg_set .box_set.capt .ani {width: 55rem;}
.section03 .slide_bg_set .box_set.text {width: 100%;height: 42.2rem;}
.section03 .slide_bg_set .box_set.text .ani {width: 100%;}
/* section04 */
.section04 {background-image: url("../images/mo_sec04_bg@1.5x.jpg");}
.section04 .in {padding: 20rem 0 16rem;}
.section04 .tit_set {margin: 0 4rem;}
.section04 .tit_set .sec_tit {font-size: 4rem;text-align: center;margin: 0 0 4.7rem;}
.section04 .txt_box {width: 100%;background-image: url("../images/mo_sec04_box_bg@1.5x.png");padding: 6.5rem 0 5.6rem 5.6rem;}
.section04 .txt_box .line {gap: 0.4rem;}
.section04 .txt_box .line p {font-size: 5.2rem;}
.section04 .txt_box .line .num {font-size: 5.2rem;}
.section04 .txt_box .line01 .digit {margin-left: 1.2rem;}
.section04 .txt_box .digit {width: 6rem;height: 7rem;}
.section04 .txt_box .digit::before,
.section04 .txt_box .digit::after {height: 3.8rem;}
.section04 .txt_box .half_line {width: 6rem;height: 3.5rem;}
.section04 .txt_box .num {width: 6rem;height: 7rem;perspective: 30rem}
.section04 .txt_box .primary {height: 3.5rem;}
.section04 .txt_box .num::before,
.section04 .txt_box .num::after {width: 6rem;height: 3.5rem;}
.section04 .food_set {position: relative;left: auto;bottom: auto;aspect-ratio: 750/532;margin: -5rem 0 -6rem;}
.section04 .food_set .food {width: 100%;height: 100%;}
.section04 .food.f01 {background-image: url("../images/mo_sec04_food01@1.5x.png");}
.section04 .food.f02 {background-image: url("../images/mo_sec04_food02@1.5x.png");}
.section04 .food.f03 {background-image: url("../images/mo_sec04_food03@1.5x.png");}
.section04 .bottom_set {display: block;border-radius: 10.7rem;padding: 5.4rem 4.2rem;margin: 0 4rem;}
.section04 .range_set {width: 100%;}
.section04 .range_set .range-wrapper {width: 50rem;}
.section04 .range_set .range-wrapper .range-track {width: 58.6rem;height: 1.2rem;border-radius: 2.4rem;}
.section04 .range_set .range-track-progress {width: 9rem;border-radius: 2.4rem;}
.section04 .range_set .range-track-progress::after {display: block;width: 58.6rem;}
.section04 .range_set .range-wrapper input[type="range"] {height: 1.2rem;}
/* Webkit 기반 브라우저 - Chrome/Edge... */
.section04 .range_set input[type="range"]::-webkit-slider-thumb {width: 9rem;height: 9rem;}
/* 파이어폭스 */
.section04 .range_set input[type="range"]::-moz-range-thumb {width: 9rem;height: 9rem;}
.section04 .point_set .checkpoint {width: 2rem;border-width: 0.2rem;}
.section04 .btn_set {display: none;}
.section04 .desc {font-size: 2.6rem;margin: 1.6rem 0 3.2rem;}
/* section05 */
.section05 {background-image: url("../images/mo_sec05_bg@1.5x.jpg");}
.section05 .in {padding: 24rem 4rem 18rem;}
.section05 .tit_set .sec_tit {margin: 0 0 12rem;}
.section05 .tit_set .sec_tit {font-size: 5.2rem;margin: 0 0 2.1rem;}
.section05 .tit_set .sec_tit .txt_bg {padding: 0.6rem;margin-right: 0.6rem;}
.section05 .tit_set .sec_tit .txt_bg::after {height: 6rem;}
.section05 .tit_set .txt {font-size: 3.6rem;}
.section05 .card_set {flex-direction: column;gap: 3.2rem;margin: 12rem 0 4rem;}
.section05 .card_set .item {width: 100%;aspect-ratio: 670/400;}
.section05 .card_set .item::before {height: 12rem;}
.section05 .card_set .item01 {background-image: url("../images/mo_sec05_img01@1.5x.jpg");}
.section05 .card_set .item02 {background-image: url("../images/mo_sec05_img02@1.5x.jpg");}
.section05 .card_set .item03 {background-image: url("../images/mo_sec05_img03@1.5x.jpg");}
.section05 .card_set .item .txt {left: 3rem;bottom: 2.4rem;font-size: 2.6rem;}
.section05 .card_set .item .caption {right: 2rem;bottom: 2.4rem;font-size: 2.2rem;}
.section05 .desc {font-size: 2.2rem;line-height: 3rem;}
.section05 .desc::before {width: 1.5rem;height: 3rem;}
/* section06 */
.section06 {
display: block;
height: 133.4rem;
background-image: url("../images/mo_sec06_model@1.5x.png"), url("../images/mo_sec06_bg@1.5x.jpg");
background-repeat: no-repeat, no-repeat;
background-position: right bottom, right bottom;
background-size: cover, cover;
}
.section06::after {content: none;}
.section06 .in {padding: 20rem 0 0 4rem;}
.section06 .tit_set {margin: 0;}
.section06 .tit_set .sec_tit {font-size: 6.4rem;margin: 0 0 2.2rem;}
.section06 .tit_set .sec_tit .txt_bg {padding: 0 1rem;}
.section06 .tit_set .sec_tit .txt_bg::after {height: 7.2rem;}
.section06 .tit_set .txt {font-size: 3.6rem;}
.section06 .btn_set {display: none;}
/*.section06 .btn_set .btn {justify-content: space-between;width: 100%;height: 16rem;padding: 3.6rem 8rem;}*/
/*.section06 .btn_set .btn .btn_txt {font-size: 3.2rem;}*/
/*.section06 .btn_set .btn .btn_arr {width: 1.7rem;}*/
/* footer */
.footer {padding: 9.5rem 0 calc(10rem + 15.2rem);}
.footer .in {display: block;text-align: center;}
.footer .f_logo {width: 11.5rem;margin: 0;}
.footer .address {margin: 4.2rem 0 5.4rem;}
.footer .address p {font-size: 2.7rem;line-height: 165%;}
.footer .address p:nth-child(1) {font-size: 3.1rem;margin-bottom: 1.9rem;}
.footer .address p.copy {font-size: 2.3rem;margin-top: 2.9rem;}
.footer .share_set {gap: 2.9rem;}
.footer .share_set {position: unset;}
.footer .share_set li a {width: 7.6rem;}
}