@charset "UTF-8";

.wrap{opacity: 0; animation: .3s ease-in-out 0s 1 normal forwards running opacity;}
@keyframes opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* section{position: relative; max-height: 740px; z-index: 1;} */
section{position: relative; max-width: 100%; max-height: 740px; z-index: 1;}
@media screen and (max-width: 480px) {
    section {
        max-height: 850px; /* 원하는 높이로 변경 */
    }
}


.banner.active-section{margin-top: 68px;}
section > div{margin: 0 auto; width: 100%; max-width: 1440px; padding: 0 208px; max-height: 740px; height: calc(var(--vh, 100dvh)  );}

/* 배너 */
section .background{max-width: none; position: absolute; left: 0; top: 0; width: 100%; max-height: 744px; height: calc(var(--vh, 100dvh)) ; z-index: -1; padding: 0; overflow: hidden;}
.background img{width: 100%; height: 100%; object-fit: cover;}
/* @keyframes zoom-in {
    0%{transform: scale(1); opacity: 1;}
    100%{transform: scale(2); opacity: 1;}
    } */
.banner > div{max-width: none; padding: 0; max-height: 740px;}
/* swiper */
.banner .banner-wrap{position: relative; margin: 0 auto; height: 100%; width: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden;}
.swiper-slide{position: relative; width: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; height: 100%;}
.swiper-wrapper{display: -webkit-flex; display: flex;}
.banner .banner-wrap .swiper-slide.banner1{background: url(/img/banner_background.png) center / cover no-repeat ;}
.banner .banner-wrap .swiper-slide.banner2{background: var(--highlight, #2F83F7);}
.banner .banner-wrap .slide-wrap{max-width: 1440px; width: 100%; height: 100%; position: relative; padding: 0 208px; display: -webkit-flex; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 30px;}
.swiper-pagination{margin: 0 auto; padding: 0 208px 138px; text-align: left; display: -webkit-flex; display: flex; gap: 12px; max-width: 1440px;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{left: auto;}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0; opacity: 1; left: auto;}
.swiper-pagination-bullet{background-color: #fff; transition: all .3s linear; border-radius: 50px;}
.swiper-pagination-bullet-active{width: 32px;}
/* swiper */
.left-contents{z-index: 2; display: -webkit-flex; display: flex; flex-direction: column; gap: 32px; color: #fff;}
.left-contents .title01{animation: 1s ease-in-out .3s 1 normal forwards running upper_transform;}
.left-contents .text01-500{animation: 1s ease-in-out 0.8s 1 normal forwards running upper_transform;}
.left-contents .title01.mo{display: none;}
.store-btns{display: -webkit-flex; display: flex; gap:10px;}
.store-btns .store-btn{display: -webkit-flex; display: flex; width: 30%; height: auto; padding: 15px; align-items: center; justify-content: center; gap: 8px; background: var(--primary, #7f888a); border-radius: 6px;}
.store-btns .store-btn > span{font-size: 2.5em; font-weight: 600; line-height: normal; color: #fff;}
.right-contents{position: absolute; top: 50%; transform: translateY(-50%); right: 224px; background: url(/img/phone.png); width: 238px; height: 500px; flex-shrink: 0; background-repeat: no-repeat; background-size: contain; background-position: center;}
.right-contents.money{width: 473px; height: 473px; background: none;}
.right-contents .img-wrap{position: relative; width: 100%; height: 100%;}
.right-contents.money .img-wrap > img{margin: 0; width: 100%;}
.right-contents .img-wrap >img{margin: 172px 62px 0;}
.right-contents .img-wrap > a{display: -webkit-flex; display: flex; position: absolute; bottom: -16px; right: -45px; width: 112px; height: 112px;}
.right-contents .img-wrap > a > img{width: 100%; height: 100%;}
.right-contents .img-wrap > a .install-text{position: absolute; top: -28px; left: 50%; transform: translateX(-50%); padding: 12px 16px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; border-radius: 50px; background-color: #FFD500; white-space: nowrap; font-weight: 700; font-size: 14px; line-height: normal;}
.right-contents .img-wrap > a .install-text::after{content: ""; width: 13px; height: 15px; background: url(/img/bubble_tip.svg); position: absolute; right: 14px; bottom: -13px;}
/* 배너 */

/* 판매 */
.sell > div{background-image: url(/img/sell/sell_background.png); background-repeat: no-repeat; background-position: right center; display: -webkit-flex; display: flex; align-items: center; }
.sell2 > div{background-image: url(/img/sell/sell_background.png); background-repeat: no-repeat; background-position: left center; display: -webkit-flex; display: flex; align-items: center; }
.flex-container{justify-content: space-between;}
.text-wrap{z-index: 2; display: -webkit-flex; display: flex; flex-direction: column; gap: 10px;}
.active-section .text-wrap.ani-upper{animation: 1s ease-in-out 0s 1 normal forwards running upper_transform;}
.sell .text-wrap.ani-upper{animation: 1s ease-in-out 0s 1 normal forwards running upper_transform;}
.text-wrap .text01{color: #484848;}
.contents-wrap{display: -webkit-flex; display: flex; align-items: flex-end; position: relative; height: 100%; max-width: 334px; flex-shrink: 0; max-height: 740px;}
.contents-wrap .mySwiper2{border-radius: 30px 30px 0 0; overflow: hidden; box-shadow: 0 16px 32px -8px rgba(12, 12, 13, 0.4)}
.contents-wrap .swiper-wrapper{width: 100%; height: 100%;}
.contents-wrap .swiper-slide{padding: 0; border-radius: 30px 30px 0 0;}
.contents-wrap img{box-shadow: 0 16px 32px -8px rgba(12, 12, 13, 0.4)}
.contents-wrap .swiper-slide > img{align-self: flex-end; width: 100%; box-shadow: none;}
.ani04{position: absolute; bottom: 36px; left: calc(100% - 155px); z-index: 1; width: 243px; height: 356px; flex-shrink: 0; 
    border-radius: var(--Corner-Large, 16px); background: url(/img/sell/sell_floating.png) top right / contain no-repeat, #FFF; box-shadow: 0 16px 32px -8px rgba(12, 12, 13, 0.4);
    opacity: 0; transform: translate3d(0px, 50px, 0px);
    
}
.active-section .ani04{animation: 1s ease-in-out 0.5s 1 normal forwards running upper_transform;}
/* 판매 */
/* 구매 */
.buy{background-color: #F5F5F5;}
.buy > div{display: -webkit-flex; display: flex; align-items: center; background-image: url(/img/buy/buy_background.png); background-repeat: no-repeat; background-position: right bottom;}
.buy .text-wrap{order: 2;}
.buy .labels{display: -webkit-flex; display: flex; gap: 8px; margin-top: 20px;}
.buy .labels .label{display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 8px; font-size: 22px; font-weight: 500; line-height: normal; color: #fff;}
.buy .y-bg{background-color: #FFD500;}
.buy .b-bg{background-color: #044ABA;}
.buy .g-bg{background-color: #484848;}
.buy .contents-wrap{display: -webkit-flex; display: flex; align-items: flex-end;}
.buy .contents-wrap .img-wrap{position: relative; display: -webkit-flex; display: flex; height: fit-content;}
.buy .contents-wrap .market-ul{width: 100%; align-self: flex-end; object-fit: contain;}
.buy .contents-wrap .market-list{width: 453px; position: absolute; top: 126px; left: -60px; transform: translate(-50%, 50px); box-shadow: 0 16px 16px -8px rgba(12, 12, 13, 0.1);}
.buy.active-section .contents-wrap .market-list{animation: 1s ease-in-out .5s 1 normal forwards running upper_transform;}
/* 구매 */
/* 찾습니다. */
.find{background-color: #fff;}
.find > div{ background-image: url(/img/find/find_background.png); background-repeat: no-repeat; background-position: left center; background-size: contain;}
.find .contents-wrap{display: -webkit-flex; display: flex; align-items: flex-end;}
.find .contents-wrap .img-wrap{display: -webkit-flex; display: flex; position: relative; width: 100%;}
.find .contents-wrap .img-wrap img{align-self: flex-end; width: 100%; border-radius: 30px 30px 0 0;}
.find .contents-wrap .img-wrap .message-wrap{display: -webkit-flex; display: flex; flex-direction: column; gap: 10px; position: absolute; z-index: 2;}
.find .contents-wrap .img-wrap .message-wrap > div{width: fit-content; padding: 10px 16px; box-shadow: 0 16px 16px -8px rgba(12, 12, 13, 0.1);}
.message-wrap.blue-message{align-items: flex-end; right: -96px; top: 121px;}
.message-wrap.gray-message{left: -108px; bottom: 166px;}
.message-wrap .blue{background-color: #2F83F7; border-radius: 20px 0 20px 20px;}
.message-wrap .gray{background-color: #484848; border-radius: 0 20px 20px 20px;}
.active-section .message1{animation: 1s ease-in-out .7s 1 normal forwards running right_transform;}
.active-section .message2{animation: 1s ease-in-out .7s 1 normal forwards running right_transform;}
.active-section .message3{animation: 1s ease-in-out 1.4s 1 normal forwards running left_transform;}
.active-section .message4{animation: 1s ease-in-out 1.4s 1 normal forwards running left_transform;}
/* 찾습니다. */
/* 나눔 */
.share{ background-color: #F1F7FF;}
.share > div{background-image: url(/img/share/share_background.png); background-repeat: no-repeat; background-position: right center;}
.share .text-wrap{order: 2;}
.share .contents-wrap{max-width: 480px; display: -webkit-flex; display: flex; align-items: center;}
.share .contents-wrap .img-wrap{position: relative;}
.share .contents-wrap .img-wrap >img{width: 100%; height: 100%; border-radius: 17px; position: relative; z-index: 2;}
.icons > svg{width: 158px; box-shadow: none; position: absolute; }
.icons .icon1{width: 175px; z-index: 1; top: -65px; left: -82px; animation: 2.5s ease-in-out 0s infinite normal forwards running cloud;}
.icons .icon2{width: 107px; z-index: 1; top: -31px; right: -87px; animation: 3s ease-in-out 0s infinite normal forwards running cloud;}
.icons .icon3{width: 143px; z-index: 3; bottom: -57px; right: -71px; animation: 3.5s ease-in-out 0s infinite normal forwards running cloud;}
@keyframes cloud {
    0% {
        transform: translate3d(0px, 0px, 0px);
    }
    50% {
        transform: translate3d(2px, 10px, 3px);
    }
    100% {
        transform: translate3d(0px, 0px, 0px);
    }
}
/* 나눔 */
/* 간편거래 */
.transaction{padding-top: 65px; background-color: #f5f5f5;}
.transaction > div{display: -webkit-flex; display: flex; flex-direction: column; gap: 36px;}
.transaction .text-wrap{text-align: center;}
.transaction .text-wrap .text01{color: #484848;}
.transaction .contents-wrap{display: -webkit-flex; display: flex; max-width: 825px; gap: 20px; height: auto; margin: 0 auto;}
.transaction .contents-wrap .content-box{padding: 15px 35px; background-color: #f5ece4; border: 5px solid white; border-radius: 16px; align-self: stretch; flex: 1 0 0;white-space: nowrap;}
.transaction .contents-wrap .content-box span{white-space: nowrap;}
.transaction .contents-wrap .content-box:last-child{background-color: #e8edf5;}
.content-box img{box-shadow: none; object-fit: contain; width: 100%;}
/* 간편거래 */
/* 앱 다운로드 */
.download{background: url(/img/app_bg_pc.png) center 45% / cover no-repeat;}
.download > div{display: -webkit-flex; display: flex; align-items: center;}
.download .container{display: -webkit-flex; display: flex; flex-direction: column; gap: 30px; justify-content: center;}
.download.active-section .logo{animation: 1s ease-in-out 0s 1 normal forwards running upper_transform;}
.download.active-section .text-wrap{animation: 1s ease-in-out 0s 1 normal forwards running upper_transform;}
/* .download .title02-w{width: 70%;} */
/* .download.active-section .title02-w > span{opacity: 1;} */
.qr-code-wrap{display: -webkit-flex; display: flex; gap: 12px;}
.qr-code{width: 87px; height: 87px;}
.qr-text{display: -webkit-flex; display: flex; flex-direction: column; font-size: 20px; font-weight: 600; color: #fff;}
/* 앱 다운로드 */
/* 공유하기 */
.sharing > div{max-height: 350px; padding: 100px 208px;}
.sharing.fp-section.fp-table, .sharing .fp-tableCell {height:auto !important; width: 100%;} 
.sharing .share-box{display: -webkit-flex; display: flex; flex-direction: column; gap: 24px; align-items: center;}
.sharing .share-sns{display: -webkit-flex; display: flex; gap: 16px;}
.sharing .share-sns > a{display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; flex-shrink: 0; padding: 18px 19px; border-radius: 16px;}
.naver-link{background-color: #00C73C;}
.kakao-link{background-color: #FEE500;}
.fb-link{background-color: #044ABA;}
.share-link{background-color: #707070;}
/* 공유하기 */

/* 태블릿 */
@media screen and (max-width: 1024px) {
    section > div{padding: 100px 120px;}
    .flex-container{gap: 30px;}
    .swiper-slide{padding: 0 104px;}
    .swiper-pagination{padding-bottom: 100px;}
    section{max-height: none; height: auto !important;}
    section .background{max-height: none; height: 100%;}
    .section > div{padding: 0 20px; max-height: none; height: auto !important;}
    .banner > div{padding: 0;}
    .title01 > span{text-align: center;}
    .text01-500{text-align: center;}
    .left-contents .store-btns{justify-content: center;} 

    /* 배너 */
    .banner > div{max-height: none; height: auto !important;}
    .swiper-slide{padding: 100px 20px; flex-direction: column; justify-content: flex-start; gap: 24px;}
    .banner .banner-wrap .slide-wrap{padding: 0 20px; align-items: center; }
    .banner .banner-wrap .swiper-slide{min-height: 500px; max-height: 980px;} 
    .banner .banner-wrap .banner2 .left-contents{min-height: 340px; gap: 24px;}
    .banner .banner-wrap .banner2 .right-contents .img-wrap{max-height: 500px; height: 100%;}
    .banner .banner-wrap .banner2 .right-contents .img-wrap > img{max-height: 300px; height: 100%; object-fit: contain;}
    .left-contents .title01{}
    /* .left-contents .title01.mo{display: -webkit-flex; display: flex;} */
    .right-contents{position: static; transform: translate(0); width: 178px; height: 374px;}
    .right-contents .img-wrap >img{margin: 129px 48px 0; width: 82px; height: 82px;}
    .right-contents.money{width: 100%; height: 100%;}
    .right-contents .img-wrap > a{width: 84px; height: 84px; right: -16px; bottom: -8px;}
    .right-contents .img-wrap > a .install-text{font-size: 10.5px; padding: 9px 12px; border-radius: 37.5px; top: -20px;}
    .right-contents .img-wrap > a .install-text::after{width: 10px; height: 11px; right: 10px; bottom: -9px; background-size: cover;}
    .swiper-pagination{padding: 0; padding-bottom: 17px; justify-content: center;}
    /* 배너 */
    .flex-container{flex-direction: column; gap: 30px; padding-top: 100px;}
    .contents-wrap{max-width: 250px;}
    .text-wrap{align-items: center;}
    .title02 > span{text-align: center;}
    /* 판매 */
    .ani04{width: 170px; height: 249px; left:calc(100% - 75px);}
    /* .ani04{display: none;} */
    /* 판매 */
    /* 구매 */
    .buy .text-wrap{order: 0;}
    .buy .labels .label{font-size: 16px;}
    .buy .contents-wrap .market-ul{width: 100%;}
    .buy .contents-wrap .market-list{max-width: 340px; top: 100px; left: -34px;}
    /* 구매 */
    /* 찾습니다 */
    .find .contents-wrap .img-wrap img{width: 100%;}
    .message-wrap.blue-message{right: -36px; top: 88px;}
    .message-wrap.gray-message{left: -25px; top: 237px; bottom: auto;}
    /* 찾습니다 */
    /* 나눔 */
    .share{height: 738px;}
    /* .share > div{height: 783px !important;} */
    .share .flex-container{padding: 100px 0; justify-content: center;}
    .share .text-wrap{order: 0; margin-bottom: 35px;}
    .share .contents-wrap{max-width: 240px; height: auto !important;}
    .icons .icon1{width: 96px; height: 104px; top: -42px; left: -45px;}
    .icons .icon2{width: 62px; height: 77px; top: -30px; right: -37px;}
    .icons .icon3{width: 80px; height: 88px; bottom: -33px; right: -36px;}
    /* 나눔 */
    /* 간편거래 */
    .transaction{padding: 100px 0;}
    .transaction .contents-wrap .content-box{padding: 30px; border-radius: 12px;}
    .content-box img{width: 100%; height: 100%; box-shadow: none; object-fit: contain;}
    /* 간편거래 */
    /* 다운로드 */
    .download{max-height: none; background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url(/img/app_bg_pc.png) lightgray 77% 0px / 130.45% 100% no-repeat;}
    .download > div{justify-content: center;}
    .download .container{align-items: center; padding: 100px 0;}
    .download .title02-w > span{text-align: center;}
    .qr-code-wrap{flex-direction: column; align-items: center;}
    .qr-text{font-size: 16px; line-height: 28px; flex-direction: row; gap: 3px;}
    /* 다운로드 */
    /* 공유하기 */
    .sharing .share-box{padding: 50px 0;}
    .sharing .share-sns > a{width: 56px; height: 56px; padding: 15px 11px;}
    .kakao-link > svg{width: 24px;}
    .fb-link > svg{width: 15px;}
    .share-link > svg{width: 29px;}
    /* 공유하기 */
}
@media screen and (max-width: 768px) {
    /* 다운로드 */
    .download{max-height: none; background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url(/img/app_bg_pc.png) lightgray 77% 0px / 163.45% 100% no-repeat;}
    /* 다운로드 */
}
/* 태블릿 */
/* 모바일 */
@media screen and (max-width: 480px) {
    .left-contents .store-btns{gap: 7px;}
    .left-contents .store-btns .store-btn{width: 31%; height: auto; padding: 12px; gap: 6px; border-radius: 4.5px;}
    .left-contents .store-btns .store-btn > svg{width: 12px;}
    .left-contents .store-btns .store-btn > span{font-size: 1.5em;}

    /* 배너 */
    .left-contents{min-height: 340px;}
    .left-contents .title01{display: none;}
    .left-contents .title01.mo{display: -webkit-flex; display: flex;}
    /* 배너 */
    /* 판매 */
    .ani04{display: none;}
    /* 판매 */
    /* 구매 */
    .buy .labels .label{font-size: 16px;}
    .buy .contents-wrap .market-list{max-width: 320px; top: 100px; left: -34px;}
    /* 구매 */
    /* 찾습니다 */
    /* 찾습니다 */
    /* 나눔 */
    /* 나눔 */
    /* 간편거래 */
    .transaction .contents-wrap{flex-direction: column; max-width: 300px;}
    /* 간편거래 */
    /* 다운로드 */
    .download{max-height: none; background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url(/img/app_bg_mb.png) lightgray 78% 0px / 101.45% 100% no-repeat;}
    .download .title02-w{width: 82%;}
    .download .store-btns{flex-direction: column;}
    .qr-code-wrap{flex-direction: column; align-items: center;}
    .qr-text{font-size: 16px; line-height: 28px; flex-direction: row; gap: 3px;}
    /* 다운로드 */
    /* 공유하기 */
    .sharing .share-box{padding: 50px 0;}
    .sharing .share-sns > a{width: 56px; height: 56px; padding: 15px 11px;}
    .kakao-link > svg{width: 24px;}
    .fb-link > svg{width: 15px;}
    .share-link > svg{width: 29px;}
    /* 공유하기 */
}
@media screen and (max-width: 320px) {
    .icons .icon1{top: -49px; left:-26px;}
    .icons .icon2{right: -21px;}
    .icons .icon3{bottom: -37px; right: -14px;}
    .buy .contents-wrap .market-list{width: 270px; top: 100px; left: -10px;}
    .message-wrap.blue-message{right: -14px;}
    .message-wrap.gray-message{left: -10px;}
}
/* 모바일 */