@charset "utf-8";

/* Reset */
* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    -webkit-text-size-adjust: none;
    overflow-x: hidden;
}

body,
div,
form,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd,
ul,
ol,
li,
em,
p,
span,
textarea,
pre,
label,
fieldset,
th,
td,
button,
a,
input,
select,
hr,
figure {
    margin: 0;
    padding: 0;
    word-break: break-all;
}

ul, li {
    list-style: none;
}

img {
    display: block;
    width: 100%;
}

@font-face {
    font-family: 'pretendardB';
    src: url('font/Pretendard-Bold.woff2') format('woff2'),
         url('font/Pretendard-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'pretendardM';
    src: url('font/Pretendard-Medium.woff2') format('woff2'),
         url('font/Pretendard-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'pretendardR';
    src: url('font/Pretendard-Regular.woff2') format('woff2'),
         url('font/Pretendard-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'pretendardL';
    src: url('font/Pretendard-Light.woff2') format('woff2'),
         url('font/Pretendard-Light.ttf') format('truetype');
}

/* 모바일 화면 (375px) */
.sec {
    padding-bottom: 21.3333vw;
    letter-spacing: -1px;
}

.inner {
    padding: 0 6.4vw;
}

.sec h2 {
    margin-bottom: 8.533333vw;
    font-size: 6.93vw;
    letter-spacing: -2px;
}
.sec h2 span {
    display: block;
    margin-bottom: 4.266667vw;
    padding-top: 21.333333vw;
    color: #A28E80;
    font-family: 'pretendardL';
    font-weight: 300;
    font-size: 5.333333vw;
    letter-spacing: -1px;
}

.sec p {
    color: #3C3C3C;
    font-family: 'pretendardR';
    font-size: 3.733333vw;
    line-height: 6.4vw;
    letter-spacing: -1px;
}

.sec p + p {
    margin-top: 6.4vw
}

.mo {
    display: block !important
}

.pc {
    display: none !important
}

.sec.sec01 {
    position: relative;
    height: 266.666666vw;
    background: url(images/main-bg-m.optimized.webp) no-repeat;
    background-size: cover;
    font-family: 'pretendardB';
}

.sec.sec01 h1 {
    padding: 37.33vw 0 0 16vw;
    font-size: 9.6vw;
    color: #FFF;
    line-height: 1.24;
}

.sec.sec01 .app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 111.2vw;
    right: 5.333333vw;
    width: 32vw;
    height: 32vw;
    backdrop-filter: blur(8.03px);
    border-radius: 6.4vw;
    text-align: center;
    font-size: 3.4666666vw;
    line-height: 1;
}

.sec.sec01 .app img {
    width: 14.933333vw;
    margin-bottom: 2.1333333vw;
}

.sec.sec01 p span {
    font-family: 'pretendardB';
    font-size: 3.466667vw;
    color: #1A1A1A
}

.sec.sec02 {
    padding: 17.066666vw 17.866666vw;
    background: url(images/sec02-bg-m.optimized.webp) no-repeat;
    background-size: cover;
    text-align: center
}

.sec.sec02 .app {
    display: inline-block;
    width: 25.333333vw;
    height: 25.333333vw;
    margin-bottom: 5.333333vw;
}

.sec.sec02 p {
    font-size: 6.933333vw;
    font-family: 'pretendardB';
    line-height: 9.013333vw;
    color: #1A1A1A;;
}

.sec.sec03 {
    height: 349.0667vw;
    background: url(images/sec03-bg-m.png) no-repeat;
    background-size: cover;
}

.sec.sec03 .img-wrap {
    position: relative;
    margin-top: 14.666667vw;
}

.sec.sec03 .img-wrap::after {
    content: "";
    display: block;     
}

.sec.sec03 .img-wrap li {
    position: absolute;
    width: 84vw;
}

.sec.sec03 .img-wrap li:nth-child(2) {
    top: 104.5333vw;
    width: 80.80vw;
    z-index: 1;
}

.sec.sec03 .img-wrap li:nth-child(3) {
    top: 22.67vw;
    right: 0;
    width: 37.33vw;
}

.sec.sec04 {
    background: url(images/sec04-bg-m.optimized.webp) no-repeat;
    background-size: cover;
}

.sec.sec04 .tag {
    margin-top: 6.4vw;
}

.sec.sec04 .tag span {
    display: inline-block;
    padding: 2.133333vw 6.4vw;
    border-radius: 13.333333vw;
    border: 0.266667vw solid #3C3C3C;
    font-family: 'pretendardB';
    font-size: 3.733333vw;
    letter-spacing: 0;
}

.sec.sec04 .tag span + span {
    margin-left: 2.133333vw;
}

.sec.sec04 .swiper-container {
    margin-top: 10.666667vw;
    padding: 0 6.4vw
}

.sec.sec04 .swiper-container ul li {
    display: inline-block;
    padding: 4.27vw;
    width: 68vw;
    height: 67.466667vw;
    border-radius: 5.333333vw;
    border: 1px solid #D7D7D7;
    font-size: 4.266667vw;
    text-align: center;
}
.sec.sec04 .swiper-container ul li + li {
    margin-left: 5.3333vw;
}

.sec.sec04 .swiper-container ul li:nth-child(1) {
    background: url(images/sec04-slide-card03.png) center 4.27vw no-repeat #fff;
    background-size: 25.33vw;
}

.sec.sec04 .swiper-container ul li:nth-child(2) {
    background: url(images/sec04-slide-card02.png) center 4.27vw no-repeat #fff;
    background-size: 25.33vw;
}

.sec.sec04 .swiper-container ul li:nth-child(3) {
    background: url(images/sec04-slide-card01.png) center 4.27vw no-repeat #fff;
    background-size: 25.33vw;
}

.sec.sec04 .swiper-container ul li strong {
    display: block;
    padding-top: 33.866667vw;
    font-family: 'pretendardB';
    font-size: 6.4vw;
    color: #1a1a1a;
}

.sec.sec04 .swiper-container ul li p {
    padding-top: 1.066667vw;
    font-size: 4.266667vw;
    color: #3C3C3C;
}

.sec.sec05 {
    position: relative;
    height: 377.333333vw;
    background: url(images/sec05-bg-m.png) no-repeat;
    background-size: cover;
}

.sec.sec05 .img {
    position: relative;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    margin-top: 21.333333vw;
    width: 67.466667vw;
}

.sec.sec05 .img-wrap {
    position: relative;
    margin-top: 14.4vw;
}

.sec.sec05 .img-wrap li {
    position: absolute;
    width: 42.666667vw;
}

.sec.sec05 .img-wrap li:nth-child(2) {
    top: 10.666667vw;
    right: 0;
}

.sec.sec05 .img-wrap li:nth-child(3) {
    top: 33.066667vw;
}

.sec.sec05 .img-wrap li:nth-child(4) {
    top: 43.733333vw;
    right: 0;
}

.sec.sec05 .img-wrap li:nth-child(5) {
    top: 66.133333vw;
}

.sec.sec05 .sticker {
    position: absolute;
    right: 6.4vw;
    bottom: 10.666667vw;
    width: 48vw;
}

.sec.sec06 {
    position: relative;
    height: 398.666667vw;
    background: url(images/sec06-bg-m.png) no-repeat;
    background-size: cover;
}

.sec.sec06  .phone01 {
    position: absolute;
    width: 43.7vw;
    top: 107.5vw;
    left: 32.5vw;
}

.sec.sec06 .phone02 {
    position: absolute;
    width: 40.5333vw;
    bottom: 48.5333vw;
    left: 29.8667vw;
}

.sec.sec06 .phone01 img + img {
    position: absolute;
    bottom: -15.4vw;
    left: -5.6vw;
    width: 62.9vw;
}

.sec.sec06 .phone01 + .sticker {
    position: absolute;
    top: 144.5vw;
    left: 4.3vw;
    width: 33.333333vw;
}

.sec.sec06 .phone02 + .sticker {
    position: absolute;
    bottom: 37.3333vw;
    left: 2.9333vw;
    width: 23.2vw;
}
.sec.sec06 .swiper-container02 {
    margin: 0 -6.4vw 0 -12.6vw;
    bottom: -201.0667vw;
    width: 114vw;
}
.sec.sec06 .swiper-container02 .swiper-slide {
    margin-right: 3.2vw;
    width: 35.4vw;
    height: 27.4vw;
}
.sec.sec06 .swiper-container02 .swiper-slide-next {
    border: 0.8vw solid #7C7266;
    border-radius: 1.6vw;
}
.sec.sec06 .bubble {
    position: absolute;
    width: 67.7333vw;
    bottom: -27.2vw;
    left: -4vw;
}
.sec.sec07 {
    position: relative;
    height: 343.4667vw;
    background: url(images/sec07-bg-m.png) no-repeat;
    background-size: cover;
}

.sec.sec07 .sticker {
    position: absolute;
    top: 16vw;
    right: 6.4vw;
    width: 32vw;
}

.sec.sec07 .img-wrap {
    position: relative;
    margin-top: 7.2vw;
}

.sec.sec07 .img-wrap li {
    position: absolute;
    width: 37.3333vw;
}

.sec.sec07 .img-wrap li:nth-child(1) {
    left: 1.6vw;
    width: 75.4667vw;
    z-index: 1;
}
.sec.sec07 .img-wrap li:nth-child(2) {
    top: 178.4vw;
    left: 1.6vw;
    width: 38.4vw;
}

.sec.sec07 .img-wrap li:nth-child(3) {
    top: 14.1333vw;
    right: 0;
} 

.sec.sec08 {
    padding: 10.133333vw 0;
    height: 26.666667vw;
    background: #60584C;
    text-align: center;
    overflow: hidden;
}

.sec.sec08 .img {
    display: inline-block;
    width: 38.933333vw;
}

.up {
    opacity: 0;
    transform: translateY(100px); 
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.sec08.up {
    opacity: 0;
    transform: translateY(50px); 
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.up-du01 {
    transition-delay: 0.2s;
}

.up-du02 {
    transition-delay: 0.4s;
}

.up-du03 {
    transition-delay: 0.6s;
}

.up-du04 {
    transition-delay: 0.8s;
}

.up-du05 {
    transition-delay: 1s;
}

.up-du06 {
    transition-delay: 1.2s;
}

.up.show {
    opacity: 1;
    transform: translateY(0);
}

.sec.sec05 .img.up.show {
    transform: translateX(-50%) translateY(0);
}

/* 태블릿 화면 (768px 이상) */
@media (min-width: 768px) {
}

/* 데스크탑 화면 (1024px 이상) */
@media (min-width: 1024px) {
    .mo {
        display: none !important
    }
    
    .pc {
        display: inherit !important
    }
    .sec {
        padding-bottom: 10.4167vw;
    }
    .sec h2 {
        display: inline-block;
        width: 55%;
        float: left;
        margin-bottom: 10.42vw;
        font-size: 2.50vw;
    }
    .sec h2 span {
        width: 43%;
        margin-bottom: 1.67vw;
        padding-top: 10.42vw;
        font-size: 1.25vw;
    }
    .sec h2 + p {
        padding-top: 13.33vw;
    }
    .sec p {
        font-size: 1.25vw;
        line-height: 1.5;
    }
    
    .sec p + p {
        margin-top: 1.25vw;
    }
    
    .sec.sec01 {
        height: 100vh;
        background: url(images/main-bg.optimized.webp) no-repeat;
        background-size: cover;
    }
    .sec.sec01 h1 {
        padding: 13.54vw 0 0 13.54vw;
        font-size: 4.38vw;
        line-height: 1.4;
    }
    .sec.sec01 .app {
        top: 25.5208vw;
        right: 22.3958vw;
        width: 12.9167vw;
        height: 12.9167vw;
        border-radius: 2.5vw;
        text-align: center;
        line-height: 1;
    }
    .sec.sec01 .app img {
        width: 6.25vw;
        margin-bottom: 1.25vw;
    }
    .sec.sec01 p span {
        font-size: 1.25vw;
    }

    .sec.sec02 {
        padding: 8.33vw 6.4vw;
        height: 36.04vw;
        background: url(images/sec02-bg.png) no-repeat;
        background-size: cover;
    }
    .sec.sec02 .app {
        width: 12.50vw;
        height: 12.50vw;
        margin-bottom: 2.50vw;
    }
    .sec.sec02 p {
        font-size: 3.33vw;
        line-height: 1.3;
    }

    .sec.sec03 {
        height: 135vw;
        background: url(images/sec03-bg.png) no-repeat;
        background-size: cover;
    }
    .sec.sec03 .img-wrap {
        margin-top: 10.42vw;
    }
    
    .sec.sec03 .img-wrap li:nth-child(1) {
        width: 37.34vw;
    }
    
    .sec.sec03 .img-wrap li:nth-child(2) {
        top: 49.6vw;
        left: 12.0833vw;
        width: 33.75vw;
    }
    
    .sec.sec03 .img-wrap li:nth-child(3) {
        top: 6.25vw;
        left: 55.52vw;
        width: 20.83vw;
    }

    .sec.sec04 {
        height: 81.09vw;
        background: url(images/sec04-bg.optimized.webp) no-repeat;
        background-size: cover;
    }
    
    .sec.sec04 .tag {
        margin-top: 1.25vw;
    }
    
    .sec.sec04 .tag span {
        padding: 0.73vw 2.08vw;
        border-radius: 2.60vw;
        border: 0.1vw solid #3C3C3C;
        font-size: 1.04vw;
        line-height: 1.4;
        letter-spacing: 0;
    }
    
    .sec.sec04 .tag span + span {
        margin-left: 0.63vw;
    }
    
    .sec.sec04 .swiper-container {
        margin-top: 4.48vw;
        padding: 0 3.33vw
    }
    .sec.sec04 .swiper-container ul {
        justify-content: center;
        align-items: center;
        text-align: center; 
    }
    
    .sec.sec04 .swiper-container ul li {
        padding: 1.6667vw;
        width: 24.1667vw;
        height: 27.6563vw;
        border-radius: 2.08vw;
        font-size: 2.50vw;
    }
    .sec.sec04 .swiper-container ul li + li {
        margin-left: 5=3.3333vw;
    }
    .sec.sec04 .swiper-container ul li:nth-child(1) {
        background-size: 10.4167vw;
    }
    
    .sec.sec04 .swiper-container ul li:nth-child(2) {
        margin-top: 10.4167vw;
        background-size: 10.4167vw;
    }
    
    .sec.sec04 .swiper-container ul li:nth-child(3) {
        margin-top: 4.1667vw;
        background-size: 10.4167vw;
    }
   
    .sec.sec04 .swiper-container ul li strong {
        padding-top: 14.17vw;
        font-size: 2.5vw;
        letter-spacing: -3px;
    }
    
    .sec.sec04 .swiper-container ul li p {
        padding-top: 0.83vw;
        font-size: 1.25vw;
    }
    
    .sec.sec05 {
        height: 89.0625vw;
        background: url(images/sec05-bg.png) no-repeat;
        background-size: cover;
    }
    
    .sec.sec05 .img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 10.4167vw;
        width: 19.6875vw;
    }
    
    .sec.sec05 .img-wrap {
        margin-top: 10.4167vw;
    }
    
    .sec.sec05 .img-wrap li {
        width: 19.5313vw;
    }
    
    .sec.sec05 .img-wrap li:nth-child(1) {
        top: -2.6042vw;
        left: 7.1354vw;
    }
    .sec.sec05 .img-wrap li:nth-child(2) {
        top: 21.9792vw;
        right: 10vw;
    }
    
    .sec.sec05 .img-wrap li:nth-child(3) {
        top: 15.2083vw;
        left: 1.8229vw;
    }
    
    .sec.sec05 .img-wrap li:nth-child(4) {
        top: 33.0208vw;
        left: 11.8229vw;
    }
    
    .sec.sec05 .img-wrap li:nth-child(5) {
        top: 6.25vw;
        right: 0;
    }
    
    .sec.sec05 .sticker {
        right: 5.2083vw;
        bottom: 4.7917VW;
        width: 21.8750vw;
    }
    .sec.sec06 {
        height: 156.25vw;
        background: url(images/sec06-bg.png) no-repeat;
        background-size: cover;
    }
    
    .sec.sec06  .phone01 {
        position: absolute;
        width: 20.8333vw;
        top: 30.4167vw;
        left: 47.3958vw;
    }
    
    .sec.sec06 .phone02 {
        position: absolute;
        width: 20.8333vw;
        bottom: 10.9375vw;
        left: 39.5833vw;
    }
    
    .sec.sec06 .phone01 img + img {
        position: absolute;
        bottom: -4.3vw;
        left: 2.8646vw;
        width: 27.0313vw;
    }
    
    .sec.sec06 .phone01 + .sticker {
        position: absolute;
        top: 46.1458vw;
        left: 13.5417vw;
        width: 22.9167vw;
    }

    .sec.sec06 .phone02 + .sticker {
        left: 65.3646vw;
        bottom: 8.3333vw;
        width: 30.4688vw;
    }
    .sec.sec06 .swiper-container02 {
        left: 27vw;
        bottom: -86vw;
        width: 78.7500vw;
    }

    .sec.sec06 .swiper-container02 .swiper-slide {
        width: 18.1250vw;
        height: 14vw;
        margin-right: 2.0833vw;
        border-radius: 0.4167vw;
    }
    .sec.sec06 .swiper-container02 .swiper-slide-next {
        border: 0.3125vw solid #7C7266;
        border-radius: 0.4167vw;
    }
    .sec.sec06 .bubble {
        bottom: 24.7396vw;
        left: 12.5vw;
        width: 31.7188vw;
        z-index: 1;
    }
    .sec.sec07 {
        height: 179.0104vw;
        background: url(images/sec07-bg.png) no-repeat;
        background-size: cover;
    }
    
    .sec.sec07 .sticker {
        top: 18.7500vw;
        left: 4.0167vw;
        right: auto;
        width: 16.6667vw;
    }
    
    .sec.sec07 .img-wrap {
        margin-top: 9.9479vw;
    }
    
    .sec.sec07 .img-wrap li:nth-child(1) {
        top: 12.3958vw;
        width: 39.2188vw;
    }
    
    .sec.sec07 .img-wrap li:nth-child(2) {
        top: 63.4375vw;
        width: 24.3750vw;
        z-index: 1;
    }
    
    .sec.sec07 .img-wrap li:nth-child(3) {
        top: 0;
        right: 10.2667vw;
        width: 25.2604vw;
    } 

    .sec.sec08 {
        padding: 12.8646vw 0;
        height: 29.1667vw;
    }
    
    .sec.sec08 .img {
        width: 20.8333vw;
    }
    
    
}