@charset "UTF-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
@font-face {font-family: 'InkLipquid'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff'); font-weight: normal; font-style: normal;}

.evt_wp {position: relative; width: 100%; min-width: 1300px; overflow: hidden;}
.evt_wp *{font-family: 'Pretendard', 'Malgun Gothic', sans-serif;}
.inner{width: 1200px; margin: 0 auto; position: relative;}

.visual_wp{background: linear-gradient(to right, #6da5c9 0%, #6da5c9 50%, #29cf9a 50%, #29cf9a 100%);}
.visual{background: url('imgs/bg_visual.png') no-repeat center 0; height: 1239px;}
.visual > .inner{height: 1239px;}
.visual p,
.visual span{position: absolute;}

.object1{top: 138px; left: 438px; animation: slide-down .5s cubic-bezier(.25,.46,.45,.94) both;}
.object2{top: 161px; right: 437px; animation: slide-down .5s .3s cubic-bezier(.25,.46,.45,.94) both;}
.typo1{top: 420px; left:50%; margin-left:-550px; animation:fade-in .7s .8s both}
.typo2{top: 378px; right: 57px; animation:bounce-in-right .7s .8s both}
.star1{top: -7px; left: 108px;}
.star2{top: 192px; right: 43px;}

.benefit{top: 100px; left: 115px; animation: slide-bottom 3s 1s both;}
.visual_txt{top: 238px; right: 10px; animation: slit-up .8s 1s both;}
.txt{top: 585px; left: 211px; animation: slide-bottom 3s 1s both;}

.pay_wp{animation:fade-in 1.2s 1.5s cubic-bezier(.39,.575,.565,1.000) both;}
.pay{left: 420px; bottom: 0;}
.pay1{top: 725px; left: 257px; animation: slide-fly-left 2s cubic-bezier(.25,.46,.45,.94) infinite;}
.pay2{top: 872px; left: 53px; animation: slide-fly-left 2s .5s cubic-bezier(.25,.46,.45,.94) infinite;}
.pay3{top: 870px; left: 300px; animation: slide-fly-left 2s .3s cubic-bezier(.25,.46,.45,.94) infinite;}
.pay4{top: 1043px; left: 288px; animation: slide-fly-left 2s .7s cubic-bezier(.25,.46,.45,.94) infinite;}
.pay5{top: 898px; right: 312px; animation: slide-fly-right 2s .3s cubic-bezier(.25,.46,.45,.94) infinite;}
.pay6{top: 804px; right: 160px; animation: slide-fly-right 2s cubic-bezier(.25,.46,.45,.94) infinite;}
.pay7{top: 996px; right: 36px; animation: slide-fly-right 2s .5s cubic-bezier(.25,.46,.45,.94) infinite;}
.pay8{top: 1050px; right: 270px; animation: slide-fly-right 2s .7s cubic-bezier(.25,.46,.45,.94) infinite;}

.bg_01{background: #efefef;}
.bg_02{background: #3d73e4;}

.evt_typo{padding-top: 100px; text-align: center; opacity: 0;}			
.evt_typo.big{animation: scale-up-center .2s cubic-bezier(.39,.575,.565,1.000) both}

.object{position: absolute; top: 154px; right: 365px; animation: shake-vertical 1.2s alternate infinite;}
.txt_small{font-size: 13px; color: #000; text-align: right; padding: 0 10px 10px 0; border-bottom: 1px solid #000;}

.id-box{position: absolute; top: 314px; left: 87px; width: 271px;}
.beforeEvt{position: absolute; top:0; left: 0; background: rgba(0,0,0, 0.8); width: 271px; padding: 20px 0; color: #fff; font-size: 18px; font-weight: 700;  text-align: center; z-index: 1;}

.id-copy{font-size: 19px; font-weight: 800;}
.id-copy li{float: left; padding: 18px; text-align: center; border: 1px solid #000;}
.id-copy li:first-child{width: 115px; background: #fff; border-right: 0;}
.btn_copy{width: 80px; color: #fff; background: #0e55e4; border-left: 0; cursor: pointer;}

.btn{overflow: hidden; text-align: center; padding-bottom: 100px;}
.btn a{display: inline-block;}
.btn a:first-child{margin-right: 33px;}

.dungdung{animation: updown 1s both infinite alternate;}
.delay{animation: updown 1s .3s both infinite alternate;}
.blink{animation: blink 1s infinite;}

.up-scroll,
.scroll-in{transition: transform .7s, opacity 1.7s;}
	
            
/* 유의사항 */
details{position: relative; font-size: 15px; line-height: 25px;}
details p{color: #fff; padding-right: 30px;}
details summary{background: #000; text-align: center; border-bottom: 1px solid #ccc; padding: 33px 0;cursor: pointer;}
details summary p{font-size: 24px; font-weight: 900;}
details summary .arrow{position: absolute; top: -3px; right: 500px;}
details summary:first-of-type{list-style:none}
details[open] summary .arrow::after {position: absolute; top: 12px; left: 10px; content: ''; width: 12px; height: 12px; border-top: 3px solid #fff;border-right: 3px solid #fff; transform: rotate(-45deg);}
details summary .arrow::after {position: absolute; top: 5px; left: 10px; content: ''; width: 12px; height: 12px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: rotate(135deg);}

details div{width: 1100px; margin: 0 auto; padding: 50px 0 100px;}
details div p{padding-top: 18px; font-weight: 600; color: #000;}
details em{background: #aeff00; padding: 0 5px; font-weight: 500; color: #000;}
details strong{color: #000; letter-spacing: 0 !important;}

.btn_info{border: 1px solid #000; padding: 2px 8px 3px; border-radius: 2px; font-size: 12px; margin-left: 10px;}

@keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@keyframes slide-down{0%{transform: translateY(-50px); opacity: 0;} 100%{transform: translateY(0)}}
@keyframes slide-bottom{0%{transform: translateY(-50px); opacity: 0;} 25%{transform: translateY(0)} 100%{transform: translateY(0)}}
@keyframes slit-up{0%{transform: translateY(50px) translateX(-50px); opacity: 0;} 100%{transform: translateY(0) translateX(0)}}

@keyframes slide-fly-left{0%{transform: translate(-50px, -50px) /* rotate(-2deg) scale(1.05);*/} 25%{transform: translate(0, 0); opacity: .3} 100%{transform: translate(0, 0); opacity: 0}}
@keyframes slide-fly-right{0%{transform: translate(50px, -80px)} 25%{transform: translateY(0, 0); opacity: .3} 100%{transform: translateY(0, 0); opacity: 0}}

@keyframes bounce-in-right{0%{transform: translateX(200px); animation-timing-function: ease-in; opacity: 0} 38%{transform: translateX(0); animation-timing-function: ease-out; opacity: 1} 55%{transform: translateX(68px); animation-timing-function: ease-in} 72%{transform: translateX(0); animation-timing-function: ease-out} 81%{transform: translateX(32px); animation-timing-function:ease-in} 90%{transform: translateX(0); animation-timing-function: ease-out} 95%{transform: translateX(8px); animation-timing-function: ease-in} 100%{transform: translateX(0);animation-timing-function:ease-out}}

@keyframes bounce-in-left{0% {transform: translateX(-200px); animation-timing-function: ease-in; opacity: 0} 38%{transform: translateX(0); animation-timing-function: ease-out; opacity: 1} 55%{transform: translateX(-68px); animation-timing-function: ease-in} 72%{transform: translateX(0); animation-timing-function: ease-out} 81%{ transform:translateX(-28px); animation-timing-function:ease-in} 90%{ transform:translateX(0); animation-timing-function:ease-out} 95%{ transform:translateX(-8px); animation-timing-function:ease-in}100%{ transform:translateX(0); animation-timing-function:ease-out}}

@keyframes blink{0%{opacity:1} 50%{opacity:.2}100%{opacity:1}}
@keyframes updown { 0%{transform: translateY(-5px);} 100%{transform: translateY(5px);}}

@keyframes shake-vertical{80%{transform:rotate(0)} 85%{transform:rotate(-4deg)} 90%{transform:rotate(4deg)} 95%{transform:rotate(-2deg)} 100%{transform:rotate(2deg)}}
@keyframes scale-up-center{0%{transform: scale(3); filter: blur(50px); opacity: 0;} 100%{transform: scale(1); opacity: 1;}}