@charset "euc-kr";
/* 
------------------------------------------------------------
MGAME Web Design Team
first written : Yang Young bok 230622
updated : Shin 20250808 
------------------------------------------------------------
*/
/* reset */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
body,h1,h2,h3,p,ul,ol,li,input,button,address{margin:0;padding:0}
body{background-color:#02030e}
img{border:0;vertical-align:top}
button{border:none;background:none;cursor:pointer}
ul,ol,li{list-style:none}
a{text-decoration:none}
input[type=checkbox]{margin:-3px 0 0 0;width:13px;height:13px;vertical-align:middle}
html {scroll-behavior: smooth;}
/* event */
.wrap{margin:0 auto;max-width:2560px;min-width:1280px;
    background:
    url(https://netgameimage.gscdn.com/games/ghostmplay/event/reservation/web/bg_header.jpg) no-repeat center 0, 
    url(https://netgameimage.gscdn.com/games/ghostmplay/event/reservation/web/bg_reservation1.jpg) no-repeat center 1080px, 
    url(https://netgameimage.gscdn.com/games/ghostmplay/event/reservation/web/bg_reservation2.jpg) no-repeat center 2934px, 
    url(https://netgameimage.gscdn.com/games/ghostmplay/event/reservation/web/bg_event1.jpg) no-repeat center 3983px, 
    url(https://netgameimage.gscdn.com/games/ghostmplay/event/reservation/web/bg_slide.jpg) no-repeat center 5063px;
    font-family:'Pretendard Variable',Pretendard,arial;font-size:20px;}
.wrap h2{text-align:center}
.header,.reservation,.event1,.event2,.event3, .imgViewer{margin:0 auto;width:1280px}
.header{height:1080px;text-align:center}
.header p{display: inline-block; position: relative; /*right: -877px;*/ float: right; top: 22px; right: -300px; color: white; font-size: 16px;}
.header h1{padding:109px 0 55px 0}
.header .reser1{padding:54px 0 61px 0}
.header .store{display:flex;justify-content:space-between;margin:0 268px 30px;}
.header .date{margin:22px auto 137px auto;width:464px;height:40px;border-radius:20px;background:rgba(255,255,255,.5);font-weight:bold;line-height:39px;color:#0e2a70;}

.info{font-size:20px;line-height:30px;}
.info li{padding: 2px; padding-left: 28px; color: white;
            background: url(https://netgameimage.gscdn.com/games/ghostmplay/event/reservation/web/alert.png) no-repeat 0px 7px;text-align: left;}

.reservation{position:relative;height:1854px; text-align: center; border: 0px solid yellow;}
.reservation h2{padding:161px 0 2px 0}
.reservation .date{font-size: 30px; color: white; font-weight: bold; margin:23px auto 37px; height:40px; line-height:39px; text-align: center; letter-spacing: 0px;}
.reservation .txt1{font-size: 35px; color: white; font-weight: bold; margin:306px auto 37px; height:40px; line-height:39px; text-align: center; letter-spacing: 0px;}



.reservation .jump {height: 13px;}
.reservation .store{display:flex;justify-content:space-between;margin:243px 272px 33px;} /*top 75 -> 62*/



.reservation .store label,.agree label{position:relative;cursor:pointer}
.reservation .store input,.agree input{margin:0 15px 0 0;vertical-align:middle;}
.reservation .store input:before,.agree input:before{content:'';display:inline-block;position:absolute;margin:-24px 10px 0 0;width:33px;height:43px;background:url(https://netgameimage.gscdn.com/games/ghostmplay/event/reservation/web/bu_input.png) no-repeat;vertical-align:middle}
.reservation .store input:checked:before,.agree input:checked:before{background-position:0 -43px}
.reservation .store img{vertical-align:middle}
.reservation .info{margin:84px 0 0 3px;}
.reservation .info li{margin:5px 0 -7px 55px;}

.email input{box-sizing:border-box;margin:0 3px 0 0;padding:0 20px;width:430px;height:67px;background:#fff;font-size:18px;text-align:center;color:#595959;vertical-align:middle;border: 0px;}
.email input::placeholder{font-size:18px;color:#696969; margin-top: -10px;}

.email+button{margin:30px 0 30px 0px;}

.agree{margin:0px 0 28px 168px;width:830px;font-size:20px;color:#fff; text-align: left;}
.agree input:before{margin-top:-27px}
.agree li{position:relative;margin:0 0 8px 100px;}
.agree li:first-child{padding:0 0 33px 0;border-bottom:0px solid #fff}
.agree li:nth-child(2){padding:0 0 13px 0;border-bottom:0px solid #fff}


.agree+ .detail{position:absolute; bottom:399px; left: 264px;}
.agree+ .detail a{display:inline-block;padding: 0 15px; margin-right: 10px; height:26px;background:#0b475e;font-size:18px;line-height:25px;color:#77cae4;text-align:center}

.event1{position:relative;height:1049px; text-align: center; border: 1px solid transparent;}
.event1 .store{display:flex;justify-content:center;margin:855px 0px 0;}
.event1 .store a{margin-right: 17px;}
.event1 .store a:last-child{margin-right: 0px;}
.event1 .store img{vertical-align:middle}

.event2{height:1080px;}
.event2 h2{padding:73px 0 18px 0}
.event2 p{text-align:center; color: white; margin: 38px 0 50px; font-size: 22px; line-height: 40px}

.event3{height:1080px; text-align: center;}
.event3 h2{padding:92px 0 8px 0}
.event3 p{text-align:center; color: #aa8ad7; margin: 0px 0 50px;}
.event3 div{text-align: center; margin-bottom: 100px;}

.step_1{display:flex;margin:25px 0 27px -155px;width:1587px;background:url(https://netgameimage.gscdn.com/games/ghostmplay/event/reservation/web/img_step.png) no-repeat;font-weight:bold;font-size:20px;color:#ffce2e;}
.step_1 span{display:block;height:565px;text-indent:-9999px}
.step_1 .step1{width:318px}
.step_1 .step2{width:318px}
.step_1 .step3{width:318px}
.step_1 .step4{width:318px}
.step_1 .step5{width:318px}
.step_1 .on span{background:url(https://netgameimage.gscdn.com/games/ghostmplay/event/reservation/web/img_step_on.png) no-repeat}
.step_1 .step2.on span{background-position:-317px 0}
.step_1 .step3.on span{background-position:-634px 0px}
.step_1 .step4.on span{background-position:-952px 0}
.step_1 .step5.on span{background-position:-1269px 0}

.step_2{display:flex; margin:8px 0 17px 00px; width:1280px; background:url(https://netgameimage.gscdn.com/games/ghostmplay/event/reservation/web/img_step1.png) no-repeat;font-weight:bold;font-size:20px;color:#ffce2e; border: 0px solid red;}
.step_2 span{display:block;height:428px;text-indent:-9999px}
.step_2 .step1{width:640px}
.step_2 .step2{width:640px}
.step_2 .on span{background:url(https://netgameimage.gscdn.com/games/ghostmplay/event/reservation/web/img_step1_on.png) no-repeat}
.step_2 .step2.on span{background-position:-640px 0}

.imgViewer {
    height: 1080px;
    margin:0 auto;
    display: flex; justify-content: center; align-items: center;
}
.content {
    margin: 20px auto 0;
    width: 1280px;
    height: 720px;
    position: relative;
}
.swiper {
    width:1280px;
    overflow: hidden;
}    
.swiper-slide img {
    display: block;
    height: 40%;
    object-fit: cover;
}
.swiper-slide {opacity:0.5; transition:opacity 0.5s;}
.swiper-slide-active {opacity:1;}
.changing {
    transition:opacity 1.3s;
    pointer-events:none;
}
.changed {  
    transition:none;
}
/* pagination */
.content .swiper-pagination {
    bottom: 5px;
}
.content .swiper-pagination .swiper-pagination-bullet {
    background-color: transparent;
    background-image: url("https://netgameimage.gscdn.com/games/ghostmplay/event/reservation/web/bullet_1.png");
    width: 20px; height: 20px; margin-right: 5px;
}
.content .swiper-pagination .swiper-pagination-bullet:last-child {
    margin-right: 0;
}
.content .swiper-pagination .swiper-pagination-bullet-active {
    background-image: url("https://netgameimage.gscdn.com/games/ghostmplay/event/reservation/web/bullet_2.png");
}  
/* nav btn*/
.content .swiper-button-next, .content .swiper-button-prev {
    top: 42%;
}
.content .swiper-button-prev {
    background: url("https://netgameimage.gscdn.com/games/ghostmplay/event/reservation/web/btn_previous.png");
    width: 114px; height: 167px; left: -220px;
    background-size: cover;
    background-position: center;
    cursor: cursor;
}  
.content .swiper-button-next {
    background: url("https://netgameimage.gscdn.com/games/ghostmplay/event/reservation/web/btn_next.png");
    width: 114px; height: 167px; right: -220px;
    background-size: cover;
    background-position: center;
    cursor: cursor;        
}  
.content .swiper-button-prev:after, .content .swiper-button-next:after {
    display: none;
}

.footer{background:#02030e}
address{box-sizing:border-box;margin:0 auto;padding:112px 0 42px;width:1280px;border-top:0px solid #0c1040;font-style:normal;font-size:21px;color:#a2a2a2; text-align: center;}
address span{color:#956013;}
address p:nth-child(2){margin: 10px 0;}
.copyright{margin:3px 0 0 0;font-family:arial;font-size:21px;color:#909090}

/* popup */
.popup{position:absolute;top:392px;left:50%;box-sizing:border-box;margin-left:-332px;padding:56px 36px 105px 36px;width:664px;min-height:332px;border:4px solid #23170b;background:#2c201f;background:linear-gradient(120deg, #383f47, #1e222b);}
.popup .detail{box-sizing:border-box;margin:0 auto;padding:30px;width:584px;min-height:167px;background:#5b6065;background:linear-gradient(120deg, #60656b, #4f535a);font-size:16px;color:#fff;letter-spacing:-0.5px;word-break:keep-all}
.popup .detail.center{display:flex;justify-content:center;align-items:center;}
.popup .button{position:absolute;left:0;bottom:26px;width:100%;text-align:center}
.popup .close{position:absolute;top:10px;right:10px}
.popup h3{margin:0 0 24px 0;font-size:24px;text-align:center}
.popup ul{margin:20px 0}
.popup li{margin:5px 0 5px 81px;text-indent:-81px}
/* vod */
.vodPopup{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:100}
.vodPopup .video{position:relative;width:960px;height:580px}
.vodPopup .close{position:absolute;top:0;right:-48px}