@font-face {font-family: 'Pretendard'; src: url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Light.woff2) format('woff2'), url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Light.woff) format('woff'), url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Light.otf) format('opentype'); font-weight: 300;}
@font-face {font-family: 'Pretendard'; src: url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Regular.woff2) format('woff2'), url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Regular.woff) format('woff'),url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Regular.otf) format('opentype'); font-weight: 400;}
@font-face {font-family: 'Pretendard'; src: url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Medium.woff2) format('woff2'), url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Medium.woff) format('woff'), url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Medium.otf) format('opentype'); font-weight: 500;}
@font-face {font-family: 'Pretendard';src: url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Bold.woff2) format('woff2'), url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Bold.woff) format('woff'), url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Bold.otf) format('opentype');font-weight: 600;}
@font-face {font-family: 'SBAggroL';src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/SANDBOX/SBAggroL.woff') format('woff');font-weight: 300;font-style: normal;}
@font-face {font-family: 'SBAggroM';src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/SANDBOX/SBAggroM.woff') format('woff');font-weight: 500;font-style: normal;}
@font-face {font-family: 'SBAggroB';src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/SANDBOX/SBAggroB.woff') format('woff');font-weight: 700;font-style: normal;}
:root{
    --sb_L: "SBAggroL" !important;
    --sb_B: "SBAggroB" !important;
    --pre: "Pretendard" !important;
    --rot: 0deg;
}
.appswrap .quicks img,.appswrap .apps img{width: auto;display: inline-block;}
.apps h1,.apps h2,.apps a,.apps div,.apps span,.apps a,.apps p,.apps i{font-family: 'SBAggroM' !important;; letter-spacing: -1.2px;line-height: 150%;}
.appswrap{width:100%; min-width:1300px; margin: auto;position: relative;height: 100%;;}
.appswrap .quicks{position: fixed;top: 180px; right: 50px;z-index: 10;display: inline-block;}
.appswrap .quicks img{filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5)) !important}
.appswrap .apps{width:100%; min-width:1300px;margin: auto;position: relative;overflow: hidden;}
.appswrap .blind{position: absolute; clip: rect(0 0 0 0);width: 1px; height: 1px;margin: -1px;overflow: hidden;;}
.appswrap .apps .inner{width:1300px; margin: auto;position: relative;}
.appswrap .apps1{background: #fcfcf0;}
.appswrap .apps1 .inner{padding: 100px 0 150px 0;}
.appswrap .apps1 .inner .apphead{position: relative;}
.appswrap .apps1 .inner .apphead .appheadimg{background: url(../images/phone.png) no-repeat;width: 520px;height: 850px;margin: auto;}
.appswrap .apps1 .inner .apphead h1{padding: 150px 0 0 0;position: absolute;top: 0;width: 100%;}
.appswrap .apps1 .inner .apphead h1 span{font-size: 100px; color:#111;display: block;font-family: var(--sb_B) !important;left: 50%;position: relative;opacity: 0;}
.appswrap .apps1 .inner .apphead h1 span i{padding: 20px 69px 10px 69px;border-radius: 20px;font-family: var(--sb_B) !important;color:#111}
.appswrap .apps1 .inner .apphead h1 span:nth-of-type(1){margin:0 0 35px -585px;animation: fade-in-left 1s linear both;}
.appswrap .apps1 .inner .apphead h1 span:nth-of-type(2){margin:0 0 0px -210px;animation: fade-in-right 1s linear both 0.2s}
.appswrap .apps1 .inner .apphead h1 span:nth-of-type(1) i{background: #26ca69;margin-left: 20px;}
.appswrap .apps1 .inner .apphead h1 span:nth-of-type(2) i{background: #ffd245;margin-right: 30px;}
.appswrap .apps1 .inner .scrolls{position: absolute;bottom: 25px; left: 50%; transform: translate(-50%,0);}
.appswrap .apps1 .inner .scrolls::before{content: '';width: 25px; height: 45px; border-radius: 45px; top: -54px; left: 50%; transform: translate(-50%,0);position: absolute;border: 2px solid #111;}
.appswrap .apps1 .inner .scrolls::after{content: '';width: 14px; height: 13px; border-radius: 45px; top: -30px; left: 50%; margin-left: -7px;background: url(../images/scr.png) no-repeat;position: absolute;animation: topfloat 0.5s linear infinite alternate;}
.appswrap .apps1 .inner .scrolls p.T1{text-align: center;color:#111; font-size: 13px;font-family: var(--pre) !important;letter-spacing: 0;}
.appswrap .apps1 .rolling-wrap,.rotatwrap {touch-action: none;cursor: grab;}
.appswrap .apps1 .rolling-wrap:active,.rotatwrap:active {cursor: grabbing;}
.appswrap .apps1 .rolling-wrap {width: 100%;overflow: hidden;display: flex;align-items: center;position: absolute;top: 638px;left: 50%;transform: translate(-50%,0);perspective: 5000px;}
.appswrap .apps1 .rolling-track {display: flex;width: max-content;animation: rolling 23s linear infinite;gap: 0px;}
.appswrap .apps1 #track {touch-action: pan-y;cursor: grab;}
.appswrap .apps1 .icon {flex: 0 0 auto;transform: scale(0.8);transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);position: relative;}
.appswrap .apps1 .icon.active {transform: scale(1) translateY(-10px);z-index: 10;}
.appswrap .apps1 .icon.left,.icon.right {transform: scale(0.8);}
.appswrap .apps1 .icon.active::after {content: "";position: absolute;inset: -10px;border-radius: 16px;box-shadow: 0 0 20px rgba(255, 220, 120, 0.4), 0 0 35px rgba(255, 220, 120, 0.2);pointer-events: none;}
.appswrap .apps1 .pause {animation-play-state: paused !important;}
.appswrap .apps1 .inner .obs{position: absolute;left: 50%;}
.appswrap .apps1 .inner .obs1{margin-left: 610px; top: 77px;animation: rot 2s linear infinite alternate;}
.appswrap .apps1 .inner .obs2{margin-left: 480px; top: 274px;animation: rot 2s linear infinite alternate 0.2s;}
.appswrap .apps1 .inner .obs3{margin-left: -570px; top: 161px;animation: rot 2s linear infinite alternate 0.4s ;}
.appswrap .apps1 .inner .obs4{margin-left: -825px; top: 409px;animation: topfloat 0.5s linear infinite alternate}
.appswrap .apps1 .inner .obs5{margin-left: 743px; top: 470px;animation: topfloat 0.5s linear infinite alternate 0.3s}
.appswrap .apps1 .inner .obs6{margin-left: 694px; top: 171px;animation: opa 1s linear infinite alternate;}
.appswrap .apps2 .inner{height: 1516px;}
.appswrap .apps2 .inner h2{color:#111;font-family: var(--sb_L) !important;text-align: center;padding: 118px 0 53px 0;}
.appswrap .apps2 .inner h2 span{color:#111;font-family: var(--sb_L) !important;font-size: 40px;;}
.appswrap .apps2 .inner h2 span i{font-family: var(--sb_B) !important;color:#111}
.appswrap .apps2 .inner h2 span b{font-family: var(--sb_B) !important;font-size: 70px;color:#111;}
.appswrap .apps2 .inner h2 span b i{font-family: var(--sb_B) !important;font-size: 70px;color:#25a749;}
.appswrap .apps2 .inner .rotatebox{background: url(../images/bg_r.png) 50% 124px no-repeat;padding-bottom: 50px;position: relative;}
.appswrap .apps2 .inner .rotatebox::before{content: '';position: absolute;left: 50%; background: url(../images/ob7.png) no-repeat;width: 36px; height: 36px;margin-left: 394px; top: 67px;animation: opa 1s linear infinite alternate;}
.appswrap .apps2 .inner .rotatebox::after{content: '';position: absolute;left: 50%; background: url(../images/ob6.png) no-repeat;width: 22px; height: 24px;margin-left: -388px; top: 198px;animation: opa 1s linear infinite alternate 0.2s;}
.appswrap .apps2 .inner .rotatebox .qrimg{text-align: center;}
.appswrap .apps2 .inner .rotatebox .rotatwrap{position: relative;perspective: 4000px;padding-top: 360px;height: 590px;margin:-360px 0 460px 0;pointer-events: none;}
.appswrap .apps2 .inner .rotatebox .rotator {position: absolute; left: 0;right: 0;margin: auto;width: 450px;height: 590px;transform-style: preserve-3d;}
.appswrap .apps2 .inner .rotatebox .items {position: absolute;width: 450px;height: 590px;--r: 0deg;transform: rotateY(var(--r))translateZ(600px) scale(0.78);transform-style: preserve-3d;transition: transform 0.4s ease;pointer-events: auto;}
.appswrap .apps2 .inner .rotatebox .poster {width: 100%;height: 100%;transform-style: preserve-3d;transform: rotateY(calc(-1 * var(--rot)));}
.appswrap .apps2 .inner .rotatebox .poster img {width: 100%;height: 100%;object-fit: cover;border-radius: 20px;backface-visibility: visible;}
.appswrap .apps2 .inner .rotatebox .items:nth-child(1) { --r: 0deg; }
.appswrap .apps2 .inner .rotatebox .items:nth-child(2) { --r: 36deg; }
.appswrap .apps2 .inner .rotatebox .items:nth-child(3) { --r: 72deg; }
.appswrap .apps2 .inner .rotatebox .items:nth-child(4) { --r: 108deg; }
.appswrap .apps2 .inner .rotatebox .items:nth-child(5) { --r: 144deg; }
.appswrap .apps2 .inner .rotatebox .items:nth-child(6) { --r: 180deg; }
.appswrap .apps2 .inner .rotatebox .items:nth-child(7) { --r: 216deg; }
.appswrap .apps2 .inner .rotatebox .items:nth-child(8) { --r: 252deg; }
.appswrap .apps2 .inner .rotatebox .items:nth-child(9) { --r: 288deg; }
.appswrap .apps2 .inner .rotatebox .items:nth-child(10){ --r: 324deg; }
.appswrap .apps2 .inner .rotatebox  p.T1{text-align: right;color:#777;position: relative;font-family: var(--pre) !important;padding-right: 80px;}
.appswrap .apps2 .inner .rotatebox  p.T1:before{content: '*';font-size: 50px; color:#25a749;left: -6px;font-family: var(--pre) !important;position: relative;top:20px}
.appswrap .apps2 .inner .rotatebox  p.T1 i{color:#25a749;font-family: var(--pre) !important}
.appswrap .apps3{background: #fffaeb;}
.appswrap .apps3 .inner{padding-bottom: 210px;}
.appswrap .apps3 .inner h2{text-align: center;font-size: 50px;color: #111;font-family: var(--sb_B) !important;padding: 111px 0 100px 0;position: relative;}
.appswrap .apps3 .inner h2:after{content: '';position: absolute;background: url(../images/imoji1.png) no-repeat;width: 126px; height: 138px;left: 50%; margin-left: 140px; top: 40px;animation: topfloat 0.5s linear infinite alternate}
.appswrap .apps3 .inner h2 i{text-align: center;font-size: 80px;color:#ff7e33;font-family: var(--sb_B) !important}
.appswrap .apps3 .inner .card-wrap {display: flex;gap: 35px; cursor: url(../images/cur.png), pointer;}
.appswrap .apps3 .inner .card{perspective: 1000px;}
.appswrap .apps3 .inner .card1 .card-front{background: url(../images/card_1.png) no-repeat;width: 410px; height:550px;;}
.appswrap .apps3 .inner .card2 .card-front{background: url(../images/card_2.png) no-repeat;width: 410px; height:550px;;}
.appswrap .apps3 .inner .card3 .card-front{background: url(../images/card_3.png) no-repeat;width: 410px; height:550px;;}
.appswrap .apps3 .inner .card1 .card-back{background: url(../images/card_1_back.png) no-repeat;width: 410px; height:550px;;}
.appswrap .apps3 .inner .card2 .card-back{background: url(../images/card_2_back.png) no-repeat;width: 410px; height:550px;;}
.appswrap .apps3 .inner .card3 .card-back{background: url(../images/card_3_back.png) no-repeat;width: 410px; height:550px;;}
.appswrap .apps3 .inner .card .card-front p.T1{font-family: var(--sb_B) !important;color:#111; padding: 41px 0 0 0;text-align: center;font-size: 40px;}
.appswrap .apps3 .inner .card .card-back p.T2{color:#111; padding: 146px 0 0 0;text-align: center;font-size: 30px;line-height: 55px;font-family: var(--pre) !important;}
.appswrap .apps3 .inner .card .card-back p.T2 i{font-family: var(--pre) !important;font-weight: 700;color:#111}
.appswrap .apps3 .inner .card-inner {position: relative;display: inline-block;transform-style: preserve-3d;transition: transform 0.9s cubic-bezier(0.4, 0.0, 0.2, 1);}
.appswrap .apps3 .inner .card:hover .card-inner {transform: rotateY(180deg);transition-delay: 0.1s;}
.appswrap .apps3 .inner .card-front {position: relative; transition: transform 0.4s ease;}
.appswrap .apps3 .inner .card:hover .card-front {transform: rotateX(6deg) rotateY(-6deg);}
.appswrap .apps3 .inner .card-back {position: absolute;top: 0;left: 0;transform: rotateY(180deg);}
.appswrap .apps3 .inner .card-front,.card-back {backface-visibility: hidden;}
.appswrap .apps3 .inner .card img {display: block;}
.appswrap .apps3 .inner .card-icon {position: absolute;top: 50%; left: 50%;transform: translate(-50%, -50%);transition: transform 0.4s ease;pointer-events: none;}
.appswrap .apps3 .inner .card:hover .card-icon {  transform: translate(-50%, -65%);}
.appswrap .apps4-trigger {position: relative; width: 100%; overflow: hidden; height: 100vh;background: #000;}
.appswrap .section.apps {position: absolute;top: 0;left: 0; width: 100%;height: 100vh;opacity: 0;visibility: hidden;transform: scale(1.1);transition: all 0.8s ease-out; display: flex; align-items: center; justify-content: center;overflow: hidden;}
.appswrap .section.apps.active {opacity: 1;visibility: visible; transform: scale(1); filter: blur(0); z-index: 10;}
.appswrap .section.apps.active ~ .section.apps {z-index: 1;}
.appswrap .apps-pagination {position: fixed;right: 30px; top: 50%;transform: translateY(-50%); z-index: 100;opacity: 0;transition: all 0.5s ease;}
.appswrap .apps-pagination.visible {opacity: 1; visibility: visible; pointer-events: auto;}
.appswrap .apps-pagination li {width: 12px; height: 12px;background: rgba(0, 0, 0, 0.3);margin: 15px 0; border-radius: 50%; cursor: pointer; transition: all 0.3s ease;}
.appswrap .apps-pagination li.active {background: #000;transform: scale(1.3);}
.appswrap .apps4{background: #defadb;}
.appswrap .section .inner{display: flex;height: 100%;align-items: center;}
.appswrap .section .inner h2{color:#111;font-family: var(--sb_B) !important;font-size: 70px;margin-bottom: 22px;line-height: 92px;opacity: 0;transition: 0.5s linear;}
.appswrap .section .inner p.T1{color:#111;font-size: 28px; line-height: 44px;font-family: var(--pre) !important;opacity: 0;transition: 0.5s linear;}
.appswrap .section .inner .appbpx{position: absolute;right: 0;top: 50%; transform: translate(0,-50%);}
.appswrap .section.active .inner h2{animation: fade-in-left 1s linear both 0.8s;}
.appswrap .section.active .inner p.T1{animation: fade-in-left 1s linear both 1s;}
.appswrap .apps4 .inner .appbpx span{display: inline-block;position: absolute;}
.appswrap .apps4 .inner .appbpx span:nth-of-type(1){width: 109px; height: 109px;background: url(../images/imoji2.png) no-repeat;left: 106px;top: -88px;animation: topfloat 0.5s linear infinite alternate}
.appswrap .apps4 .inner .appbpx span:nth-of-type(2){width: 30px; height: 31px;background: url(../images/ob8.png) no-repeat;left: 257px;top: -118px;animation: opa 0.5s linear infinite alternate}
.appswrap .apps4 .inner .appbpx .box-top{position: absolute;top: -53px;left: 224px;transform: translate(-29%, 29%);opacity: 0;transition: 0.5s linear;}
.appswrap .apps4.active .inner .appbpx .box-top{animation: box 1s linear both;}
.appswrap .apps5{background: #d4f9ec;}
.appswrap .apps5 .inner .appbpx span{display: inline-block;position: absolute;}
.appswrap .apps5 .inner .appbpx span:nth-of-type(1){width: 169px; height: 220px;background: url(../images/ob10.png) no-repeat;left: -13px;top: 51px;}
.appswrap .apps5 .inner .appbpx span:nth-of-type(2){width: 149px; height: 160px;background: url(../images/ob9.png) no-repeat;left: 446px;top: 428px;animation: rot1 0.5s linear infinite alternate}
.appswrap .apps5 .inner .appbpx .box-top{position: absolute;top: 35px;left: 141px;transform: translate(-29%, 29%);opacity: 0;transition: 0.5s linear;}
.appswrap .apps5.active .inner .appbpx .box-top{animation: box 1s linear both;}
.appswrap .apps5.active .inner .appbpx span:nth-of-type(1){animation: jello-horizontal 2s linear both }
.appswrap .apps6{background: #ffedef;}
.appswrap .apps6 .inner .appbpx span{display: inline-block;position: absolute;opacity: 0;}
.appswrap .apps6 .inner .appbpx span:nth-of-type(1){width: 205px; height: 334px;background: url(../images/ch1_1.png) no-repeat;left: 40px;bottom: 56px;}
.appswrap .apps6 .inner .appbpx span:nth-of-type(2){width: 198px; height: 350px;background: url(../images/ch1_3.png) no-repeat;left: 209px;bottom: 56px;}
.appswrap .apps6 .inner .appbpx span:nth-of-type(3){width: 205px; height: 321px;background: url(../images/ch1_2.png) no-repeat;left: 388px;bottom: 56px;}
.appswrap .apps6 .inner .appbpx .box-top{position: absolute;top: 101px;left: -33px;transform: translate(-29%, 29%);opacity: 0;transition: 0.5s linear;}
.appswrap .apps6.active .inner .appbpx .box-top{animation: opa 1s linear infinite alternate;}
.appswrap .apps6.active .inner .appbpx span:nth-of-type(1){animation: fade-in-top 1s linear both;}
.appswrap .apps6.active .inner .appbpx span:nth-of-type(2){animation: fade-in-top 1s linear both 0.3s;}
.appswrap .apps6.active .inner .appbpx span:nth-of-type(3){animation: fade-in-top 1s linear both 0.6s;}
.appswrap .apps7{background: #eee7ff;}
.appswrap .apps7 .inner .appbpx span{display: inline-block;position: absolute;opacity: 1;}
.appswrap .apps7 .inner .appbpx span:nth-of-type(1){width: 59px; height: 53px;background: url(../images/ob12.png) no-repeat;left: 252px;top: -55px;animation: rot1 1s linear infinite alternate;}
.appswrap .apps7 .inner .appbpx span:nth-of-type(2){width: 102px; height: 97px;background: url(../images/ob13.png) no-repeat;left: 504px;top: 8px;animation: rot1 1s linear infinite alternate 0.3s;}
.appswrap .apps7 .inner .appbpx span:nth-of-type(3){width: 130px; height: 128px;background: url(../images/ob14.png) no-repeat;left: 202px;top: 365px;animation: rot1 1s linear infinite alternate 0.6s;}
@keyframes fade-in-top{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
@keyframes fade-in-left{0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
@keyframes fade-in-right{0%{transform:translateX(50px);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes rolling {from { transform: translateX(0); }to   { transform: translateX(-50%); }}
@keyframes spin {from { --rot: 0deg; transform: rotateY(0deg); }to { --rot: -360deg; transform: rotateY(-360deg); }}
@keyframes topfloat{0%{transform: translate(0);}100%{transform: translate(0,-10px);}}
@keyframes opa{0%{opacity: 0;;}100%{opacity: 1;}}
@keyframes rot1{0%{transform: rotate(0);}100%{transform: rotate(6deg);}}
@keyframes rot{0%{transform: rotate(0);}100%{transform: rotate(180deg);}}
@keyframes box{0%{transform: translate(-29%, 29%);opacity: 0;}100%{transform: translate(0%, 0%);opacity: 1;}}
@keyframes jello-horizontal{0%{transform:scale3d(1,1,1);}30%{transform:scale3d(1.25,.75,1);opacity: 1}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1);opacity: 1;}}