/* 메인 헤더 */
.header.main.hdst2 { background-color:#377dff; border-bottom: 0; } 
.header.main { background-color: #fff; } 
.header.main.hdst2 .gnb-rgt ul.gnb > li:nth-child(3) > a { background-color:#ffffff3d; } 
.header.main.hdst2 .gnb-rgt ul.gnb > li > a { background-color: transparent; color: #fff; } 
.header.main.hdst2 .gnb-rgt ul.gnb > li:nth-child(2)::after { filter: brightness(10); } 
.header.main.hdst2 .gnb-rgt h1 a { background: url(../img/logo_w.svg) no-repeat left center; } 
.header.main.hdst2 .gnb-lft .mbtn-menu button > i { background-color: #fff; } 
.header.main.hdst2.on .gnb-lft .mbtn-menu button > i { background-color: #101c33; } 

/* 메인 공통 */
.main-con { color: #111; } 
.mainh2 { font-size: 42px; letter-spacing: -0.5px; font-weight: 700; line-height: 60px; color: #333; } 
.mainh3 { font-size: 25px; letter-spacing: -0.5px; font-weight: 600; line-height: 38.4px; color: #377DFF; padding-bottom: 14px; } 

/* 메인 비쥬얼 */
.main-vis { background-color: #377DFF; padding: 30px 0 80px 0; text-align: center; } 
.main-vis .main-vis-pc { position: relative; } 
.main-vis .main-vis-pc::after { content: ''; background: url(../img/icn_down.svg) no-repeat; background-position: center bottom 55%; width: 45px; background-size: inherit; height: 45px; border-radius: 50%; border: 2px solid #fff; position: absolute; bottom: -40px; left: calc(50% - 22.5px); animation: mousemove linear 1.5s alternate infinite; } 

@keyframes mousemove { 
 0% { background-position: center bottom 55%; } 
 50% { background-position: center bottom 35%; } 
 100% { background-position: center bottom 55%; } 
 }

.main-vis .mo { display: none; } 

/* 메인 주요 특징 요약 */
.feature { background-color: #377DFF; } 
.feature .featurewrap { background-color: #1c2129; border-radius: 40px 40px 0 0; padding-top: 80px; padding-bottom: 140px; } 
.feature ul { display: flex; flex-wrap: wrap; /* padding: 0 10px; */ } 
.feature ul li { display: flex; flex-direction: column; justify-content: space-between; width: calc((100% - 70px) / 3); margin-bottom: 35px; margin-right: 35px; background-color: #ffffff0d; color: #fff; border-radius: 15px; padding: 44px; } 
.feature ul li:nth-child(3n) { margin-right: 0; } 
.feature ul li p.tit { font-size: 26px; font-weight: 600; line-height: 1.4; letter-spacing: -0.3px; } 
.feature ul li p.tit br { display: none; } 
.feature ul li p.sub { font-size: 19px; opacity: .4; padding-top: 5px; letter-spacing: -0.19px; font-weight: 400; line-height: 1.5; word-break: keep-all; } 
.feature ul li p.num { font-size: 40px; color: #4b8aff; font-weight: 700; letter-spacing: -0.8px; line-height: 1; padding-top: 15px; } 
.feature ul li p.num span { font-size: 16px; font-weight: 500; line-height: 26px; padding-right: 6px; } 

/* 메인 이벤트 */
.mainevent { background-color: #1c2129; padding-bottom: 160px; } 
.mainevent .title { padding-bottom: 55px; } 
.mainevent .title .mainh2 { color: #fff; } 
.mainevent .title .mainh2 br { display: none; } 
.mainevent .eventlist { color: #fff; position: relative; } 
.swiper.eventSwiper { width: 100%; height: 100%; border-radius: 15px; padding-top: 100px; margin-top: -105px; } 
.swiper.eventSwiper .swiper-slide { border-radius: 15px; display: flex; justify-content: center; align-items: center; } 
.swiper.eventSwiper .swiper-slide a { display: block; border-radius: 15px; overflow: hidden; } 
.swiper.eventSwiper .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } 
.eventlist .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal { position: unset; padding-top: 55px; } 
.eventlist .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; border-radius: 12px; margin: 0 3px; opacity: 1; background: #4F5568; } 
.eventlist .swiper-pagination .swiper-pagination-bullet-active { width: 28px; background: #377DFF; } 
.eventlist .swiper-button-prev img, .eventlist .swiper-button-next img { display: block; } 
.eventlist .swiper-button-next { width: 48px; height: 48px; top: 25px; right: 0; } 
.eventlist .swiper-button-prev { width: 48px; height: 48px; top: 25px; left: calc(100% - 110px); } 
.eventlist .swiper-button-next:after, .swiper-button-prev:after { display: none; } 


/* 메인 혜택 영역 */
.benefit { position: relative; padding-top: 215px; padding-bottom: 200px; overflow: hidden; } 
.benefit::before { content: ''; position: absolute; width: 100vw; height: 670px; background-color: #EFF5FB; z-index: -1; border-radius: 64px 0 0 192px; top: 100px; right: calc((0% + 50%) + 775px); transform: translateX(100%); } 
/* .benefit::after { }  */
.benefit .basic { display: flex; justify-content: space-between; } 
.benefit .basic .list { width: 55%; } 
.benefit .basic .list > ul { border-top: 1px solid #D0D5DA; } 
.benefit .basic .list > ul > li { font-size: 24px; color: #333; line-height: 34px; font-weight: 600; padding: 36px 0; border-bottom: 1px solid #D0D5DA; letter-spacing: -1px; } 
.benefit .basic .list > ul > li span { color: #377DFF; padding-right: 16px; } 
.benefit .detail { padding-top: 290px; } 
.benefit .detail .title { text-align: center; } 
.benefit .detail .title .mainh2 br { display: none; } 
.benefit .detail .list { position: relative; padding-top: 80px; } 
.benefit .detail .list::before { content: ''; position: absolute; width: 846px; height: 109px; left: -480px; top: 35px; z-index: -1; background: url(../img/img_benefit1.svg) no-repeat; } 
.benefit .detail .list::after { content: ''; position: absolute; width: 423px; height: 109px; right: -360px; bottom: -10px; z-index: -1; background: url(../img/img_benefit2.svg) no-repeat; } 
.benefit .detail .list > ul { display: flex; flex-wrap: wrap; /* box-shadow: 0 10px 40px; */ } 
.benefit .detail .list > ul > li { width: calc((100% - 70px) /3); height: 395px; margin-right: 35px; padding: 45px 50px 50px 50px; background-color: #fff; border-radius: 30px; display: flex; flex-direction: column; box-shadow: 0 10px 40px #DEE3ED; margin-bottom: 35px; justify-content: space-between; } 
.benefit .detail .list > ul > li:nth-child(3n) { margin-right: 0px; } 
.benefit .detail .list > ul > li .txt > img { width: 60px; display: block; } 
.benefit .detail .list > ul > li .txt p.tit { font-size: 24px; line-height: 1.45; letter-spacing: -0.5px; font-weight: 700; padding-top: 22px; padding-bottom: 8px; } 
.benefit .detail .list > ul > li .txt p.sub { font-size: 18px; line-height: 1.65; color: #555; letter-spacing: -0.5px; } 
.benefit .detail .list > ul > li .tag ul { overflow: hidden; } 
.benefit .detail .list > ul > li .tag ul li { float: left; color: #377DFF; font-size: 17px; line-height: 1.5; letter-spacing: -0.5px; padding-right: 10px; } 


/* 모빌마켓 */
.mobilmarket { position:relative; padding-bottom: 180px; overflow:hidden; letter-spacing: -0.5px; } 
.mobilmarket::before { content: ''; position: absolute; width: 85%; height: 100%; background-color: #EFF5FB; z-index: -1; border-radius: 235px 0 0 0; top: 590px; right: 0; } 
.mobilmarket .title { text-align: center; } 
.mobilmarket .title .mainh2 br { display: none; } 

.market_wrap { margin-top: 100px; } 
.market_wrap .market .txt-wrap p.tit { font-size:30px; line-height: 1.5; font-weight: 700; color:#111; } 
.market_wrap .market .txt-wrap p.tit span { color:#377DFF; } 
.market_wrap .market .txt-wrap p.sub { padding-top: 13px; font-size: 24px; line-height: 1; font-weight: 500; color:#555; } 

.market_wrap .market1 { margin-bottom:60px; display: flex; justify-content:center;} 
.market_wrap .market1 .img-wrap { position: relative; width:495px; margin-right: 55px; } 
.market_wrap .market1 .img-wrap img.main{ width:100%; } 
.market_wrap .market1 .img-wrap img.bubble{ position:absolute; } 
.market_wrap .market1 .img-wrap img.bubble1{ width:160px; left:-50px; top:32%;} 
.market_wrap .market1 .img-wrap img.bubble2{ width:248px; right:-100px; top:50%;} 
.market_wrap .market1 .txt-wrap { position:relative; margin-top: 100px; } 
.market_wrap .market1 .txt-wrap .coin { position:absolute; right:-90px; top:-70px; animation:float3 2.5s linear 0s infinite;animation-delay: 1s; } 

.market_wrap .market2 { display: flex; justify-content:flex-end; } 
.market_wrap .market2 .market-logo { padding-left: 10px; padding-bottom: 16px; } 
.market_wrap .market2 .txt-wrap { padding-right: 90px; } 
.market_wrap .market2 .list { margin-right: 50px; }
.market_wrap .market2 .list li { width:540px; display: flex; align-items:center; background-color:#fff; box-shadow: 0 10px 40px #DEE3ED; margin-bottom: 30px; border-radius: 15px; padding:20px 28px; } 
.market_wrap .market2 .list li img { margin-right: 24px; } 
.market_wrap .market2 .list li p { font-size:23px; color:#4f4f4f; font-weight: 700; }
.market_wrap .market2 .list li .txt-xs { font-size:15px; color:#4f4f4f; font-weight: 300;margin-top: 9px; display: inline-block; }  /* 무료배송정책수정 */


/* 바코드결제 */
.bcdpay { position: relative; background: #20262d url(../img/bcdbackground.svg) no-repeat; background-position: center bottom -60px; padding-top: 140px; padding-bottom: 200px; display: flex; /* z-index: 0; */flex-direction: column; align-items: center; } 
.bcdpay .title { text-align: center; } 
.bcdpay .title .mainh2 { color: #fff; } 
.bcdpay .title a.bcdlink { display: inline-block; font-size: 18px; padding: 0 25px; line-height: 60px; color: #fff; background-color: #377DFF; border-radius: 500px; margin-top: 40px; transition: .2s; } 
.bcdpay .title a.bcdlink:hover { transform: translateY(-6px); } 
.bcdpay .bcdpay-window { width: 340px; height: 630px; margin-top: 60px; border: 10px solid #373C44; border-radius: 45px; background: url(../img/img_bcdbg.svg) no-repeat; background-size: cover; display: flex; z-index: 1; align-items: center; } 
.bcdpay-window .bcdSwiper .swiper-wrapper { display: flex; align-items: center; } 
.bcdpay-window .bcdSwiper .swiper-slide { width: 80%; background-color: #fff; border-radius: 30px; } 
.bcdpay-window .bcdSwiper .bcd { display: flex; align-items: center; flex-direction: column; padding: 35px 0; } 
.bcdpay-window .bcdSwiper .bcd img:first-child { width: 110px; } 
.bcdpay-window .bcdSwiper .bcd p.brand { font-size: 22px; font-weight: 600; line-height: 1.5; padding-top: 18px; padding-bottom: 3px; } 
.bcdpay-window .bcdSwiper .bcd p.perc { font-size: 45px; letter-spacing: -1.5px; font-weight: 900; line-height: 1; } 
.bcdpay-window .bcdSwiper .bcd img:last-child { width: 80%; padding-top: 22px; } 
 .bcdpay-window .bcdSwiper .bcd p.cu { color:#b3db2f; } /* 241223 추가 */
.bcdpay-window .bcdSwiper .bcd p.gs25 { color:#007cff; } 
.bcdpay-window .bcdSwiper .bcd p.emart { color:#fdb417; } 
.bcdpay-window .bcdSwiper .bcd p.lotte { color:#eb1c24; } 
.bcdpay-window .bcdSwiper .bcd p.homep { color:#ed1c24; } 
.bcdpay-window .bcdSwiper .bcd p.daiso { color:#ed1b24; } 
.bcdpay-window .bcdSwiper .swiper-slide.swiper-slide-prev, .bcdpay-window .bcdSwiper .swiper-slide.swiper-slide-next { opacity: .3; } 
.bcdpay-window .bcdSwiper .swiper-slide.swiper-slide-next .bcd img:last-child, .bcdpay-window .bcdSwiper .swiper-slide.swiper-slide-prev .bcd img:last-child { display: none; } 
.bcdpay-logowrap { position: absolute; width: 100%; bottom: 380px; /* z-index: 1; */ } 
.bcdpay-logowrap::before { content: ''; position: absolute; top:0; left: 0; width: 300px; height: 100%; background: linear-gradient(90deg, #20262d, #20262d00); z-index: 1; } 
.bcdpay-logowrap::after { content: ''; position: absolute; top:0; right: 0; width: 300px; height: 100%; background: linear-gradient(90deg, #20262d00, #20262d); z-index: 1; } 
.bcdpay-logowrap .bcdpaylogo { height: 155px; width: 100%; margin: 0 auto; position: relative; overflow: hidden; transform: translate3d(0, 0, 0); } 
.bcdpaylogo .bcdlogo-content { height: 155px; width: 99999px; background-image: url(../img/bcdlogo1.png); background-size: contain; background-repeat: repeat-x; position: absolute; top: 0; right: 0; transform: translate3d(0, 0, 0); animation: logoSlide 1500s linear infinite; } 
.bcdpaylogo .bcdlogo-content2 { height: 155px; width: 99999px; background-image: url(../img/bcdlogo2.png); background-size: contain; background-repeat: repeat-x; position: absolute; top: 0; left: 0; transform: translate3d(0, 0, 0); animation: logoSlide2 1500s linear infinite; } 
@keyframes logoSlide { 100% { transform: translateX(66.6666%); } 
 } 
@keyframes logoSlide2 { 100% { transform: translateX(-66.6666%); } 
 } 







/* 모빌카드 통계 */
.statistic { background: linear-gradient(180deg, #287FFF, #377dff); padding: 130px 0; } 
.statistic .title { text-align: center; } 
.statistic .title .mainh2 { color:#fff; } 
.statistic .title .mainh2 br { display: none; } 
.statistic .list { padding-top: 50px; } 
.statistic .list ul { display: flex; flex-wrap: nowrap; } 
.statistic .list ul li { text-align: center; width: calc((100% - 60px) / 3); border: 2px solid #ffffff2e; border-radius: 15px; margin-right: 30px; padding: 42px 0; } 
.statistic .list ul li:last-child { margin-right: 0; } 
.statistic .list ul li p { color: #fff; font-size: 52px; line-height: 1.25; font-weight: 700; } 
.statistic .list ul li p:last-child { opacity: .5; font-size: 22px; line-height: 1.5; font-weight: 500; padding-top: 8px; } 
.statistic .statis-date { font-size: 18px; line-height: 1.7; font-weight: 400; color: #fff; text-align: center; padding-top: 30px; opacity: .7; } 

/* 유튜브랜딩섹션 수정시작 */
.statistic .youtube{ padding-top:50px; }
.statistic .youtube .img-wrap{border-radius: 15px; margin:0 auto 24px; overflow: hidden;width:100%; max-width: 650px;}
.statistic .youtube .img-wrap a{position: relative; display:flex;}
.statistic .youtube .img-wrap a:hover img.icn_play{transform: scale(1.05); transition-duration: 0.3s;}
.statistic .youtube .img-wrap a img.thumbs{width:100%;}
.statistic .youtube .img-wrap a img.icn_play{position:absolute; left:50%; top:50%; margin-left:-50px; margin-top: -38px; transition-duration: 0.3s;}
.statistic .youtube p{ text-align: center; color:#fff; line-height: 1.6; font-size: 26px; }

.statistic .list { padding-top: 60px; }
/* 유튜브랜딩섹션 수정 끝 */

/* 리뷰 영역 */
.review { background: linear-gradient(180deg, #E3ECFF, #fff); } 
.review .rvwrap { display: flex; align-items: flex-start; justify-content: space-between; } 
.review .title { padding-top: 165px; } 
/* 리뷰슬라이드 */
.reviewSlide { position: relative; display: flex; width: 740px; height: 980px; } 
.reviewSlide::before { content: ''; position: absolute; z-index: 2; width: 100%; background: linear-gradient(180deg, #e3ecff, #e3ecff00); height: 150px; top: 0; right: 0; } 
.reviewSlide::after { content: ''; position: absolute; z-index: 10; width: 100%; height: 150px; bottom: 0; right: 0; background: linear-gradient(180deg, #ffffff00, #fff); } 
.reviewSlide .reviewLine { height: 100%; width: 100%; margin: 0 auto; position: relative; overflow: hidden; transform: translate3d(0, 0, 0); } 
.reviewLine .reviewContent { height: 99999px; width: 370px; background-image: url(../img/reviewline2.png); background-size: contain; background-repeat: repeat-y; position: absolute; bottom: 0; left: 0; transform: translate3d(0, 0, 0); animation: reviewSlide 2000s linear infinite; } 
.reviewLine .reviewContent2 { height: 99999px; width: 370px; background-image: url(../img/reviewline.png); background-size: contain; background-repeat: repeat-y; position: absolute; top: 0; left: 0; transform: translate3d(0, 0, 0); animation: reviewSlide2 2000s linear infinite; } 
@keyframes reviewSlide { 100% { transform: translateY(66.6666%); } 
 } 
@keyframes reviewSlide2 { 100% { transform: translateY(-66.6666%); } 
 } 


/* 앱 다운로드 */
.appdown { padding-top: 100px; } 
.appdown .appbox { background: #357cff url(../img/img_appdown.png) no-repeat right top; border-radius: 30px; background-size: 50%; padding: 85px 120px; } 
.appdown .appbox .txt p { font-size: 42px; line-height: 56px; color: #fff; font-weight: 400; } 
.appdown .appbox .txt p span { font-weight: 700; } 
.appdown .appbox .down { display: flex; align-items: stretch; padding-top: 40px; } 
.appdown .appbox .down .qr { width: 130px; height: 130px; display: flex; border-radius: 12px; background-color: #fff; align-items: center; justify-content: center; } 
.appdown .appbox .down .qr img { display: block; width: 116px; height: 116px; } 
.appdown .appbox .down .link { width: 210px; display: flex; flex-direction: column; padding-left: 10px; justify-content: space-between; } 
.appdown .appbox .down .link a { background-color: #2A3F66; display: flex; height: 62px; border-radius: 10px; align-items: center; justify-content: center; } 
.appdown .appbox .down .link a img { display: block; } 
.appdown .appbox .down .mobtn { display: none; background-color: #ffffff; font-size: 15px; padding: 15px 22px; border-radius: 800px; font-weight: 600; color: #2A3F66; } 




/* 앱 다운로드 */
.appcta { display: none; position: fixed; width: calc(100% - 20px); background-color: #000; font-size: 16px; left: 10px; bottom: 10px; font-weight: 600; line-height: 50px; border-radius: 12px; text-align: center; padding: 0; color: #fff; z-index: 10; transition: .3s; transform: translateY(70px); } 
.appcta a { display: flex; height: 100%; justify-content: center; align-items: center; } 
.appcta a img { height: 14px; padding-left: 8px; } 
.appcta.on { transform: translateY(0); } 




/* top ani */

.sr-only { overflow: hidden; position: absolute !important; clip: rect(0, 0, 0, 0); clip-path: inset(50%); width: 1px; height: 1px; margin: -1px; } 

/* LAYOUT */
.main-vis-inner { margin: 0 auto; width: 1191px; } 
.main-vis-pc { height: 680px; --wh: 130px; --mr: 24px; } 
.main-vis-pc .main-vis-inner { height: inherit; display: flex; flex-direction: column; justify-content: center; align-items: center; } 

.back-to-position-x,
.back-to-position-y { opacity: 0; transition: 1s; } 
.back-to-position-x.to-right { transform: translateX(-150px); } 
.back-to-position-x.to-left { transform: translateX(150px); } 
.back-to-position-y.to-top { transform: translateY(200px); } 
.show .back-to-position-x { opacity: 1; transform: translateX(0); } 
.show .back-to-position-y { opacity: 1; transform: translateY(0); } 
.show .delay-0 { transition-delay: 0s; } 
.show .delay-1 { transition-delay: .2s; } 
.show .delay-2 { transition-delay: .4s; } 
.show .delay-3 { transition-delay: .6s; } 

/* MOBILE */
.mobile { position: absolute; width: 368px; z-index: 10; } 
.mo .mobile { position: static; height: 340px; width: auto; } 
.mo .mobile img { width: 250px; height: auto; padding-top: 15px; object-fit: top; } 
.mobile img { width: 100%; height: 100%; } 
.mo { position: relative; } 
.mo .top { color: #fff; font-size: 36px; font-weight: 700; line-height: 1.3; } 
.mo .top .flex-box { display: flex; justify-content: center; align-items: center; } 
.mo .top .top-text { display: block; } 
.mo .top .top-text2 { display: inline-block; margin-top: 2px; } 
.mo .btm-text1 { position: relative; overflow: hidden; width: auto; height: 36px; } 
.mo .btm-text1 > div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 36px; line-height: 36px; width: 130px; overflow: hidden; transform-origin: 0 0; } 
.mo .text-ani { min-width: 150px; height: 36px; /* display: inline-block; */
 vertical-align: middle; } 
.mo .v-slide-mo .line { position: absolute; top: 0; height: 36px; line-height: 36px; } 
.mo .v-slide-mo .line:first-of-type .word .char { transform: translate(0, 0); } 
.mo .mobile { position: relative; } 
.mo .con-img { position: absolute; width: 65px; height: 65px; border-radius: 50%; animation-timing-function: steps(1, end); animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: both; -webkit-animation-timing-function: steps(1, end); -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-fill-mode: both; background-size: 65px 65px; }

.mo .unlimite { animation-name:rotationAni1; animation-duration: 5s; -webkit-animation-name:rotationAni1; -webkit-animation-duration: 5s; left: calc(50% + 65px); top: 205px; } 
.mo .btm-emoji { top: 120px; left: calc(50% + -150px); animation-name:rotationAni2; animation-duration: 5s; -webkit-animation-name:rotationAni2; -webkit-animation-duration: 5s; } 
.mo .btm-hash { top: 80px; left: calc(50% + 90px); animation-name:rotationAni3; animation-duration: 5s; -webkit-animation-name:rotationAni3; -webkit-animation-duration: 5s; } 

/* TOP */
.top-content { display: flex; align-items: center; margin-left: 38px; } 
.top-content > div { font-size: 64px; font-weight: bold; color: #fff; flex: 0 0 auto; display: inline-flex; align-items: center; letter-spacing: -0.08rem; height: 130px; box-sizing: border-box; } 
.top-content .top-text1 { background-color: rgba(255,255,255,.3); border-radius: 4rem; padding: 20px 53px; margin-right: 15px; } 
.mo .top-content .top-text1,
.mo .top-content .top-text2,
.mo .top-content .top-text3 { background: none; } 
.top-content .top-text2 { border-radius: 4rem; padding: 20px 50px; background-color: rgba(255,255,255,.1); margin-right: 75px; } 
.top-content .top-text2 span { vertical-align: middle; } 
.top-content .top-text2 img { width: 31px; height: 31px; margin: 0 34px; } 
.top-content .unlimite { width: var(--wh); height: var(--wh); border-radius: 50%; text-align: center; line-height: 128px; margin-right: 245px; animation-name:rotationAni1; animation-duration: 2s; animation-timing-function: steps(1, end); animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: both; -webkit-animation-name:rotationAni1; -webkit-animation-duration: 2s; -webkit-animation-timing-function: steps(1, end); -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-fill-mode: both; background-size: var(--wh) var(--wh); } 

/* BOTTOM */
.bottom { margin-top: 22px; margin-bottom: 50px; } 
.bottom-content { display: flex; font-size: 65px; color: #fff; font-weight: bold; margin-right: 50px; } 
.bottom-content .btm-emoji { width: var(--wh); height: var(--wh); margin-right: var(--mr); animation-name:rotationAni2; animation-duration: 4s; animation-timing-function: steps(1, end); animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: both; animation-delay: 2s; background-size: var(--wh) var(--wh); } 
.bottom-content .text-ani { background-color: #054FBF; border-radius: 4rem; margin-right: 260px; width: 312px; height: var(--wh); box-sizing: border-box; } 
.bottom-content .btm-text1 { position: relative; display: flex; align-items: center; font-size: inherit; color: inherit; overflow: hidden; height: inherit; } 
.bottom-content .btm-text1 > div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; height: 60px; overflow: hidden; line-height: 60px; } 
.v-slide .line { position: absolute; top: 0; } 
.bottom-content .btm-text2 { font-size: inherit; color: inherit; background-color: rgba(255,255,255,.1); border-radius: 4rem; padding: 20px 46px; margin-right: var(--mr); display: inline-flex; align-items: center; box-sizing: border-box; } 
.bottom-content .btm-hash { width: var(--wh); height: var(--wh); animation-name:rotationAni3; animation-duration: 4s; animation-timing-function: steps(1, end); animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: both; animation-delay: 2s; background-size: var(--wh) var(--wh); background-repeat: no-repeat; } 

/* KEYFRAMES */
@keyframes rotationAni1 { 
 0% { background-image: url(../img/unlimite.png) } 
 /* 30% { background-image: url(../img/emoji.png) } 
 60% { background-image: url(../img/hash.png) } */
 100% { background-image: url(../img/unlimite.png) } 
 }
@-webkit-keyframes rotationAni1 { 
 0% { background-image: url(../img/unlimite.png) } 
 /* 30% { background-image: url(../img/emoji.png) } 
 60% { background-image: url(../img/hash.png) } */
 100% { background-image: url(../img/unlimite.png) } 
 }
@keyframes rotationAni2 { 
 0% { background-image: url(../img/emoji1.png) } 
 30% { background-image: url(../img/emoji2.png) } 
 60% { background-image: url(../img/emoji3.png) } 
 100% { background-image: url(../img/emoji1.png) } 
 }
@-webkit-keyframes rotationAni2 { 
 0% { background-image: url(../img/emoji1.png) } 
 30% { background-image: url(../img/emoji2.png) } 
 60% { background-image: url(../img/emoji3.png) } 
 100% { background-image: url(../img/emoji1.png) } 
 }
@keyframes rotationAni3 { 
 0% { background-image: url(../img/hash.png) } 
 30% { background-image: url(../img/hash2.png) } 
 60% { background-image: url(../img/hash3.png) } 
 100% { background-image: url(../img/hash.png) } 
 }
@-webkit-keyframes rotationAni3 { 
 0% { background-image: url(../img/hash.png) } 
 30% { background-image: url(../img/hash2.png) } 
 60% { background-image: url(../img/hash3.png) } 
 100% { background-image: url(../img/hash.png) } 
 }
@media screen and (max-width: 1191px){
 .top-content .unlimite { margin-right: 17vw; } 
 } 
@media screen and (min-width: 600px) and (max-width: 1190px){
 .main-vis { padding: 0; } 
 .main-vis-pc { --wh: 10.5vw; --mr:1.5vw; height: auto; padding: 16vw 0 20vw 0; } 
 .main-vis .main-vis-pc::after { width: 3.5vw; height: 3.5vw; bottom: 4vw; background-size: 1.4vw; } 
 .main-vis-inner { width: calc(100vw - 4vw); padding: 0 2vw; } 
 .mobile { width: 29.2vw; } 
 .top-content { margin-left: 41px; } 
 .top-content .unlimite { margin-right: 18vw; } 
 .top-content .top-text1 { padding: 0 4vw; margin-right: var(--mr); } 
 .bottom { margin-top: 1.65vw; } 
 .bottom-content .btm-text2 { padding: 0 4vw; } 
 .bottom-content { margin-right: 20px; } 
 .top-content div.text, .bottom-content div.text { font-size: 5vw; height: var(--wh); justify-content: center; border-radius: 50000px; } 
 .bottom-content .text > div { height: var(--wh); } 
 .bottom-content .text-ani { margin-right: 19vw; min-width: 260px; width: auto; } 
 .bottom-content .btm-text1 > div { height: 60px; } 
 }
@media screen and (min-width: 600px) and (max-width: 1000px){
 .main-vis-pc { --mr: 1.2vw; } 
 .top-content .top-text2 { padding: 0 4vw; } 
 .bottom-content .text-ani { min-width: 25vw; } 
 .main-vis .main-vis-pc::after { border: 1px solid #fff; } 
}