@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;}
.store h1,.store h2,.store a,.store div,.store span,.store a,.store p,.store i,.store strong{font-family: 'Pretendard' !important;; letter-spacing: -1.2px;line-height: 150%;}
html,body{height: 100%;}
.storewrap .store img{display:block;}
.storewrap,.store{width: 100%;position: relative;max-width: 720px;margin: auto;overflow: hidden;}
.storewrap .store1{background: #fcfcf2 url(../images/bg1.png) no-repeat;background-size: contain;padding-bottom: 15%;}
.storewrap .store1 h1{padding: 15.5% 0 4% 0;width: 60.695%;margin: auto;animation: fade-in-top 1s linear both;}
.storewrap .store1 p.T1{width: 62.778%;margin: auto;margin-bottom: 28%;animation: fade-in-bottom 1s linear both 1s;opacity: 0;}
.storewrap .store1 .Tbox{position: relative;width: 90%;padding: 3%; margin: auto;border: 2px solid #000;border-radius: 15px;background: #a1d85b;box-shadow: 0 5px 0 rgba(0,0,0,1);}
.storewrap .store1 .Tbox .icons{position: absolute;;overflow: hidden;padding-bottom: 0;}
.storewrap .store1 .Tbox .icons img{opacity: 0;animation: fade-in-bottom 1s linear both}
.storewrap .store1 .Tbox .icons.i2 img{animation-delay: 0.2s;}
.storewrap .store1 .Tbox .icons.i3 img{animation-delay: 0.4s;}
.storewrap .store1 .Tbox .icons.i1{width: 20.344%;left: 39%; margin-top: -35%;}
.storewrap .store1 .Tbox .icons.i2{width: 25.777%;left: 15%; margin-top: -35.2%;}
.storewrap .store1 .Tbox .icons.i3{width: 27.33%;left: 62%; margin-top: -34.8%;}
.storewrap .store1 .Tbox h2{width: 51.432%; margin: auto;padding: 2% 0 4% 0;}
.storewrap .store1 .Tbox .inTbox{width: 100%; margin: auto;background: #fff;border-radius: 15px;border: 2px solid #000;padding: 6.5% 0;}
.storewrap .store1 .Tbox .inTbox p.T2{padding: 0 0 3.5% 0;}
.storewrap .store1 .Tbox .inTbox p.T2,.storewrap .store1 .Tbox .inTbox p.T3{font-size: clamp(13px, calc(26px + 26 * (100vw - 720px) / 720), 26px);color:#000;text-align: center;}
.storewrap .store1 .Tbox .inTbox p.T3 span{font-weight: 700;color:#000}
.storewrap .store1 .Tbox .inTbox img{width: 80.094%;display: inline-block;}
.storewrap .store2{background:#7dc35d url(../images/bg2.png) no-repeat;background-size: contain;}
.storewrap .store2 .obs{position: relative;width: 48.89%;left: 10%;}
.storewrap .store2 .obs .pages{position: relative;margin-top: 32%;}
.storewrap .store2 .obs .pages img:nth-of-type(1){position: absolute;width: 100%; height: 100%;}
.storewrap .store2 .obs.on .pages img:nth-of-type(1){animation: opa 0.5s linear both;}
.storewrap .store2 .obs i{position: absolute;width: 45.74%; left: 5%;bottom: 5.2%;}
.storewrap .store2 .obs span{position: absolute;width: 17.33%; left: 40%;bottom: -1.8%;}
.storewrap .store2 .obs.on i,.storewrap .store2 .obs.on span{animation:heartbeat 1.5s ease-in-out infinite both 0.6s}
.storewrap .store2 .obs .obs_r{position: absolute;width: 89.205%;left: 80%; top: 17%;opacity: 0;}
.storewrap .store2 .obs.on .obs_r{animation: opaleft 1s linear both 1s;}
.storewrap .store2 p.T1{padding: 9.5% 0 3.5% 0;}
.storewrap .store2 p.T2,.storewrap .store2 p.T3{line-height: clamp(25.5px, calc(51px + 51 * (100vw - 720px) / 720), 51px);margin-bottom: 4.2%;}
.storewrap .store2 p.T1,.storewrap .store2 p.T2,.storewrap .store2 p.T3{text-align: center;font-size: clamp(13px, calc(26px + 26 * (100vw - 720px) / 720), 26px);color:#000;}
.storewrap .store2 p.T1 img{width: 33.195%;display: inline-block;vertical-align: -9%;}
.storewrap .store2 p.T2 img:nth-of-type(1){width: 4.585%;display: inline-block;vertical-align: bottom;}
.storewrap .store2 p.T2 img:nth-of-type(2){width: 6.667%;display: inline-block;vertical-align: bottom;}
.storewrap .store2 p.T3 i{color:#000;font-weight: 700;}
.storewrap .store2 p.T3 img{width: 42.363%;display: inline-block;vertical-align: middle;}
.storewrap .store3{background: #e8fad3;padding-bottom: 15%;}
.storewrap .store3 h2{width: 54.167%; margin: auto;padding: 6% 0 7% 0;position: relative;}
.storewrap .store3 h2:after{content: '';position: absolute;background: url(../images/ob2.png) no-repeat;width: clamp(23px, calc(46px + 46 * (100vw - 720px) / 720), 46px);height: clamp(23px, calc(46px + 46 * (100vw - 720px) / 720), 46px);left: 114%; top: 20%;animation: ros 1s linear infinite alternate;}
.storewrap .store3 .storebtn{text-align: center;}
.storewrap .store3 .storebtn a{width: 78.056%;display: inline-block;;position: relative;}
.storewrap .store3 .storebtn a span{position: absolute;width: 10.856%; left: 87%;top: 80%;animation:heartbeat 1.5s ease-in-out infinite both }
#container{max-width: none !important;}
@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-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
@keyframes opa{0%{opacity: 1;} 100%{opacity: 0;}}
@keyframes opaleft{0%{opacity: 0;transform: translate(-20%,0);} 100%{opacity: 1;transform: translate(0%,0);}}
@keyframes heartbeat{from{transform:scale(1);transform-origin:center center;animation-timing-function:ease-out}10%{transform:scale(.91);animation-timing-function:ease-in}17%{transform:scale(.98);animation-timing-function:ease-out}33%{transform:scale(.87);animation-timing-function:ease-in}45%{transform:scale(1);animation-timing-function:ease-out}}
@keyframes ros{0%{transform: rotate(20deg);} 100%{transform: rotate(-20deg)}}