@font-face {font-family: 'Katuri';src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/Andong/Katuri.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: "keri";font-style: normal;src: url(../images/KERISKEDU_B.woff) format("woff2"), url(../images/KERISKEDU_B.woff) format("woff"), url(../images/KERISKEDU_B.woff) format("opentype");}
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
:root{
    --keri: "keri" !important;
    --Noto: "Noto Sans KR" !important;
}
.memactivewrap .quicks img,.memactivewrap .memactive img{width: auto;display: inline-block;}
.memactive h1,.memactive h2,.memactive a,.memactive div,.memactive span,.memactive a,.memactive p,.memactive i,.memactive label{font-family: 'Katuri' !important;; letter-spacing: -1.2px;line-height: 150%;}
.memactivewrap{width:100%; min-width:1100px; margin: auto;position: relative;height: 100%;;}
.memactivewrap .quicks{position: fixed;top: 180px; right: 50px;z-index: 10;display: inline-block;}
.memactivewrap .quicks img{filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5)) !important}
.memactivewrap .memactive{width:100%; min-width:1100px;margin: auto;position: relative;overflow: hidden;max-width: 1920px;}
.memactivewrap .blind{position: absolute; clip: rect(0 0 0 0);width: 1px; height: 1px;margin: -1px;overflow: hidden;;}
.memactivewrap .memactive .inner{width:1100px; margin: auto;position: relative;}
.memactivewrap .memactive1{background: url(../images/bg1.png) 50% 0 no-repeat;}
.memactivewrap .memactive1 .inner{height: 1756px;}
.memactivewrap .memactive1 .inner a.gnilgoos{position: absolute;top: 20px; right: 0px;}
.memactivewrap .memactive1 .inner p.T1{text-align: center;padding: 47px 0 10px 0;}
.memactivewrap .memactive1 .inner h1{text-align: center;opacity: 0;animation: fade-in-top 1s linear both;}
.memactivewrap .memactive1 .inner .vis{position: relative;height: 606px;width: 100%;margin-top: -40px;}
.memactivewrap .memactive1 .obs,.memactivewrap .memactive1 .inner .vis .ob{position: absolute;left: 50%;}
.memactivewrap .memactive1 .inner .vis .ob1{margin-left: -386px;bottom: 31px;animation:rot1 1s linear infinite alternate 0.2s;transform-origin: 50% 100%}
.memactivewrap .memactive1 .inner .vis .ob2{margin-left: -135px;bottom: 42px;animation:fade-in-top 1s cubic-bezier(.25,.46,.45,.94) both 0.4s;}
.memactivewrap .memactive1 .inner .vis .ob3{margin-left: 126px;bottom: 0;animation:rot1 1s linear infinite alternate-reverse;transform-origin: 50% 100%;}
.memactivewrap .memactive1 .inner p.T2{font-family: var(--keri) !important;font-size: 58px;color:#156d4f;text-shadow: 2px 2px 0px #fff;text-align: center;position: relative;padding: 145px 0 42px 0;}
.memactivewrap .memactive1 .inner p.T2::before{content: '';position: absolute;background: url(../images/ob3.png) no-repeat;width: 380px; height: 257px; left: 50%;margin-left: -430px; top: -20px;animation: clips 1s linear both;}
.memactivewrap .memactive1 .inner p.T2 i{color:#de4686;font-family: var(--keri) !important}
.memactivewrap .memactive1 .inner p.T2 i.co1{color:#e37a25}
.memactivewrap .memactive1 .inner p.T3{text-align: center;color:#4a4b4b;font-size: 36px;line-height: 44px;}
.memactivewrap .memactive1 .inner p.T3 span,.memactivewrap .memactive1 .inner p.T3 i{color:#4a4b4b;display: inline-block;line-height: 40px;position: relative;}
.memactivewrap .memactive1 .inner p.T3 i.icon1::before{content: '';position: absolute;left: 50%;width: 59px; height: 59px; background: url(../images/ob9.png) no-repeat; margin-left:108px;}
.memactivewrap .memactive1 .inner p.T3 i.icon2::before{content: '';position: absolute;left: 50%;width: 59px; height: 59px; background: url(../images/ob10.png) no-repeat; margin-left:-178px;}
.memactivewrap .memactive1 .inner p.T3 i.icon3::before{content: '';position: absolute;left: 50%;width: 60px; height: 61px; background: url(../images/ob11.png) no-repeat; margin-left:120px;}
.memactivewrap .memactive1 .inner p.T3 i.icon3{margin-bottom: 32px;}
.memactivewrap .memactive1 .inner p.T3 span:nth-of-type(1){margin-bottom: 32px;}
.memactivewrap .memactive1 .inner p.T3 span i{z-index: 2;color:#000;padding: 0 10px;}
.memactivewrap .memactive1 .inner p.T3 span b{width: 0%; height: 100%; left: 0;top: 50%; transform: translate(0,-50%);background: #6eec00;position: absolute;border-radius: 5px;}
.memactivewrap .memactive1 .inner p.T3.on span b{animation: wi100 1s linear both;}
.memactivewrap .memactive1 .obs1{margin-left:-513px; top: 0px;animation: rot1 1s linear infinite alternate;}
.memactivewrap .memactive1 .obs2{margin-left:381px; top: 107px;animation: topfloat 1s linear infinite alternate;}
.memactivewrap .memactive1 .obs3{margin-left:-542px; top: 995px;animation: topfloat 1s linear infinite alternate;}
.memactivewrap .memactive1 .obs4{margin-left:334px; top: 1056px;animation: topfloat 1s linear infinite alternate 0.4s;}
.memactivewrap .memactive1 .obs5{margin-left:-502px; top: 1405px;animation: topfloat 1s linear infinite alternate;}
.memactivewrap .memactive1 .obs6{margin-left:268px; top: 1524px;animation: topfloat 1s linear infinite alternate 0.2s;}
.memactivewrap .memactive2{background: url(../images/bg2.png) 50% 0 no-repeat;}
.memactivewrap .memactive2 .inner{height: 956px;}
.memactivewrap .memactive2 .inner h2{font-family: var(--keri) !important;font-size: 56px;color:#fff;-webkit-text-stroke: 2px #2b6f91;text-shadow: 2px 2px 0 #2b6f91, 4px 4px 0 #2b6f91, 6px 6px 0 #2b6f91, 4px 4px 0 #2b6f91;text-align: center;position: relative;padding: 118px 0 0px 0;}
.memactivewrap .memactive2 .inner h2 i{color:#ffe05c;font-family: var(--keri) !important}
.memactivewrap .memactive2 .inner h2 i.co1{color:#ffbac7}
.memactivewrap .memactive2 .inner .maparea{background: url(../images/maps.png) no-repeat;width: 1042px; height: 712px; margin: -40px auto 0 auto;position: relative;}
.memactivewrap .memactive2 .inner .maparea .inmap{background: url(../images/mapline.png) no-repeat;width: 620px; height: 343px;left: 232px; top: 166px;position: absolute;clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
.memactivewrap .memactive2 .inner .maparea.on .inmap{animation: clips 2s linear both}
.memactivewrap .memactive2 .inner .maparea.on p.T1{animation: fade-in-top 0.5s linear both;}
.memactivewrap .memactive2 .inner .maparea.on p.T2{animation: fade-in-top 0.5s linear both 0.8s;}
.memactivewrap .memactive2 .inner .maparea.on p.T3{animation: fade-in-top 0.5s linear both 1.6s;}
.memactivewrap .memactive2 .inner .maparea p{font-size: 32px; color:#fff;position: absolute;opacity: 0;}
.memactivewrap .memactive2 .inner .maparea p span{color:#fff;padding: 0px 10px;display: inline-block;font-size: 30px;}
.memactivewrap .memactive2 .inner .maparea p.T1 span{background: #008100;-webkit-text-stroke:0}
.memactivewrap .memactive2 .inner .maparea p.T2 span{background: #00418b;-webkit-text-stroke:0}
.memactivewrap .memactive2 .inner .maparea p.T3 span{background: #6d380d;-webkit-text-stroke:0}
.memactivewrap .memactive2 .inner .maparea p.T1{text-shadow: -3px -3px 0 #008100,3px -3px 0 #008100,-3px  3px 0 #008100,3px  3px 0 #008100,0px  3px 0 #008100,3.5px  0px 0 #008100,-3.5px  0px 0 #008100,0px -3.5px 0 #008100;;left: 75px; top: 230px;;}
.memactivewrap .memactive2 .inner .maparea p.T2{text-shadow: -3px -3px 0 #00418b,3px -3px 0 #00418b,-3px  3px 0 #00418b,3px  3px 0 #00418b,0px  3px 0 #00418b,3.5px  0px 0 #00418b,-3.5px  0px 0 #00418b,0px -3.5px 0 #00418b;left: 610px; top: 167px;}
.memactivewrap .memactive2 .inner .maparea p.T3{text-shadow: -3px -3px 0 #6d380d,3px -3px 0 #6d380d,-3px  3px 0 #6d380d,3px  3px 0 #6d380d,0px  3px 0 #6d380d,3.5px  0px 0 #6d380d,-3.5px  0px 0 #6d380d,0px -3.5px 0 #6d380d;left: 700px; top: 502px;}
.memactivewrap .memactive3{background: url(../images/bg3.png) 50% 0 no-repeat;}
.memactivewrap .memactive3 .inner{height: 1163px;}
.memactivewrap .memactive3 .inner h2{font-family: var(--keri) !important;font-size: 50px;color:#0b524a;text-shadow: 3px 3px 0 #fdfcb2;text-align: center;position: relative;padding: 118px 0 25px 0;line-height: 62px;}
.memactivewrap .memactive3 .inner h2 i{color:#007b6b;font-family: var(--keri) !important}
.memactivewrap .memactive3 .inner .presentbox{text-align: center;position: relative;margin-bottom: 123px;position: relative;;}
.memactivewrap .memactive3 .inner .presentbox:after{content: '';position: absolute;background: url(../images/ob12.png) no-repeat;width: 527px; height: 120px; left: 50%; margin-left: -480px; bottom: -62px;}
.memactivewrap .memactive3 .inner .presentbox img{opacity: 0;}
.memactivewrap .memactive3 .inner .presentbox img.on{animation: scales 1s linear both;}
.memactivewrap .memactive3 .inner .present-txt{padding-left: 286px;}
.memactivewrap .memactive3 .inner .present-txt .presents{display: flex;align-items: center;justify-content: flex-start;gap: 10px;}
.memactivewrap .memactive3 .inner .present-txt .presents span:nth-of-type(1){font-size: 30px; color:#edcc87; background: #6a3b1c;width: 152px; height: 40px; line-height: 40px; border-radius: 40px;text-align: center;}
.memactivewrap .memactive3 .inner .present-txt .presents span:nth-of-type(2){font-size: 32px; color:#6a3b1c;}
.memactivewrap .memactive4{background: url(../images/bg4.png) 50% 0 no-repeat;}
.memactivewrap .memactive4 .inner{height: 1306px;}
.memactivewrap .memactive4 .inner p.T1{text-align: center;padding: 103px 0 17px 0;}
.memactivewrap .memactive4 .inner h2{font-family: var(--keri) !important;font-size: 58px;color:#fff;-webkit-text-stroke: 2px #084755;text-shadow: 2px 2px 0 #084755, 4px 4px 0 #084755, 6px 6px 0 #084755, 4px 4px 0 #084755;;text-align: center;position: relative;padding: 0px 0 27px 0;opacity: 0;}
.memactivewrap .memactive4 .inner h2.on{animation: fade-in-top 1s linear both;}
.memactivewrap .memactive4 .inner p.T2{text-align: center;color:#4a4b4b;font-size: 36px;line-height: 46px;margin-bottom: 60px;;}
.memactivewrap .memactive4 .inner p.T2 span,.memactivewrap .memactive4 .inner p.T2 i{color:#084755;display: inline-block;line-height: 40px;position: relative;}
.memactivewrap .memactive4 .inner p.T2 i.icon3{margin-bottom: 32px;}
.memactivewrap .memactive4 .inner p.T2 span:nth-of-type(1){margin-bottom: 32px;}
.memactivewrap .memactive4 .inner p.T2 span i{z-index: 2;color:#084755;padding: 0 10px;}
.memactivewrap .memactive4 .inner p.T2 span b{width: 0%; height: 100%; left: 0;top: 50%; transform: translate(0,-50%);background: #00ffe4;position: absolute;border-radius: 5px;}
.memactivewrap .memactive4 .inner p.T2.on span b{animation: wi100 1s linear both;}
.memactivewrap .memactive4 .inner .videos{width: 1047px; height: 589px; margin: auto;position: relative;}
.memactivewrap .memactive4 .inner .videos iframe{position: absolute;z-index: 2;width: 100%; height: 100%;left: 0;top: 0;}
.memactivewrap .memactive4 .inner .videos .ob{position: absolute;left: 50%;}
.memactivewrap .memactive4 .inner .videos .ob1{background: url(../images/ch5.png) no-repeat;width: 188px; height: 298px;margin-left: -440px; top: -220px;animation: rot1 1s linear infinite alternate;transform-origin: 50% 100%;}
.memactivewrap .memactive4 .inner .videos .ob2{background: url(../images/ch4.png) no-repeat;width: 200px; height: 289px;margin-left: 485px; top: 292px;animation: rot1 1s linear infinite alternate 0.2s;transform-origin: 0% 100%;}
.memactivewrap .memactive4 .obs{position: absolute;left: 50%;;}
.memactivewrap .memactive4 .obs.o img{width: 100%;}
.memactivewrap .memactive4 .obs1{margin-left: -510px; top: 107px;animation: topfloat 1s linear infinite alternate;width: 126px;}
.memactivewrap .memactive4 .obs2{margin-left: -619px; top: 360px;animation: topfloat 1s linear infinite alternate 0.4s;z-index: 1;}
.memactivewrap .memactive4 .obs3{margin-left: 441px; top: 143px;animation: topfloat 1s linear infinite alternate 0.6s;width: 127px;}
.memactivewrap .memactive4 .obs4{margin-left: 352px; top: 449px;animation: topfloat 1s linear infinite alternate 0.2s;width: 125px;z-index: 1;}
.memactivewrap .memactive4 .obs5{margin-left: -683px; top: 922px;animation: vibrate-1 1s linear infinite alternate;width: 121px;z-index: 1;}
.memactivewrap .memactive4 .obs6{margin-left: 284px; top: 60px;animation: leftfloat 2s linear infinite alternate;width: 145px;}
.memactivewrap .memactive4 .obs7{margin-left: -772px; top: 218px;animation: leftfloat 1s linear infinite alternate 0.2s;}
.memactivewrap .memactive4 .obs8{margin-left: 472px; top: 374px;animation: leftfloat 2s linear infinite alternate 0.3s;width: 307px;}
.memactivewrap .memactive4 .obs9{margin-left: -840px; top: 776px;animation: leftfloat 2s linear infinite alternate;}
.memactivewrap .memactive5{background: url(../images/bg5.png) 50% 0 no-repeat;}
.memactivewrap .memactive5 .inner{height: 1431px;}
.memactivewrap .memactive5 .inner p.T1{text-align: center;padding: 91px 0 37px 0;}
.memactivewrap .memactive5 .inner h2{font-family: var(--keri) !important;font-size: 62px;color:#375913;text-shadow: 2px 2px 0 #e4ffb5, 4px 4px 0 #e4ffb5, 4px 4px 0 #e4ffb5, 4px 4px 0 #e4ffb5;;text-align: center;position: relative;padding: 0px 0 6px 0;opacity: 0;}
.memactivewrap .memactive5 .inner h2.on{animation: fade-in-top 1s linear both;}
.memactivewrap .memactive5 .inner p.T2{text-align: center;color:#37591b;font-size: 36px;line-height: 46px;margin-bottom: 60px;margin-bottom: 125px;}
.memactivewrap .memactive5 .inner .drop-wrap{display: flex;gap: 20px;margin-bottom: 40px;justify-content: space-around;}
.memactivewrap .memactive5 .inner .drop-zone{border: 12px solid #ec6c50;position: relative;}
.memactivewrap .memactive5 .inner .drop-zone p.T3{width: 543px; height: 80px; line-height: 80px;font-size: 30px;color:#fff;background: #ec6c50;position: absolute;top: -80px; left: 50%; transform: translate(-50%,0);border-radius: 80px;text-align: center;}
.memactivewrap .memactive5 .inner .drop-zone p.T3 i{font-size: 40px;color:#fff;;}
.memactivewrap .memactive5 .inner .drop-zone:nth-of-type(2){border: 12px solid #6a904a}
.memactivewrap .memactive5 .inner .drop-zone .info-layer{position: absolute;width: 100%; height: 100%; left: 0;top: 0;display: flex;align-items: center;justify-content: center;text-align: center;z-index: 110;}
.memactivewrap .memactive5 .inner .drop-zone .info-layer p{color:#fff;font-size: 48px;position: relative;z-index: 1;}
.memactivewrap .memactive5 .inner .drop-zone .info-layer p i{color:#5a5a5a; background: #fff; border-radius: 100px; padding: 5px 30px;}
.memactivewrap .memactive5 .inner .drop-zone .info-layer .info-layerbg{position: absolute;width: 100%; height: 100%; left: 0;top: 0;background: #000;opacity: 0.5;;}
.memactivewrap .memactive5 .inner .drag-set {display: none;gap: 30px;}
.memactivewrap .memactive5 .inner .drag-set.active {display: flex !important;align-items: center;justify-content: center;}
.memactivewrap .memactive5 .inner .drag-item {cursor: url('../images/cur.png'), auto;;}
.memactivewrap .memactive5 .inner .drag-item.fixed{opacity: 0.5;filter: brightness(0.8);}
.memactivewrap .memactive5 .inner .fade-out {animation: fadeOut 0.5s forwards;}
.wrong-popup,.correct-popup{position: absolute;top: 0;left: 0;display: none; z-index: 99;background: rgba(0,0,0,0.6);width: 100%;height: 100%;}
.memactivewrap .memactive5 .inner .guide-popup{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 500px; display: none; align-items: center;justify-content: center; z-index: 120;}
.memactivewrap .memactive5 .inner .guide-popup .layer-content{width: 100%; border: 10px solid #ec6c50;border-radius: 10px;left: 50%; transform: translate(-50%,0);top: 5%;position: absolute;font-size: 26px;color:#6c6c6c;text-align: center;}
.memactivewrap .memactive5 .guide-bgs{position: absolute;z-index: 119;left: 0;top: 0;width: 100%; height: 100%;background: #000;opacity: 0.5;display: none;}
.memactivewrap .memactive5 .inner .drop-zone .layer-content{width: 90%; border: 10px solid #ec6c50;border-radius: 10px;left: 50%; transform: translate(-50%,0);top: 5%;position: absolute;}
.wrong-popup .wrong-confirm,.correct-popup .correct-confirm,.guide-popup .guide-confirm{text-indent: -9999px; background: url(../images/layerx.png) no-repeat;width: 53px; height: 53px;top: -26px; right: -10px;position: absolute;}
.memactivewrap .memactive5 .inner .layer-content {background: #fff;padding: 30px 0;}
.memactivewrap .memactive5 .inner .drop-zone .layer-content p{padding-left: 110px; position: relative;font-size: 26px;color:#6c6c6c;}
.memactivewrap .memactive5 .inner .drop-zone .layer-content p i{color:#007dcc}
.memactivewrap .memactive5 .inner .drop-zone .layer-content p::before{content: '';position: absolute;left: 23px;top: 50%; transform: translate(0,-50%);}
.memactivewrap .memactive5 .inner .drop-zone .wrong-popup .layer-content p::before{background: url(../images/layerxx.png) no-repeat;width: 56px; height: 56px;;}
.memactivewrap .memactive5 .inner .drop-zone .correct-popup .layer-content p::before{background: url(../images/layerO.png) no-repeat;width: 66px; height: 66px;;}
.memactivewrap .memactive5 .inner .drop-zone .right-answer{display: none;position: absolute;bottom: -2px;left: 160px;z-index: 100;}
.memactivewrap .memactive5 .inner .drop-zone .wrong-answer {position: absolute;bottom: -2px;left: 164px;z-index: 100;}
.memactivewrap .memactive5 .inner .drop-zone:nth-of-type(2) .right-answer {position: absolute;bottom: 56px;left: 145px;z-index: 100;}
.memactivewrap .memactive5 .inner .drop-zone:nth-of-type(2) .wrong-answer {position: absolute;bottom: 55px;left: 145px;z-index: 100;}
.memactivewrap .memactive5 .obs{position: absolute;left: 50%;;}
.memactivewrap .memactive5 .obs.o img{width: 100%;}
.memactivewrap .memactive5 .obs1{margin-left: -458px; top: 146px;animation: opa 1s linear infinite alternate;width: 49px;}
.memactivewrap .memactive5 .obs2{margin-left: 701px; top: 238px;animation: opa 1s linear infinite alternate 0.4s;}
.memactivewrap .memactive5 .obs3{margin-left: -765px; top: 522px;animation: opa 1s linear infinite alternate 0.6s;}
.memactivewrap .memactive5 .obs4{margin-left: 597px; top: 661px;animation: opa 1s linear infinite alternate 0.2s;width: 49px;}
.memactivewrap .memactive5 .obs5{margin-left: -707px; top: 1149px;animation: opa1 1s linear infinite alternate;width: 49px;}
.memactivewrap .memactive5 .obs6{margin-left: 707px; top: 1176px;animation: opa 2s linear infinite alternate;}
.memactivewrap .memactive6{background: url(../images/bg6.png) 50% 0 no-repeat;}
.memactivewrap .memactive6 .inner{height: 3781px;}
.memactivewrap .memactive6 .inner p.T1{text-align: center;padding: 105px 0 29px 0;}
.memactivewrap .memactive6 .inner h2{font-family: var(--keri) !important;font-size: 60px;color:#187989;text-shadow: 2px 2px 0 #e4ffb5, 4px 4px 0 #e4ffb5, 4px 4px 0 #e4ffb5, 4px 4px 0 #e4ffb5;;text-align: center;position: relative;padding: 0px 0 27px 0;opacity: 0;}
.memactivewrap .memactive6 .inner h2 i{color:#155dd4;font-family: var(--keri) !important}
.memactivewrap .memactive6 .inner h2.on{animation: fade-in-top 1s linear both;}
.memactivewrap .memactive6 .inner p.T2{text-align: center;font-size: 38px;line-height: 48px;margin-bottom: 60px;;}
.memactivewrap .memactive6 .inner p.T2 span,.memactivewrap .memactive6 .inner p.T2 i{color:#6e6e6e;display: inline-block;line-height: 40px;position: relative;}
.memactivewrap .memactive6 .inner p.T2 i.brs{margin-bottom: 32px;}
.memactivewrap .memactive6 .inner p.T2 span:nth-of-type(2){margin-bottom: 32px;}
.memactivewrap .memactive6 .inner p.T2 span i{z-index: 2;color:#4a4b4b;padding: 0 10px;}
.memactivewrap .memactive6 .inner p.T2 span b{width: 0%; height: 100%; left: 0;top: 50%; transform: translate(0,-50%);background: #fcffaf;position: absolute;border-radius: 5px;}
.memactivewrap .memactive6 .inner p.T2.on span b{animation: wi100 1s linear both;}
.memactivewrap .memactive6 .inner .em_txtbox{text-align: center;opacity: 0;margin-bottom: 10px;}
.memactivewrap .memactive6 .inner .em_txtbox.on{animation: fade-in-top 1s linear both;}
.memactivewrap .memactive6 .inner .book-txt{padding-left: 302px;margin-bottom: 76px;}
.memactivewrap .memactive6 .inner .book-txt p{color:#505453; font-size: 28px;padding-left: 110px; background: url(../images/ob15.png) left center no-repeat;font-family: var(--Noto) !important;font-weight: 600;line-height: 39px;}
.memactivewrap .memactive6 .inner h3{background: url(../images/sp_box.png) no-repeat;width: 813px; height: 206px; margin: auto;text-align: center;font-family: var(--keri) !important;font-size: 48px;color:#126d3e;padding: 35px 0 0 0;line-height: 64px;margin-bottom: 37px;}
.memactivewrap .memactive6 .inner h3 i{font-family: var(--keri) !important;color:#0f940c}
.memactivewrap .memactive6 .inner .cardlayer{width: 830px;margin: auto;position: absolute;left: 50%;top: 1890px; transform: translate(-50%,0%); z-index: 120;display: none;}
.memactivewrap .memactive6 .inner .cardlayer .cardx{position: absolute;top:-120px; right: -60px;display: block;}
.memactivewrap .memactive6 .inner .card-wrap2 {width: 830px;margin: auto;position: relative;box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.5);margin-bottom: 32px;}
.memactivewrap .memactive6 .inner .down-btns{text-align: center;}
.memactivewrap .memactive6 .inner .card-wrap {width: 830px;margin: auto;position: relative;box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.5);margin-bottom: 32px;}
.memactivewrap .memactive6 .inner .card-wrap .card {position: absolute;overflow: hidden;width: 355px; height: 355px;background: #000; }
.memactivewrap .memactive6 .inner .card-wrap .card .img-box:before{content: '';position: absolute;left: 0;top: 0;border: 10px solid #000;width: 100%;height: 100%;}
.memactivewrap .memactive6 .inner .card-wrap .card:nth-of-type(1){left: 39px; top: 197px;}
.memactivewrap .memactive6 .inner .card-wrap .card:nth-of-type(2){left: 39px; top: 610px;}
.memactivewrap .memactive6 .inner .card-wrap .card:nth-of-type(3){left: 432px; top: 65px;}
.memactivewrap .memactive6 .inner .card-wrap .card:nth-of-type(4){left: 432px; top: 470px;}
.memactivewrap .memactive6 .inner .card-wrap .card .img-box{position: relative;width: 355px; height: 355px;}
.memactivewrap .memactive6 .inner .card-wrap .card .img-box:after{content: '';position: absolute;left: 0;top: 0;width: 100%; height: 100%; background: #000;opacity: 0.5;}
.memactivewrap .memactive6 .inner .card-wrap .card.uploaded .img-box:after {display: none;}
.memactivewrap .memactive6 .inner .card-wrap2 .card .img-box:after {display: none;}
.memactivewrap .memactive6 .inner .card-wrap .card .img-box img {width: 345px;height: 345px;object-fit: cover;}
.memactivewrap .memactive6 .inner .card-wrap .upload-btn {position: absolute;bottom: 10px;right: 10px;cursor: pointer;transition: 0.2s;z-index: 2;}
.memactivewrap .memactive6 .inner .card-wrap .upload-btn:hover {transform: scale(1.1);}
.memactivewrap .memactive6 .inner .card-wrap .upload-btn input {display: none;}
.memactivewrap .memactive6 .inner .bgimg{position: absolute;top: 50px;left: 0;}
.memactivewrap .memactive6 .inner .spbox{position: absolute;z-index: 3;text-align: center;}
.memactivewrap .memactive6 .inner .spbox p{padding: 40px 0 ;}
.memactivewrap .memactive6 .inner .spbox1{left: 672px; top:57px;}
.memactivewrap .memactive6 .inner .spbox2{left: -127px; top:568px}
.memactivewrap .memactive6 .inner .spbox1 p{font-size: 32px;line-height: 37px; color:#d25bbf; background: url(../images/pung1.png) no-repeat;width: 294px; height: 194px;}
.memactivewrap .memactive6 .inner .spbox2 p{font-size: 30px;line-height: 37px; color:#2b9a7e; background: url(../images/pung2.png) no-repeat;width: 292px; height: 194px;}
.memactivewrap .memactive6 .inner .agree-wrap {width: 830px; margin: auto;margin-bottom: 49px;}
.memactivewrap .memactive6 .inner .agree-wrap .agrees{display: flex;align-items: center;}
.memactivewrap .memactive6 .inner .custom-check input {display: none;}
.memactivewrap .memactive6 .inner .custom-check {display: flex;align-items: center;margin: 4px 0;font-size: 34px;cursor: pointer;color:#4c437e}
.memactivewrap .memactive6 .inner .checkmark {width: 34px;height: 34px;border-radius: 50%;border: 2px solid #aaa;margin-right: 10px;position: relative; background: #fff;}
.memactivewrap .memactive6 .inner .custom-check input:checked + .checkmark {background: #6c8f5f; border-color: #6c8f5f;}
.memactivewrap .memactive6 .inner .custom-check input:checked + .checkmark::after {content: "";position: absolute;width: 15px; height: 15px; left: 50%;top: 50%;transform: translate(-50%,-50%);background: #fff;border-radius: 15px;}
.memactivewrap .memactive6 .inner .detail-btn{display: inline-block;color:#fff;font-family: var(--Noto) !important;background: #79b1a1;width: 198px; height: 54px; border-radius: 54px; font-size: 32px;font-weight: 600; border: 2px solid #727da4;text-align: center;text-shadow: 0 0 10px #3e8a76;margin-left: 15px;}
.memactivewrap .memactive6 .inner .upload-btns{text-align: center;margin-bottom: 45px;}
.memactivewrap .memactive6 .inner .caution-txt{padding-left: 62px;}
.memactivewrap .memactive6 .inner .caution-txt p.T3{background: #797979;color:#fff; font-size: 32px; padding: 5px 20px;margin-bottom: 30px;font-family: var(--Noto) !important;display: inline-block;font-weight: 600;}
.memactivewrap .memactive6 .inner .caution-txt p.T4{color:#505453; font-size: 29px;position: relative;font-family: var(--Noto) !important;letter-spacing: -2px;padding-left: 24px;position: relative;}
.memactivewrap .memactive6 .inner .caution-txt p.T4::before{content: '';width: 10px; height: 10px; background: #505453;border-radius: 10px;left: 0;top: 20px;position: absolute;}
.memactivewrap .memactive6 .inner .caution-txt p.T4 i{color:#000; font-size: 29px;position: relative;font-family: var(--Noto) !important;letter-spacing: -2px;font-weight: 700;}
.memactivewrap .memactive6 .inner .perlayer{position: absolute;width: 1020px;left: 50%;bottom:550px; transform: translate(-50%,0%);z-index: 150;display: none;}
.memactivewrap .memactive6 .inner .perlayer .percont{width: 100%;max-height: 800px;overflow-x: hidden; padding: 65px 130px 0 130px;background: url(../images/perbg.png) left bottom no-repeat;  ;}
.memactivewrap .memactive6 .inner .perlayer .perx{position: absolute;top: 10px; right: 20px;}
.memactivewrap .memactive6 .inner .perlayer p{margin-bottom: 40px;font-family: var(--Noto) !important;font-weight: 500;}
.memactivewrap .memactive6 .inner .perlayer .layerT1{color:#fff; font-size: 30px; font-family: var(--Noto) !important;background: #79b1a1; border: 3px solid #727da4;border-radius: 30px;display: inline-block;padding: 0 20px;}
.memactivewrap .memactive6 .inner .perlayer .layerT2{color:#505453; font-size: 26px; font-family: var(--Noto) !important;}
.memactivewrap .memactive6 .inner .perlayer .layerT2 i{color:#126d3e; font-family: var(--Noto) !important;}
.memactivewrap .memactive6 .inner .perlayer .layerT3{font-size: 26px; color:#000;margin-bottom: 0;font-weight: 700;}
.memactivewrap .memactive6 .inner .perlayer .layerT4{font-size: 26px; color:#505453;}
.memactivewrap .memactive6 .inner .perlayer .layerT4 i{font-size: 26px; color:#126d3e;font-family: var(--Noto) !important;}
.memactivewrap .memactive6 .cardlayerbg{position: absolute;z-index: 100;width: 100%; height: 100%;left: 0;top: 0;background: #000; opacity: 0.5;display: none;}
.memactivewrap .memactive7{background: #f7e4a0;}
.memactivewrap .memactive7 .inner{padding-bottom: 150px;}
.memactivewrap .memactive7 .inner h2{font-family: var(--keri) !important;font-size: 54px;color:#063657;text-shadow: 2px 2px 0 #fff, 4px 4px 0 #fff, 4px 4px 0 #fff, 4px 4px 0 #fff;;text-align: center;position: relative;padding: 99px 0 51px 0;opacity: 0;}
.memactivewrap .memactive7 .inner h2 i{color:#14665f;font-family: var(--keri) !important}
.memactivewrap .memactive7 .inner h2.on{animation: fade-in-top 1s linear both;}
.memactivewrap .memactive7 .inner .gals {width: 1100px;margin: auto;position: relative;}
.memactivewrap .memactive7 .inner .gals img{width: 100%;}
.memactivewrap .memactive7 .inner .gals .swiper-container {overflow: hidden;position: relative; margin-bottom: 60px;}
.memactivewrap .memactive7 .inner .gals .swiper-container p.T1 {text-align: center;color: #464646; font-size: 26px;font-weight: 700;margin-top: 30px;font-family: var(--Noto) !important;}
.memactivewrap .memactive7 .inner .gals .swiper-btn {position: absolute;top: 50%;transform: translate(0, -130%);z-index: 10;}
.memactivewrap .memactive7 .inner .gals .swiper-button-next {right: -110px;}
.memactivewrap .memactive7 .inner .gals .swiper-button-prev {left: -110px;}
.memactivewrap .memactive7 .inner .gals .pagings{width: 300px;margin: auto;overflow: hidden; position: relative;}
.memactivewrap .memactive7 .inner .gals .swiper-pagination {overflow: hidden;width: 100%;position: relative;margin-bottom: 20px;}
.memactivewrap .memactive7 .inner .gals .pagination-track {display: inline-flex;gap: 10px; transition: transform 0.35s ease;justify-content: flex-start;margin: 0;min-width: auto;}
.memactivewrap .memactive7 .inner .gals .pagination-track span {flex: 0 0 auto;font-size: 32px;color: #065750;width: 48px; height: 48px;line-height: 48px;text-align: center; font-family: var(--Noto) !important;font-weight: 700;cursor: pointer; transition: all 0.25s ease;}
.memactivewrap .memactive7 .inner .gals .pagination-track span.swiper-pagination-bullet-active {border-radius: 48px;background: #7dc797;color: #fff;}
.memactivewrap .memactive7 .inner .T2{text-align: right;}
.memactivewrap .swiper{margin-left: auto; margin-right: auto;position: relative;list-style: none;padding: 0; z-index: 1;}
.memactivewrap .swiper-wrapper {position: relative; width: 100%;height: 100%; z-index: 1; display: flex; transition-property: transform;transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box;transform-style: preserve-3d;}
.memactivewrap .swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper {transform: translate3d(0px, 0, 0);}
.memactivewrap .swiper-slide{flex-shrink: 0;width: 100%;position: relative;transition-property: transform; display: block;overflow: hidden;}
.memactivewrap .memactive7 .obs{position: absolute;left: 50%;;}
.memactivewrap .memactive7 .obs.o img{width: 100%;}
.memactivewrap .memactive7 .obs1{margin-left: -685px; top: 62px;animation: leftfloat 1s linear infinite alternate;}
.memactivewrap .memactive7 .obs2{margin-left: 461px; top: 189px;animation: leftfloat 1s linear infinite alternate 0.4s;}
.cardlayer.cap{width: 830px;position: relative;}
.cardlayer.cap .card-wrap2 {width: 830px;}
.cardlayer.cap .save-btn{text-align: center;padding: 30px 0;display: block;}
.cardlayer.cap .save-btn img{width: auto;}
.cardlayer.cap .down-btns{text-align: center;}
.cardlayer.cap .card-wrap {width: 830px;margin: auto;position: relative;}
.cardlayer.cap .card-wrap .card {position: absolute;overflow: hidden;width: 355px; height: 355px;background: #000; }
.cardlayer.cap .card-wrap .card .img-box:before{content: '';position: absolute;left: 0;top: 0;border: 10px solid #000;width: 100%;height: 100%;}
.cardlayer.cap .card-wrap .card:nth-of-type(1){left: 39px; top: 197px;}
.cardlayer.cap .card-wrap .card:nth-of-type(2){left: 39px; top: 610px;}
.cardlayer.cap .card-wrap .card:nth-of-type(3){left: 432px; top: 65px;}
.cardlayer.cap .card-wrap .card:nth-of-type(4){left: 432px; top: 470px;}
.cardlayer.cap .card-wrap .card .img-box{position: relative;width: 355px; height: 355px;}
.cardlayer.cap .card-wrap .card .img-box:after{content: '';position: absolute;left: 0;top: 0;width: 100%; height: 100%; background: #000;opacity: 0.5;}
.cardlayer.cap .card-wrap .card.uploaded .img-box:after {display: none;}
.cardlayer.cap .card-wrap2 .card .img-box:after {display: none;}
.cardlayer.cap .card-wrap .card .img-box img {width: 345px;height: 345px;object-fit: cover;}
.cardlayer.cap .card-wrap .upload-btn {position: absolute;bottom: 10px;right: 10px;cursor: pointer;transition: 0.2s;z-index: 2;}
.cardlayer.cap .card-wrap .upload-btn:hover {transform: scale(1.1);}
.cardlayer.cap .card-wrap .upload-btn input {display: none;}
.cardlayer.cap .bgimg{position: absolute;top: 43px;left: 0;}
@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 topfloat{0%{transform: translate(0);}100%{transform: translate(0,-10px);}}
@keyframes leftfloat{0%{transform: translate(0,0);}100%{transform: translate(-10px,0);}}
@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 clips{0%{clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);} 100%{clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}}
@keyframes wi100{0%{width: 0;} 100%{width: 100%;}}
@keyframes vibrate-1{0%{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}100%{transform:translate(0)}}
@keyframes scales {0% {transform:scale(0.1);}100% {transform: scale(1);opacity: 1;}}
@keyframes fadeOut {to {opacity: 0;transform: scale(0.3);}}