@charset "utf-8"; 

.topbar{background: #ecf3f2;}
.topbar ul{width: 1200px; margin: 0 auto; overflow: hidden;}
.topbar ul li{float: left; padding: 20px 0; width: 50%; font-size: 24px; color: #000; text-align: center;}
.topbar ul li.on{background: #11153c; color: #fff;}
.topbar ul li a{display: block; width: 100%; height: 100%; color: #000;}

.evt_wrp{position: relative; width: 100%; overflow: hidden; cursor: default; letter-spacing: -0.5px;} 
.evt_wrp img{vertical-align: top;} 
.evt_wrp strong{font-weight: 700;} 
.evt_wrp .tit,
.evt_wrp .inner{position: relative; width: fit-content; margin: 0 auto; height: unset;} 
.evt_wrp .tit{padding-bottom: 70px;} 

.evt_wrp .visual{background: #11153c;}
.evt_wrp .visual .typo{position: sticky; z-index: 1; animation: scale-in-top .5s .8s cubic-bezier(.25,.46,.45,.94) both}
.evt_wrp .visual .inner{padding: 152px 0 262px;}

.evt_wrp .visual .paper{position: absolute; animation: fallAndSwing 1s ease-out forwards;}
.evt_wrp .visual .paper.__1{top: 90px; left: 317px;}
.evt_wrp .visual .paper.__2{top: 490px; left: 193px;}

.evt_wrp .sub{background: #ff478e; height: 270px; padding-top: 50px;}
.evt_wrp .sub p{width: fit-content; margin: -200px auto 0; z-index: 9; position: sticky;animation: scale-in-bottom .5s 1.3s cubic-bezier(.25,.46,.45,.94) both}
.evt_wrp .bg_01 .con1{padding: 30px 0;}

@keyframes scale-in-top{0%{transform: scale(0); transform-origin: 50% 0; opacity:1} 100%{transform: scale(1); transform-origin: 50% 0; opacity:1}}

@keyframes scale-in-bottom{0%{transform: translateY(200px); opacity: 0;} 100%{transform: translateY(0); opacity: 1}}

@keyframes fallAndSwing {0%{transform: translateY(-200px) rotate(0deg); opacity: 0;} 20%{transform: translateY(-200px) rotate(5deg); opacity: 0.2;} 70%{transform: translateY(0) rotate(-5deg); opacity: 0.5;} 100%{transform: translateY(0) rotate(0deg);}}


.evt_wrp .point,
.evt_wrp .step{width: fit-content; margin: 0 auto 20px; overflow: hidden;}
.evt_wrp .point li{float: left; position: relative;}
.evt_wrp .point li:first-child{margin-right: 80px;}
.evt_wrp .point li p{padding-bottom: 30px;}
.evt_wrp .point li p:last-child{padding-top: 30px; border-top: 1px dashed #ccc;}

.evt_wrp .step li{float: left; position: relative; margin-right: 20px;}
.evt_wrp .step li:last-child{margin-right: 0;}
.evt_wrp .step li img{border-radius: 6px;}
.evt_wrp .step .arrow{position: absolute; top: 180px; right: -30px; z-index: 1;}

@keyframes slide-bottom{0%{transform: translateY(-100px); opacity: 0;} 100%{transform: translateY(0)}}

@keyframes bounce-in-fwd{0%{transform: scale(0); animation-timing-function:ease-in; opacity:0} 38%{transform:scale(1); animation-timing-function:ease-out; opacity:1} 55%{transform:scale(.7); animation-timing-function:ease-in} 72%{transform:scale(1); animation-timing-function:ease-out} 81%{transform:scale(.84); animation-timing-function:ease-in} 89%{transform:scale(1); animation-timing-function:ease-out} 95%{transform:scale(.95); animation-timing-function:ease-in} 100%{transform:scale(1); animation-timing-function:ease-out}} 

@keyframes slide-in-left{0%{transform: translateX(-420px);} 100%{transform: translateX(0); opacity:1}}

* [class^="bg_"] {padding: 120px 0;} 

.evt_wrp .bg_01{background: #fff;} 
.evt_wrp .bg_02{background: #edf4f4;} 

.evt_wrp .btn{background: #000; width: 765px; height: 80px; margin: 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; font-weight: 900; border-radius: 5px;} 
.evt_wrp .btn span{background: #fff; border-radius: 50%; color: #000; width: 30px; height: 30px; font-size: 21px; margin: 5px 0 0 10px; justify-content: center; display: flex; align-items: center; animation: slide-right .5s both infinite alternate;} 
@keyframes slide-right{0%{transform: translateX(0);} 100%{transform: translateX(5px);}} 

.evt_wrp .notice{width: 1198px; margin: 50px auto 0; border: 1px solid; font-size: 17px; padding: 30px 50px; line-height: 1.7; border-radius: 5px;} 
.evt_wrp .notice p{padding-left: 10px;} 
.evt_wrp .notice p::before{content: '\00B7'; margin: 0 5px 0 -10px;} 

.evt_wrp .blue{color: #2a38cc;}

.evt_wrp .small{font-size: 12px; color: #111; position: absolute; right: 0; bottom: 30px;} 
.evt_wrp .small::before{content: '\002A'; margin: 0 5px 0 -10px;} 

.evt_wrp .up-on-scroll{transition: transform .7s, opacity 1.7s;} 

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

@media screen and (min-width: 761px) {
    .evt_wrp .pc{display: block;} 
    .evt_wrp .mo{display: none;} 
} 

/* 모바일 */
@media screen and (max-width: 760px) {
    .evt_wrp .pc,
    .evt_wrp .visual_wrp{display: none;} 
    .evt_wrp .mo{display: block;} 
    .evt_wrp .visual .inner{width: 120%; margin: 0 0 0 -10%; max-width: unset;} 
    .evt_wrp .tit, .evt_wrp .inner{max-width: unset;}
    
    .evt_wrp * [class^="bg_"] {padding: 15% 3%;} 
    .evt_wrp .tit{width: 80%; padding-bottom: 30px;} 
    
    .evt_wrp .point{width: 90%;}
    .evt_wrp .point li:first-child{margin-right: 0; border-top: 1px solid #333;}
    .evt_wrp .point li p{padding: 20px 0 !important; border-bottom: 1px dashed #ccc;}
    .evt_wrp .point li p:last-child{padding: unset; border-top: unset;}

    .evt_wrp .bg_01 .con1{padding: 20px 0 0;}
    .evt_wrp .step{width: 95%; margin: 0 auto;}
    .evt_wrp .step li{float: unset; margin: 0 0 20px;}
    .evt_wrp .step .arrow{display: none;}

    .evt_wrp .notice{width: 95%; margin: 10px auto 0; padding: 20px; font-size: 14px; line-height: 1.3;}
    .evt_wrp .notice p{padding-top: 5px;}

    .evt_wrp .btn{width: unset; padding: 15px 60px; height: unset; font-size: 20px;  display: block;} 
    .evt_wrp .btn span {width: 22px; height: 22px; font-size: 17px; display: inline-flex;} 
    .evt_wrp .btm_txt{padding: 30px 10px; font-size: 17px;} 
    
    .evt_wrp .small{font-size: 10px; bottom: 20px; right: 10px;} 
    
}

@media screen and (max-width: 1024px){  
    .topbar ul{width: 100%;}
    .topbar ul li{padding: 10px 0; font-size: 17px;}
}

@media screen and (min-width: 761px) and (max-width: 1024px){ 
    .topbar ul li{padding: 20px 0; font-size: 22px;}
}