body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #d5d6d7; } body::after{ position:absolute; width:0; height:0; overflow:hidden; z-index:-1; content:url('../images/visual01.jpg'); } .htmlWrapper {width:100%;max-width:750px;margin:0 auto;padding-bottom:100px;position:relative;height:18250px;overflow:hidden;} .htmlWrapper section {background-position:center;overflow:hidden;} /* 상단 */ .htmlWrapper section.top_wrapper {position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:47px;box-sizing:border-box;z-index:1;background:#FFFFFF;background-image:url('../images/top_hx.png');} .htmlWrapper section.top_wrapper > .hx_top{position:relative;width:100%;height:100%;margin:0 auto;display:flex;justify-content:start;} .htmlWrapper section.top_wrapper > .hx_top .link_daum {position:absolute;width:89px;height:100%;left:40px;} .htmlWrapper section.top_wrapper > .hx_top .link_comp {position:absolute;width:90px;height:100%;left:150px;} .htmlWrapper section.top_wrapper > .hx_top > div > a{display:block;width:100%;height:100%;} .htmlWrapper section.top_wrapper > .menus{position:absolute;right:0;display:flex;} .htmlWrapper section.top_wrapper > .menus .login{margin-right:20px;} /* Visual */ .htmlWrapper section.visual_wrapper {position:relative;width:100%;height:1776px;background-image:url('../images/visual/bg_visual.png');background-repeat:no-repeat;background-position:center;overflow-x:hidden;} .htmlWrapper section.visual_wrapper .contents_wrap{position:relative;width:100%;height:100%;display:flex;justify-content:center;} .htmlWrapper section.visual_wrapper .contents_wrap .head_wrapper{position:absolute;width:100%;display:flex;flex-direction:column;align-items:center;margin-top:15px;} .htmlWrapper section.visual_wrapper .contents_wrap .head_wrapper .title{position:relative;background-image:url('../images/visual/main_txt01.png');width:750px;height:216px;margin-bottom:5px;} .htmlWrapper section.visual_wrapper .contents_wrap .head_wrapper .title > div{position:absolute;} .htmlWrapper section.visual_wrapper .contents_wrap .head_wrapper .title .star01{background-image:url('../images/visual/star01.png');width:25px;height:37px;left:235px;top:48px;animation:1s star infinite forwards} .htmlWrapper section.visual_wrapper .contents_wrap .head_wrapper .title .star02{background-image:url('../images/visual/star02.png');width:15px;height:19px;left:290px;top:45px;} .htmlWrapper section.visual_wrapper .contents_wrap .head_wrapper .title .star03{background-image:url('../images/visual/star03.png');width:20px;height:29px;left:337px;top:60px;animation:1s star infinite forwards;animation-delay:.3s;} .htmlWrapper section.visual_wrapper .contents_wrap .head_wrapper .title .star04{background-image:url('../images/visual/star04.png');width:26px;height:40px;right:315px;top:0px;animation:1s star infinite forwards} .htmlWrapper section.visual_wrapper .contents_wrap .head_wrapper .title .star05{background-image:url('../images/visual/star05.png');width:22px;height:32px;right:275px;top:-20px;animation:1s star infinite forwards;animation-delay:.3s;} .htmlWrapper section.visual_wrapper .contents_wrap .head_wrapper .title .star06{background-image:url('../images/visual/star06.png');width:13px;height:19px;right:290px;top:40px;} .htmlWrapper section.visual_wrapper .contents_wrap .head_wrapper .title .star07{background-image:url('../images/visual/star07.png');width:26px;height:40px;right:130px;top:-40px;animation:1s star infinite forwards} .htmlWrapper section.visual_wrapper .contents_wrap .head_wrapper .title .star08{background-image:url('../images/visual/star08.png');width:14px;height:20px;right:143px;top:30px;} .htmlWrapper section.visual_wrapper .contents_wrap .head_wrapper .title .star09{background-image:url('../images/visual/star09.png');width:15px;height:22px;right:60px;top:15px;} .htmlWrapper section.visual_wrapper .contents_wrap .head_wrapper .txt{position:relative;background-image:url('../images/visual/main_txt02.png');width:704px;height:125px;} .htmlWrapper section.visual_wrapper .contents_wrap .samul_wrapper{position:absolute;width:205px;height:138px;left:26px;top:955px;z-index: 10;} .htmlWrapper section.visual_wrapper .contents_wrap .samul_wrapper .samul{position:relative;background-image:url('../images/visual/samul.png');width:100%;height:100%;} .htmlWrapper section.visual_wrapper .contents_wrap .samul_wrapper .bar{position:absolute;background-image:url('../images/visual/bar02.png');width:120px;height:366px;left:40px;top:-270px;z-index:0;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper{position:absolute;;width:346px;height:205px;transform:rotate(-10deg); left: 185px; top: 1120px; scale: 0.8;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .goldenbell{background-image:url('../images/visual/goldenbell01.png');transition:.2s all;width:100%;height:100%;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .goldenbell.on{background-image:url('../images/visual/goldenbell02.png');} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows{display:flex;zoom:.5;justify-content:space-between;z-index:1;width:100%;align-items:end;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows:nth-child(2){position:absolute;top:60px;z-index:2;width:90%;left:5%;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows:nth-child(3){position:absolute;top:120px;z-index:3;zoom:.51;width:50%;left:30%;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows:nth-child(4){position:absolute;top:160px;z-index:4;zoom:.53;width:50%;left:37%;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows .char01{background-image:url('../images/bell/h01.png');width:58px;height:107px;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows .char02{background-image:url('../images/bell/h02.png');width:64px;height:91px;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows .char03{background-image:url('../images/bell/h03.png');width:59px;height:107px;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows .char04{background-image:url('../images/bell/h04.png');width:56px;height:100px;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows .char05{background-image:url('../images/bell/h05.png');width:58px;height:91px;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows .char06{background-image:url('../images/bell/h06.png');width:64px;height:109px;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows .char07{background-image:url('../images/bell/h07.png');width:56px;height:107px;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows .char08{background-image:url('../images/bell/h08.png');width:57px;height:111px;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows .char01.on{background-image:url('../images/bell/h01_on.png');width:57px;height:107px;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows .char02.on{background-image:url('../images/bell/h02_on.png');width:64px;height:87px;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows .char03.on{background-image:url('../images/bell/h03_on.png');width:58px;height:107px;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows .char04.on{background-image:url('../images/bell/h04_on.png');width:54px;height:105px;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows .char05.on{background-image:url('../images/bell/h05_on.png');width:58px;height:90px;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows .char06.on{background-image:url('../images/bell/h06_on.png');width:64px;height:108px;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows .char07.on{background-image:url('../images/bell/h07_on.png');width:56px;height:107px;} .htmlWrapper section.visual_wrapper .contents_wrap .goldenbell_wrapper .rows .char08.on{background-image:url('../images/bell/h08_on.png');width:60px;height:109px;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper{position:absolute;;width:539px;height:218px;right:65px;top:958px;zoom:.8;z-index:9;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .nanta{position:relative;background-image:url('../images/visual/nanta01.png');transition:.2s all;width:100%;height:100%;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .nanta .bar{position:absolute;background-image:url('../images/visual/bar01.png');width:120px;height:366px;top:-295px;right:-50px;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .nanta.on{background-image:url('../images/visual/nanta02.png');} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows{display:flex;zoom:.4;justify-content:space-between;z-index:1;width:100%;align-items:end;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows:nth-child(2){position:absolute;top:60px;z-index:2;width:100%;left:-5%;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows:nth-child(3){position:absolute;top:120px;z-index:3;width:100%;left:-10%;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows .char01{background-image:url('../images/nanta/n01.png');width:79px;height:148px;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows .char02{background-image:url('../images/nanta/n02.png');width:94px;height:158px;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows .char03{background-image:url('../images/nanta/n03.png');width:94px;height:157px;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows .char04{background-image:url('../images/nanta/n04.png');width:94px;height:157px;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows .char05{background-image:url('../images/nanta/n05.png');width:94px;height:157px;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows .char06{background-image:url('../images/nanta/n06.png');width:95px;height:158px;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows .char07{background-image:url('../images/nanta/n01.png');width:79px;height:148px;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows .char08{background-image:url('../images/nanta/n02.png');width:94px;height:158px;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows .char09{background-image:url('../images/nanta/n03.png');width:94px;height:157px;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows .char10{background-image:url('../images/nanta/n04.png');width:94px;height:157px;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows .char11{background-image:url('../images/nanta/n05.png');width:94px;height:157px;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows .char12{background-image:url('../images/nanta/n06.png');width:95px;height:158px;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows .char01.on{background-image:url('../images/nanta/n01_on.png');width:94px;height:158px;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows .char02.on{background-image:url('../images/nanta/n02_on.png');width:80px;height:148px;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows .char03.on{background-image:url('../images/nanta/n03_on.png');width:79px;height:148px;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows .char04.on{background-image:url('../images/nanta/n04_on.png');width:79px;height:148px;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows .char05.on{background-image:url('../images/nanta/n05_on.png');width:79px;height:148px;} .htmlWrapper section.visual_wrapper .contents_wrap .nanta_wrapper .rows .char06.on{background-image:url('../images/nanta/n06_on.png');width:79px;height:148px;} .htmlWrapper section.visual_wrapper .contents_wrap .game_wrapper_man{position:absolute;background-image:url('../images/visual/p01.png');width:37px;height:75px;right:182px;top:994px;} .htmlWrapper section.visual_wrapper .contents_wrap .game_wrapper{z-index: 9;position:absolute;background-image:url('../images/visual/p02.png');width:320px;height:69px;right:40px;top:1024px;animation:1s game_draw infinite linear forwards} .htmlWrapper section.visual_wrapper .contents_wrap .rice_wrapper{position:absolute;background-image:url('../images/visual/loop.png');width:320px;height:223px;left:10px;top:1330px;z-index:6;} .htmlWrapper section.visual_wrapper .contents_wrap .apple_wrapper{position:absolute;;width:180px;height:171px;left:80px;bottom:300px;} .htmlWrapper section.visual_wrapper .contents_wrap .apple_wrapper .box{position:absolute;;width:84px;height:84px;right:0px;bottom:0px;background-image:url('../images/visual/apple01.png');} .htmlWrapper section.visual_wrapper .contents_wrap .stage_wrapper{position:relative;background-image:url('../images/visual/stage.png');width:598px;height:290px;top:430px;display:flex;justify-content:center;} .htmlWrapper section.visual_wrapper .contents_wrap .stage_wrapper .light_wrap{position:absolute;display:flex;justify-content:space-between;width:160px;top:75px;z-index:5;} .htmlWrapper section.visual_wrapper .contents_wrap .stage_wrapper .light_wrap .light01{position:relative;animation-duration: 10s;animation-name: light;animation-iteration-count: infinite;} .htmlWrapper section.visual_wrapper .contents_wrap .stage_wrapper .light_wrap .light02{position:relative;animation-duration: 7s;animation-name: light;animation-iteration-count: infinite;left:-5px;} .htmlWrapper section.visual_wrapper .contents_wrap .stage_wrapper .light_wrap .light03{position:relative;animation-duration: 10s;animation-name: light;animation-iteration-count: infinite;} .htmlWrapper section.visual_wrapper .contents_wrap .stage_wrapper .light{clip-path:polygon(0% 45%, 100% 0%, 100% 100%, 0% 55%); transition: 4s;transform: translateY(-50%) translateX(-50%) rotate(var(--angle)) translateY(50%) translateX(50%) translateY(-50%); position: absolute; top: -30px; left: 50%; width: 300px; height: 50px; background: linear-gradient(0.25turn,rgba(25,116,210,0.5), rgba(255,255,100,0)); } .htmlWrapper section.visual_wrapper .contents_wrap .stage_wrapper .display{position:relative;background-image:url('../images/visual/display.png');width:290px;height:69px;top:-55px;display:flex;justify-content:center;align-items:center;overflow:hidden;} .htmlWrapper section.visual_wrapper .contents_wrap .stage_wrapper .display .txt{position:relative;white-space:nowrap;font-size:28px;font-family:'GmarketSansTTFBold',sans-serif;color:#FFFFFF;} .htmlWrapper section.visual_wrapper .contents_wrap .stage_wrapper .display .txt .txt_wrap{ top:-15px; left:-165px; position:absolute;} .htmlWrapper section.visual_wrapper .contents_wrap .stage_wrapper .display .txt .txt_wrap span{ --interval: 1s; text-shadow: 0 0 10px yellow, 0 0 20px gold, 0 0 40px orange, 0 0 80px darkred; will-change: filter, color; filter: saturate(60%); color: lightyellow; animation: flicker steps(100) 1s 1s infinite; } .htmlWrapper section.visual_wrapper .contents_wrap .stage_wrapper .display .txt.start .txt_wrap{animation: txt_flow 15s linear infinite;} .htmlWrapper section.visual_wrapper .contents_wrap .stage_wrapper .display .txt.start.pause .txt_wrap{animation-delay:7s;} .htmlWrapper section.visual_wrapper .contents_wrap .stage_wrapper .display .txt.start.pause2 .txt_wrap{animation-delay:2s;} .htmlWrapper section.visual_wrapper .contents_wrap .stage_wrapper .char01{position:absolute;background-image:url('../images/visual/d01.png');width:74px;height:83px;left:103px;bottom:57px;animation:.5s dance01 infinite linear forwards;display: none;} .htmlWrapper section.visual_wrapper .contents_wrap .stage_wrapper .char02{position:absolute;background-image:url('../images/visual/d02.png');width:52px;height:119px;bottom:-27px;right:160px;animation:1.5s dance02 infinite linear forwards;display: none;} .htmlWrapper section.visual_wrapper .contents_wrap .stage_wrapper .char03{position:absolute;background-image:url('../images/visual/d03.png');width:42px;height:95px;right:80px;bottom:57px;animation:1s dance03 infinite linear forwards;display: none;} .htmlWrapper section.visual_wrapper .contents_wrap .stage_wrapper .char04{position:absolute;background-image:url('../images/visual/s01.png');width:116px;height:146px;left:80px;bottom:35px;z-index:6;animation:1s sing01 infinite linear forwards;} .htmlWrapper section.visual_wrapper .contents_wrap .stage_wrapper .char05{position:absolute;background-image:url('../images/visual/s02.png');width:124px;height:146px;right:100px;bottom:40px;animation:1s sing02 infinite linear forwards;z-index:5} /* 다음 */ .htmlWrapper section.daum_search_wrapper{position:absolute;width:100%;margin-top:-164px;height:555px;} .htmlWrapper section.daum_search_wrapper .daum_search{position:relative;background-image:url(../images/daum/bg_daum.png);width:100%;height:463px;display:flex;justify-content:start;align-items:center;z-index:2;background-repeat:no-repeat;background-position:center 50px;} .htmlWrapper section.daum_search_wrapper .daum_search .water{position:absolute;background-image:url(../images/daum/water.png);width:750px;height:56px;top:150px;animation:50s water_flow infinite linear forwards} .htmlWrapper section.daum_search_wrapper .daum_search .bridge{position:absolute;background-image:url(../images/daum/bridge.png);width:372px;height:693px;right:0px;top:0;z-index:4;} .htmlWrapper section.daum_search_wrapper .daum_search .box{position:relative;background-image:url(../images/daum/daum_box.png);width:464px;height:245px;top:60px;left:16px;z-index:3;} .htmlWrapper section.daum_search_wrapper .daum_search .bottom{position:absolute;background-image:url(../images/daum/bg_daum_bottom.png);width:100%;height:49px;bottom:-2px;z-index:3;} .htmlWrapper section.daum_search_wrapper .daum_search .typing-text{position:absolute;left:20px;top:160px;line-height:36px;font-family:'yg-jalnan',sans-serif;font-weight:500;font-size:37px; color:#313131; border-right:2px solid #333; animation: typing 5s steps(22) infinite; white-space: nowrap; overflow: hidden;} .htmlWrapper section.daum_search_wrapper .wave { display: flex; position: absolute; bottom: 0; width: 6400px; animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite; transform: translate3d(0, 0, 0); z-index:0; opacity:.2; } .htmlWrapper section.daum_search_wrapper .wave:nth-of-type(2) { bottom: 10px; animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite; opacity: 1; } /* 다음 */ /* 이벤트 01 */ section.event01 {position:relative;width:100%;height:2644px;background:#cadd8c;background-position:center;top:290px;} section.event01 .contents_wrapper {display:block;position:absolute;left:0;top:100px;width:100%;} section.event01 .contents_wrapper .title_wrapper{position:relative;display:flex;justify-content:center;flex-direction:column;align-items:center;} section.event01 .contents_wrapper .title_wrapper .title{position:relative;background-image:url('../images/event01/title.png');width:631px;height:77px;background-repeat:no-repeat;} section.event01 .contents_wrapper .title_wrapper .head{position:relative;background-image:url('../images/event01/evt_title.png');width:698px;height:90px;background-repeat:no-repeat;margin-top:32px;} section.event01 .contents_wrapper .present_wrapper{position:relative;width:100%;margin:40px auto;display:flex;flex-direction:column;align-items:center;padding:0 0 0 0;box-sizing:border-box;} section.event01 .contents_wrapper .present_wrapper .txt{position:relative;background-image:url('../images/event01/evt_period.png');width:683px;height:182px;} section.event01 .contents_wrapper .present_wrapper .present_list{position:relative;width:100%;height:299px;display:flex;flex-wrap:no-wrap;justify-content:start;margin:55px auto 35px auto;overflow:auto;white-space:nowrap;padding:0 70px;box-sizing:border-box;} section.event01 .contents_wrapper .present_wrapper .present_list .present{position:relative;width:186px;height:100%;background-size:100%;background-position:center;background-repeat:no-repeat;} section.event01 .contents_wrapper .present_wrapper .present_list .present.p01{background-image:url('../images/event01/present01.png');} section.event01 .contents_wrapper .present_wrapper .present_list .present.p02{background-image:url('../images/event01/present02.png');} section.event01 .contents_wrapper .present_wrapper .present_list .present.p03{background-image:url('../images/event01/present03.png');} section.event01 .contents_wrapper .present_wrapper .present_list .present.p04{background-image:url('../images/event01/present04.png');} section.event01 .contents_wrapper .present_wrapper .present_list .present.p05{background-image:url('../images/event01/present05.png');} section.event01 .contents_wrapper .event_wrapper{position:relative;background-image:url('../images/event01/map.png');width:739px;height:933px;margin:0 auto;padding:80px 30px 0 20px;box-sizing:border-box;} section.event01 .contents_wrapper .event_wrapper .character{position:absolute;background-image:url('../images/event01/child.png');width:150px;height:146px;z-index:5;top:100px;left:0px;} section.event01 .contents_wrapper .event_wrapper .character .btn_start{position:absolute;background-image:url('../images/event01/btn_start.png');width:117px;height:43px;bottom:-40px;left:15px;cursor:pointer;} section.event01 .contents_wrapper .event_wrapper .character .btn_start .hand{right:-40px;bottom:-60px;} section.event01 .contents_wrapper .event_wrapper .character.d01::before{position:absolute;content:'';background-image:url('../images/event01/run.png');width:63px;height:33px;bottom:0;left:-40px;animation:.3s run_effect infinite linear forwards} section.event01 .contents_wrapper .event_wrapper .character.d02::after{position:absolute;content:'';background-image:url('../images/event01/run.png');width:63px;height:33px;bottom:0;right:-40px;animation:.3s run_effect02 infinite linear forwards;transform:rotate(180deg)} section.event01 .contents_wrapper .event_wrapper .character.start{top:175px;left:165px;animation:1.5s movePlaceStart 1 linear forwards;} section.event01 .contents_wrapper .event_wrapper .character.step01{top:255px;left:893px;} section.event01 .contents_wrapper .event_wrapper .character.step01.move{animation:1.5s movePlace02 1 linear forwards;} section.event01 .contents_wrapper .event_wrapper .character.step02.move{animation:1.5s movePlace03 1 linear forwards;} section.event01 .contents_wrapper .event_wrapper .character.step03.move{animation:1.5s movePlace04 1 linear forwards;} section.event01 .contents_wrapper .event_wrapper .character.step04.move{animation:1.5s movePlace05 1 linear forwards;} section.event01 .contents_wrapper .event_wrapper .place .complete.on{position:absolute;background-image:url('../images/event01/complete.png');width:100px;height:102px;} section.event01 .contents_wrapper .event_wrapper .place01{position:absolute;width:254px;height:110px;top:260px;left:127px;z-index:1} section.event01 .contents_wrapper .event_wrapper .place01 .place{position:absolute;background-image:url('../images/event01/place01_on.png?v=1');width:176px;height:90px;top:-10px;left:68px;} section.event01 .contents_wrapper .event_wrapper .place01 .place.on{background-image:url('../images/event01/place01.png?v=1');} section.event01 .contents_wrapper .event_wrapper .place01 .place .complete.on{top:0;right:-20px;} section.event01 .contents_wrapper .event_wrapper .place01 .btn{position:absolute;background-image:url('../images/event01/btn_view.png');width:117px;height:43px;bottom:-10px;left:100px;cursor:pointer;z-index:5;} section.event01 .contents_wrapper .event_wrapper .place02{position:absolute;width:219px;height:163px;top:240px;left:525px;z-index:1} section.event01 .contents_wrapper .event_wrapper .place02 .place{position:absolute;background-image:url('../images/event01/place02_on.png?v=1');width:148px;height:152px;top:0;left:68px;scale:.9;} section.event01 .contents_wrapper .event_wrapper .place02 .place.on{background-image:url('../images/event01/place02.png?v=1');} section.event01 .contents_wrapper .event_wrapper .place02 .place .complete.on{top:0;right:-10px;} section.event01 .contents_wrapper .event_wrapper .place02 .btn{position:absolute;background-image:url('../images/event01/btn_view.png');width:117px;height:43px;bottom:-10px;left:55px;cursor:pointer;} section.event01 .contents_wrapper .event_wrapper .place03{position:absolute;width:263px;height:170px;top:420px;left:265px;z-index:1} section.event01 .contents_wrapper .event_wrapper .place03 .place{position:absolute;background-image:url('../images/event01/place03_on.png?v=1');width:166px;height:168px;left:0;scale:.9;} section.event01 .contents_wrapper .event_wrapper .place03 .place.on{background-image:url('../images/event01/place03.png?v=1');} section.event01 .contents_wrapper .event_wrapper .place03 .place .complete.on{top:0;right:-20px;} section.event01 .contents_wrapper .event_wrapper .place03 .btn{position:absolute;background-image:url('../images/event01/btn_view.png');width:117px;height:43px;bottom:0;cursor:pointer;z-index:5;;} section.event01 .contents_wrapper .event_wrapper .place04{position:absolute;width:290px;height:137px;bottom:20px;left:30px;z-index:1} section.event01 .contents_wrapper .event_wrapper .place04 .place{position:absolute;background-image:url('../images/event01/place04_on.png?v=1');width:207px;height:135px;top:0;left:90px;scale:.9} section.event01 .contents_wrapper .event_wrapper .place04 .place.on{background-image:url('../images/event01/place04.png?v=1');} section.event01 .contents_wrapper .event_wrapper .place04 .place .complete.on{top:0;right:-20px;} section.event01 .contents_wrapper .event_wrapper .place04 .btn{position:absolute;background-image:url('../images/event01/btn_view.png');width:117px;height:43px;bottom:0;left:70px;cursor:pointer;z-index:5;} section.event01 .contents_wrapper .event_wrapper .place05{position:absolute;width:270px;height:180px;bottom:75px;right:-7px;z-index:1} section.event01 .contents_wrapper .event_wrapper .place05 .place{position:absolute;background-image:url('../images/event01/place05_on.png?v=1');width:183px;height:172px;top:10px;right:20px;scale:.9;} section.event01 .contents_wrapper .event_wrapper .place05 .place.on{background-image:url('../images/event01/place05.png?v=1');} section.event01 .contents_wrapper .event_wrapper .place05 .place .complete.on{top:0;right:-20px;} section.event01 .contents_wrapper .event_wrapper .place05 .btn{position:absolute;background-image:url('../images/event01/btn_view.png');width:117px;height:43px;cursor:pointer;left:40px;bottom:10px;} section.event01 .contents_wrapper .event_wrapper .point .btn .hand{right:-40px;bottom:-60px;} section.event01 .btns_wrap {position:absolute;bottom:550px;display:flex;justify-content:center;width:100%;left:0;} section.event01 .btns_wrap .btn_join{position:relative;background-image:url('../images/event01/btn_join.png');width:447px;height:111px;cursor:pointer;} section.event01 .contents_wrapper .event_wrapper .foot_wrap {position:absolute;} section.event01 .contents_wrapper .event_wrapper .foot_wrap > div{opacity:0;z-index:0;} section.event01 .contents_wrapper .event_wrapper .foot_wrap .foot01{position:absolute;background-image:url('../images/event01/foot01.png');width:61px;height:30px;top:183px;left:70px;} section.event01 .contents_wrapper .event_wrapper .foot_wrap .foot02{position:absolute;background-image:url('../images/event01/foot02.png');width:59px;height:36px;top:205px;left:157px;} section.event01 .contents_wrapper .event_wrapper .foot_wrap .foot03{position:absolute;background-image:url('../images/event01/foot03.png');width:53px;height:42px;top:180px;left:343px;} section.event01 .contents_wrapper .event_wrapper .foot_wrap .foot04{position:absolute;background-image:url('../images/event01/foot04.png');width:60px;height:34px;top:160px;left:434px;} section.event01 .contents_wrapper .event_wrapper .foot_wrap .foot05{position:absolute;background-image:url('../images/event01/foot05.png');width:61px;height:34px;top:170px;left:522px;} section.event01 .contents_wrapper .event_wrapper .foot_wrap .foot06{position:absolute;background-image:url('../images/event01/foot06.png');width:41px;height:52px;top:325px;left:575px;} section.event01 .contents_wrapper .event_wrapper .foot_wrap .foot07{position:absolute;background-image:url('../images/event01/foot07.png');width:56px;height:40px;top:395px;left:475px;} section.event01 .contents_wrapper .event_wrapper .foot_wrap .foot08{position:absolute;background-image:url('../images/event01/foot08.png');width:56px;height:40px;top:410px;left:370px;} section.event01 .contents_wrapper .event_wrapper .foot_wrap .foot09{position:absolute;background-image:url('../images/event01/foot09.png');width:50px;height:44px;top:430px;left:190px;} section.event01 .contents_wrapper .event_wrapper .foot_wrap .foot10{position:absolute;background-image:url('../images/event01/foot10.png');width:39px;height:54px;top:484px;left:112px;} section.event01 .contents_wrapper .event_wrapper .foot_wrap .foot11{position:absolute;background-image:url('../images/event01/foot11.png');width:43px;height:54px;top:620px;left:84px;} section.event01 .contents_wrapper .event_wrapper .foot_wrap .foot12{position:absolute;background-image:url('../images/event01/foot12.png');width:60px;height:35px;top:770px;left:233px;} section.event01 .contents_wrapper .event_wrapper .foot_wrap .foot13{position:absolute;background-image:url('../images/event01/foot13.png');width:55px;height:41px;top:753px;left:338px;} section.event01 .contents_wrapper .event_wrapper .foot_wrap .foot14{position:absolute;background-image:url('../images/event01/foot14.png');width:55px;height:41px;top:724px;left:440px;} section.event01 .join_info_wrapper {position:absolute;left:0;width:100%;color:#ffffff;font-weight:400;bottom:360px;} section.event01 .join_info_wrapper > .join_info {position:relative;width:700px;height:130px;margin:0 auto;background:#726a55;border-radius:40px;font-size:36px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;letter-spacing:-1px;line-height:1.3;} section.event01 .join_info_wrapper > .join_info > div{display:inline} section.event01 .join_info_wrapper > .join_info span{font-weight:700;color:#3cdcc5;} section.event01 .join_info_wrapper > .join_info span.num{font-size:36px;color:#ffff00} .event01_pop_wrapper {position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);z-index:99;display:flex;justify-content:center;align-items:center;} .event01_pop_wrapper .pop_wrapper{position:relative;width:680px;height:780px;} .event01_pop_wrapper .pop_wrapper.p01{background-image:url('../images/event01/pop01.png');} .event01_pop_wrapper .pop_wrapper.p02{background-image:url('../images/event01/pop02.png');} .event01_pop_wrapper .pop_wrapper.p03{background-image:url('../images/event01/pop03.png');} .event01_pop_wrapper .pop_wrapper.p04{background-image:url('../images/event01/pop04.png');} .event01_pop_wrapper .pop_wrapper.p05{background-image:url('../images/event01/pop05.png');} .event01_pop_wrapper .pop_wrapper .close{position:absolute;width:104px;height:110px;right:13px;top:26px;cursor:pointer;z-index:9} .event01_pop_wrapper .pop_wrapper .content{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:40px 0 30px 0;height:100%;} .event01_pop_wrapper .pop_wrapper .content .btns{position:absolute;bottom:60px;} .event01_pop_wrapper .pop_wrapper .content .btns .btn{width:165px;height:49px;cursor:pointer;} .event01_pop_wrapper .pop_wrapper .content .btns .btn .hand{right:-25px;bottom:-50px;} /* 이벤트 01 */ /* 이벤트 02 */ section.event02 {position:relative;width:100%;height:3290px;background-image:url('../images/event02/bg_event02.png');background-position:center;top:-90px;z-index:2;} section.event02 .contents_wrapper {display:block;position:absolute;left:0;top:250px;width:100%;} section.event02 .contents_wrapper .title_wrapper{position:relative;display:flex;justify-content:center;} section.event02 .contents_wrapper .title_wrapper .title{position:relative;background-image:url('../images/event02/title.png');width:631px;height:76px;background-repeat:no-repeat;} section.event02 .contents_wrapper .present_wrapper{position:relative;width:100%;margin:10px auto;display:flex;flex-direction:column;align-items:center;} section.event02 .contents_wrapper .present_wrapper .txt{position:relative;background-image:url('../images/event02/title_img.png');width:696px;height:950px;} section.event02 .contents_wrapper .present_wrapper .present_list{position:relative;width:100%;height:299px;display:flex;justify-content:space-between;margin:20px auto 15px auto;padding:0 70px;box-sizing:border-box;} section.event02 .contents_wrapper .present_wrapper .present_list .present{position:relative;width:167px;height:100%;background-size:100%;background-position:center;background-repeat:no-repeat;} section.event02 .contents_wrapper .present_wrapper .present_list .present.p01{background-image:url('../images/event02/present01.png');} section.event02 .contents_wrapper .present_wrapper .present_list .present.p02{background-image:url('../images/event02/present02.png');} section.event02 .contents_wrapper .present_wrapper .present_list .present.p03{background-image:url('../images/event02/present03.png');} section.event02 .contents_wrapper .present_wrapper .present_list .present.p04{background-image:url('../images/event02/present04.png');} section.event02 .contents_wrapper .present_wrapper .present_list .present.p05{background-image:url('../images/event02/present05.png');} section.event02 .contents_wrapper .event_wrapper{position:relative;background-image:url('../images/nanta/bg_nanta.png');width:747px;height:957px;margin:0 auto;padding:230px 0 0 0;box-sizing:border-box;} section.event02 .contents_wrapper .event_wrapper .char{position:absolute;background-image:url('../images/event02/char01.png');width:194px;height:217px;left:10px;bottom:-45px;z-index: 10;} section.event02 .contents_wrapper .event_wrapper .start{position:relative;display:flex;flex-direction:column;align-items:center;} section.event02 .contents_wrapper .event_wrapper .start .title{position:relative;background-image:url('../images/nanta/title.png');width:498px;height:111px;} section.event02 .contents_wrapper .event_wrapper .start .txt{position:relative;background-image:url('../images/nanta/txt.png');width:629px;height:166px;margin-top:20px;} section.event02 .contents_wrapper .event_wrapper .start .people{position:relative;background-image:url('../images/nanta/people.png');width:750px;height:284px;background-position:center top;left:0;background-size:97.9% 100%;} section.event02 .contents_wrapper .event_wrapper .start .btns_wrap{position:absolute;width:100%;display:flex;justify-content:center;bottom:-130px;z-index:999;} section.event02 .contents_wrapper .event_wrapper .start .btns_wrap .btn{position:relative;background-image:url('../images/nanta/btn_start.png');width:410px;height:111px;cursor:pointer;} section.event02 .contents_wrapper .event_wrapper .start .btns_wrap .btn .hand{right:60px} section.event02 .contents_wrapper .event_wrapper .tabs_wrap{position:relative;display:flex;margin-top:17px;width:655px;justify-content:space-between;z-index:5;} section.event02 .contents_wrapper .event_wrapper .tabs_wrap > div{width:219px;height:60px;} section.event02 .contents_wrapper .event_wrapper .tabs_wrap .tab01{background-image:url('../images/nanta/step01.png?v=1');background-size: contain;} section.event02 .contents_wrapper .event_wrapper .tabs_wrap .tab02{background-image:url('../images/nanta/step02.png?v=1');background-size: contain;} section.event02 .contents_wrapper .event_wrapper .tabs_wrap .tab03{background-image:url('../images/nanta/step03.png?v=1');background-size: contain;} section.event02 .contents_wrapper .event_wrapper .tabs_wrap .tab01.on{background-image:url('../images/nanta/step01_on.png?v=1');background-size: contain;} section.event02 .contents_wrapper .event_wrapper .tabs_wrap .tab02.on{background-image:url('../images/nanta/step02_on.png?v=1');background-size: contain;} section.event02 .contents_wrapper .event_wrapper .tabs_wrap .tab03.on{background-image:url('../images/nanta/step03_on.png?v=1');background-size: contain;} section.event02 .contents_wrapper .event_wrapper .step01{position:relative;display:flex;flex-direction:column;align-items:center;} section.event02 .contents_wrapper .event_wrapper .step01 .title{position:relative;background-image:url('../images/nanta/title.png');width:498px;height:111px;} section.event02 .contents_wrapper .event_wrapper .step01 .box{display:flex;margin-top:20px;} section.event02 .contents_wrapper .event_wrapper .step01 .box .right{display:flex;flex-direction:column;justify-content:end;} section.event02 .contents_wrapper .event_wrapper .step01 .box .right .txt{background-image:url('../images/nanta/step01_txt.png');width:593px;height:61px;} section.event02 .contents_wrapper .event_wrapper .step01 .box .right .cont{background-image:url('../images/nanta/box_right.png');width:648px;height:274px;margin-top:10px;display:flex;justify-content:center;align-items:center;} section.event02 .contents_wrapper .event_wrapper .step01 .box .right .cont .item{position:relative;display:flex;align-items:end;} section.event02 .contents_wrapper .event_wrapper .step01 .box .right .cont .item:nth-child(1){margin-right:50px;} section.event02 .contents_wrapper .event_wrapper .step01 .box .right .cont .item .rdo{position:relative;background-image:url('../images/nanta/rdo.png');width:57px;height:56px;margin-right:10px;cursor:pointer;} section.event02 .contents_wrapper .event_wrapper .step01 .box .right .cont .item .rdo.on::before{position:absolute;content:'';background-image:url('../images/nanta/chk.png');width:64px;height:51px;left:5px;top:-10px;} section.event02 .contents_wrapper .event_wrapper .step01 .box .right .cont .item .uchar01{background-image:url('../images/nanta/uchar01.png');width:160px;height:225px;cursor:pointer;} section.event02 .contents_wrapper .event_wrapper .step01 .box .right .cont .item .uchar02{background-image:url('../images/nanta/uchar02.png');width:158px;height:232px;cursor:pointer;} section.event02 .contents_wrapper .event_wrapper .step01 .btns_wrap{position:absolute;width:100%;display:flex;justify-content:center;bottom:-160px;z-index:999;} section.event02 .contents_wrapper .event_wrapper .step01 .btns_wrap .btn{position:relative;background-image:url('../images/nanta/btn_next_none.png');width:410px;height:111px;cursor:pointer;} section.event02 .contents_wrapper .event_wrapper .step01 .btns_wrap .btn.on{background-image:url('../images/nanta/btn_next.png');} section.event02 .contents_wrapper .event_wrapper .step02{position:relative;display:flex;flex-direction:column;align-items:center;} section.event02 .contents_wrapper .event_wrapper .step02 .title{position:relative;background-image:url('../images/nanta/title.png');width:498px;height:111px;} section.event02 .contents_wrapper .event_wrapper .step02 .box{display:flex;margin-top:20px;} section.event02 .contents_wrapper .event_wrapper .step02 .box .right{display:flex;flex-direction:column;justify-content:end;} section.event02 .contents_wrapper .event_wrapper .step02 .box .right .txt{background-image:url('../images/nanta/step02_txt.png');width:466px;height:61px;} section.event02 .contents_wrapper .event_wrapper .step02 .box .right .cont{background-image:url('../images/nanta/box_right.png');width:648px;height:274px;margin-top:10px;display:flex;justify-content:center;align-items:center;} section.event02 .contents_wrapper .event_wrapper .step02 .box .right .cont .item{position:relative;display:flex;align-items:end;} section.event02 .contents_wrapper .event_wrapper .step02 .box .right .cont .item:nth-child(1){margin-right:50px;} section.event02 .contents_wrapper .event_wrapper .step02 .box .right .cont .item .rdo{position:relative;background-image:url('../images/nanta/rdo.png');width:57px;height:56px;margin-right:15px;cursor:pointer;} section.event02 .contents_wrapper .event_wrapper .step02 .box .right .cont .item .rdo.on::before{position:absolute;content:'';background-image:url('../images/nanta/chk.png');width:64px;height:51px;left:5px;top:-10px;} section.event02 .contents_wrapper .event_wrapper .step02 .box .right .cont .item .uchar01{background-image:url('../images/nanta/apple01.png');width:113px;height:124px;cursor:pointer;} section.event02 .contents_wrapper .event_wrapper .step02 .box .right .cont .item .uchar02{background-image:url('../images/nanta/apple02.png');width:107px;height:127px;cursor:pointer;} section.event02 .contents_wrapper .event_wrapper .step02 .btns_wrap{position:absolute;width:100%;display:flex;justify-content:center;bottom:-160px;z-index:999;} section.event02 .contents_wrapper .event_wrapper .step02 .btns_wrap .btn{position:relative;background-image:url('../images/nanta/btn_next_none.png');width:410px;height:111px;cursor:pointer;} section.event02 .contents_wrapper .event_wrapper .step02 .btns_wrap .btn.on{background-image:url('../images/nanta/btn_next.png');} section.event02 .contents_wrapper .event_wrapper .step03{position:relative;display:flex;flex-direction:column;align-items:center;} section.event02 .contents_wrapper .event_wrapper .step03 .title{position:relative;background-image:url('../images/nanta/title.png');width:537px;height:47px;} section.event02 .contents_wrapper .event_wrapper .step03 .box{display:flex;margin-top:65px;} section.event02 .contents_wrapper .event_wrapper .step03 .box .right{display:flex;flex-direction:column;justify-content:space-between;height:366px;} section.event02 .contents_wrapper .event_wrapper .step03 .box .right .txt{background-image:url('../images/nanta/step03_txt.png');width:389px;height:50px;} section.event02 .contents_wrapper .event_wrapper .step03 .box .right .cont{width:630px;display:flex;justify-content:space-between;align-items:center;} section.event02 .contents_wrapper .event_wrapper .step03 .box .right .cont .num{background-image:url('../images/nanta/num.png');width:121px;height:302px;} section.event02 .contents_wrapper .event_wrapper .step03 .box .right .cont .table_wrap{position:relative;width:337px;height:299px} section.event02 .contents_wrapper .event_wrapper .step03 .box .right .cont .table_wrap .character{position:absolute;width:209px;height:258px;left:58px;} section.event02 .contents_wrapper .event_wrapper .step03 .box .right .cont .table_wrap .character.c01{background-image:url('../images/nanta/character.png');} section.event02 .contents_wrapper .event_wrapper .step03 .box .right .cont .table_wrap .character.c02{background-image:url('../images/nanta/ycharacter.png');width:222px;height:268px;} section.event02 .contents_wrapper .event_wrapper .step03 .box .right .cont .table_wrap .apple{position:absolute;width:113px;height:124px;zoom:.7;left:185px;top:145px;} section.event02 .contents_wrapper .event_wrapper .step03 .box .right .cont .table_wrap .apple.a01{background-image:url('../images/nanta/apple01.png');} section.event02 .contents_wrapper .event_wrapper .step03 .box .right .cont .table_wrap .apple.a02{background-image:url('../images/nanta/apple02.png');} section.event02 .contents_wrapper .event_wrapper .step03 .box .right .cont .table_wrap .table{position:absolute;bottom:0;background-image:url('../images/nanta/table.png');width:337px;height:113px} section.event02 .contents_wrapper .event_wrapper .step03 .box .right .cont .info_wrap{display:flex;flex-direction:column;} section.event02 .contents_wrapper .event_wrapper .step03 .box .right .cont .info_wrap .time{position:relative;background-image:url('../images/nanta/clock.png');width:125px;height:145px;display:flex;justify-content:center;align-items:center;font-size:40px;font-weight:700;margin-bottom:34px;} section.event02 .contents_wrapper .event_wrapper .step03 .box .right .cont .info_wrap .time > span{position:relative;top:10px;left:-7px;display:flex;width:50px;justify-content:end;padding-right:5px;} section.event02 .contents_wrapper .event_wrapper .step03 .box .right .cont .info_wrap .cnt{position:relative;background-image:url('../images/nanta/box_hit.png');width:124px;height:114px;display:flex;justify-content:center;align-items:center;font-size:40px;font-weight:700;} section.event02 .contents_wrapper .event_wrapper .step03 .box .right .cont .info_wrap .cnt > span{position:relative;top:20px;left:-7px;display:flex;width:50px;justify-content:end;padding-right:5px;} section.event02 .contents_wrapper .event_wrapper .step03 .btns_wrap{position:absolute;width:100%;display:flex;justify-content:center;bottom:-140px;} section.event02 .contents_wrapper .event_wrapper .step03 .btns_wrap .btn{position:relative;background-image:url('../images/nanta/btn_start.png');width:410px;height:111px;cursor:pointer;} section.event02 .contents_wrapper .event_wrapper .step04{position:relative;display:flex;flex-direction:column;align-items:center;} section.event02 .contents_wrapper .event_wrapper .step04 .title{position:relative;background-image:url('../images/nanta/title.png');width:498px;height:111px;} section.event02 .contents_wrapper .event_wrapper .step04 .box{display:flex;margin-top:20px;flex-direction:column;} section.event02 .contents_wrapper .event_wrapper .step04 .box .txt{background-image:url('../images/nanta/step03_txt.png');width:597px;height:61px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game{display:flex;flex-direction:column;justify-content:space-between;height:366px;margin-top:20px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont{width:630px;height:295px;display:flex;justify-content:space-between;align-items:end;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .num_wrap{display:flex;align-items:end;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .num_wrap .bar{position:relative;display:flex;align-items:end;background-image:url('../images/nanta/g_bar.png?v=1');width:38px;height:295px;margin-right:10px;overflow:hidden;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .num_wrap .bar .color{position:absolute;background:#06d7ff;width:100%;height:0;transition:.3s all;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .num_wrap .num{background-image:url('../images/nanta/g_num.png?v=1');width:67px;height:302px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .table{position:absolute;background-image:url('../images/nanta/g_table.png?v=1');bottom:0;width:346px;height:75px;z-index:3;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_character{position:absolute;top:0px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_character.g01{background-image:url('../images/nanta/g_character01.png');width:181px;height:251px;z-index:0;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_character.g01.on{background-image:url('../images/nanta/g_character02.png');} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_character.g02{background-image:url('../images/nanta/g_bcharacter01.png');width:192px;height:269px;z-index:0;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_character.g02.on{background-image:url('../images/nanta/g_bcharacter02.png');} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_apple{position:relative;width:256px;height:129px;margin:0 auto;top:125px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_apple.a01{background-image:url('../images/nanta/g_apple01.png');width:205px;height:103px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_apple.a01.s1{background-image:url('../images/nanta/g_apple02.png');width:219px;height:108px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_apple.a01.s2{background-image:url('../images/nanta/g_apple03.png');width:238px;height:93px;top:140px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_apple.a01.s3{background-image:url('../images/nanta/g_apple04.png');width:310px;height:89px;top:152px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_apple.a01.s4{background-image:url('../images/nanta/g_apple05.png');width:328px;height:103px;top:154px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_apple.a02{background-image:url('../images/nanta/g_yapple01.png');width:205px;height:103px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_apple.a02.s1{background-image:url('../images/nanta/g_yapple02.png');width:219px;height:108px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_apple.a02.s2{background-image:url('../images/nanta/g_yapple03.png');width:238px;height:93px;top:140px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_apple.a02.s3{background-image:url('../images/nanta/g_yapple04.png');width:310px;height:89px;top:152px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_apple.a02.s4{background-image:url('../images/nanta/g_yapple05.png');width:328px;height:103px;top:154px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_apple .hit01{position:absolute;background-image:url('../images/nanta/eff01.png');width:102px;height:93px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_apple .hit02{position:absolute;background-image:url('../images/nanta/eff02.png');width:109px;height:117px;right:0;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_apple.s2 .hit02{top:-30px;right:0;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_apple.s3 .hit01{top:-30px;left:40px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_apple.s4 .hit02{top:-30px;right:40px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_apple.s5 .hit01{top:-30px;left:50px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .game_table .g_apple.s6 .hit02{top:-30px;right:-10px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .info_wrap{display:flex;flex-direction:column;justify-content:end;align-items:end;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .info_wrap .time{position:relative;background-image:url('../images/nanta/clock.png');width:125px;height:145px;display:flex;justify-content:center;align-items:center;font-size:40px;font-weight:700;margin-bottom:34px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .info_wrap .time > span{position:relative;top:10px;left:-7px;display:flex;width:50px;justify-content:end;padding-right:5px;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .info_wrap .cnt{position:relative;background-image:url('../images/nanta/box_hit.png');width:124px;height:114px;display:flex;justify-content:center;align-items:center;font-size:40px;font-weight:700;} section.event02 .contents_wrapper .event_wrapper .step04 .box .game .cont .info_wrap .cnt > span{position:relative;top:20px;left:-7px;display:flex;width:50px;justify-content:end;padding-right:5px;} section.event02 .contents_wrapper .event_wrapper .step04 .btns_wrap{position:absolute;width:100%;display:flex;justify-content:center;bottom:-125px;z-index:999;} section.event02 .contents_wrapper .event_wrapper .step04 .btns_wrap .btn_start{position:relative;background-image:url('../images/nanta/btn_start.png');width:410px;height:111px;cursor:pointer;touch-action:manipulation;} section.event02 .contents_wrapper .event_wrapper .step04 .btns_wrap .btn_start .hand{right:40px;} section.event02 .contents_wrapper .event_wrapper .step04 .btns_wrap .btn_hit{position:relative;background-image:url('../images/nanta/btn_hit.png');width:423px;height:111px;cursor:pointer;touch-action:manipulation;} section.event02 .contents_wrapper .event_wrapper .step04 .btns_wrap .btn_join{position:relative;background-image:url('../images/event02/join_event_02.png');width:447px;height:111px;cursor:pointer;touch-action:manipulation;} section.event02 .join_info_wrapper {position:absolute;left:0;width:100%;color:#ffffff;font-weight:400;bottom:470px;} section.event02 .join_info_wrapper > .join_info {position:relative;width:700px;height:130px;margin:0 auto;background:#f23749;border-radius:40px;font-size:36px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;letter-spacing:-1px;} section.event02 .join_info_wrapper > .join_info > div{display:inline} section.event02 .join_info_wrapper > .join_info span{font-weight:700;color:#ffff00;} section.event02 .join_info_wrapper > .join_info span.num{color:#6affe9} /* 이벤트 02 */ /* 이벤트 03 */ section.event03 {position:relative;width:100%;height:2500px;background-image:url('../images/event03/bg_event03.png');background-position:center;top:-600px;} section.event03 .contents_wrapper {display:block;position:absolute;left:0;top:340px;width:100%;} section.event03 .contents_wrapper .title_wrapper{position:relative;display:flex;justify-content:center;flex-direction:column;align-items:center;margin-top:115px;} section.event03 .contents_wrapper .title_wrapper .title{position:relative;background-image:url('../images/event03/title.png');width:631px;height:77px;background-repeat:no-repeat;} section.event03 .contents_wrapper .title_wrapper .head{position:relative;background-image:url('../images/event03/title_img.png');width:698px;height:459px;background-repeat:no-repeat;margin-top:20px;} section.event03 .contents_wrapper .present_wrapper{position:relative;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;} section.event03 .contents_wrapper .present_wrapper .txt{position:relative;background-image:url('../images/event03/evt_period.png');width:683px;height:192px;} section.event03 .contents_wrapper .present_wrapper .present_list{position:relative;width:750px;height:299px;display:flex;justify-content:space-between;margin:40px auto 30px auto;padding:0 70px;box-sizing:border-box;} section.event03 .contents_wrapper .present_wrapper .present_list .present{position:relative;width:167px;height:100%;background-size:100%;background-position:center;background-repeat:no-repeat;} section.event03 .contents_wrapper .present_wrapper .present_list .present.p01{background-image:url('../images/event03/present01.png');} section.event03 .contents_wrapper .present_wrapper .present_list .present.p02{background-image:url('../images/event03/present02.png');} section.event03 .contents_wrapper .present_wrapper .present_list .present.p03{background-image:url('../images/event03/present03.png');} section.event03 .contents_wrapper .present_wrapper .present_list .present.p04{background-image:url('../images/event03/present04.png');} section.event03 .contents_wrapper .present_wrapper .present_list .present.p05{background-image:url('../images/event03/present05.png');} section.event03 .contents_wrapper .event_wrapper{position:relative;background-image:url('../images/event03/game_cover.png');width:750px;height:864px;margin:0 auto;padding:110px 0 0 0;box-sizing:border-box;} section.event03 .contents_wrapper .event_wrapper .step_wrapper{position:relative;display:flex;justify-content:center;margin-bottom:20px;} section.event03 .contents_wrapper .event_wrapper .step_wrapper .bg{width:100%;} section.event03 .contents_wrapper .event_wrapper .start{position:relative;display:flex;width:100%;margin:0 auto;flex-direction:column;align-items:center;} section.event03 .contents_wrapper .event_wrapper .start .title{position:absolute;background-image:url('../images/event03/step01.png');width:619px;height:108px;} section.event03 .contents_wrapper .event_wrapper .start .puzzle_content{position:relative;width:680px;margin:0 auto;margin-top:130px;} section.event03 .contents_wrapper .event_wrapper .start .left{position:relative;display:flex;flex-direction:column;align-items:center;} section.event03 .contents_wrapper .event_wrapper .start .left .pic{position:relative;width:472px;height:366px;border-radius:10px;background:#e4ffc8;margin-bottom:10px;display:flex;flex-direction:column;align-items:center;padding:14px 10px;box-sizing:border-box;cursor:pointer;} section.event03 .contents_wrapper .event_wrapper .start .left .pic .card_wrap{position:relative;display:flex;box-sizing:border-box;width:544px;margin:0 auto;left:0;} section.event03 .contents_wrapper .event_wrapper .start .left .pic .card_wrap:nth-child(2){top:113px;} section.event03 .contents_wrapper .event_wrapper .start .left .pic .card_wrap:nth-child(3){top:227px;} section.event03 .contents_wrapper .event_wrapper .start .left .pic .card_wrap > div{position:absolute;} section.event03 .contents_wrapper .event_wrapper .start .left .pic .card_wrap .card01{background-image:url('../images/event03/game01/pic01.png');width:149px;height:148px;} section.event03 .contents_wrapper .event_wrapper .start .left .pic .card_wrap .card02{background-image:url('../images/event03/game01/pic02.png');width:149px;height:148px;left:113px;} section.event03 .contents_wrapper .event_wrapper .start .left .pic .card_wrap .card03{background-image:url('../images/event03/game01/pic03.png');width:115px;height:113px;left:225px;} section.event03 .contents_wrapper .event_wrapper .start .left .pic .card_wrap .card04{background-image:url('../images/event03/game01/pic04.png');width:149px;height:148px;left:304px;} section.event03 .contents_wrapper .event_wrapper .start .left .pic .card_wrap .card05{background-image:url('../images/event03/game01/pic05.png');width:149px;height:150px;} section.event03 .contents_wrapper .event_wrapper .start .left .pic .card_wrap .card06{background-image:url('../images/event03/game01/pic06.png');width:113px;height:115px;left:113px;} section.event03 .contents_wrapper .event_wrapper .start .left .pic .card_wrap .card07{background-image:url('../images/event03/game01/pic07.png');width:184px;height:185px;left:191px;top:-35px;} section.event03 .contents_wrapper .event_wrapper .start .left .pic .card_wrap .card08{background-image:url('../images/event03/game01/pic08.png');width:114px;height:115px;left:339px;} section.event03 .contents_wrapper .event_wrapper .start .left .pic .card_wrap .card09{background-image:url('../images/event03/game01/pic09.png');width:114px;height:113px;} section.event03 .contents_wrapper .event_wrapper .start .left .pic .card_wrap .card10{background-image:url('../images/event03/game01/pic10.png');width:184px;height:148px;left:78px;top:-35px;} section.event03 .contents_wrapper .event_wrapper .start .left .pic .card_wrap .card11{background-image:url('../images/event03/game01/pic11.png');width:115px;height:113px;left:224px;} section.event03 .contents_wrapper .event_wrapper .start .left .pic .card_wrap .card12{background-image:url('../images/event03/game01/pic12.png');width:149px;height:148px;left:303px;top:-35px;} section.event03 .contents_wrapper .event_wrapper .start .left .rdo{position:relative;background-image:url('../images/event03/rdo.png');width:48px;height:48px;margin-right:15px;cursor:pointer;} section.event03 .contents_wrapper .event_wrapper .start .left .rdo.on::before{position:absolute;content:'';background-image:url('../images/event03/chk.png');width:43px;height:43px;left:5px;top:-10px;} section.event03 .contents_wrapper .event_wrapper .start .right{position:relative;display:flex;flex-direction:column;align-items:center;} section.event03 .contents_wrapper .event_wrapper .start .right .pic{position:relative;width:472px;height:366px;border-radius:10px;background:#e4ffc8;margin-bottom:10px;display:flex;flex-direction:column;align-items:center;padding:14px 10px;box-sizing:border-box;cursor:pointer;} section.event03 .contents_wrapper .event_wrapper .start .right .pic .card_wrap{position:relative;display:flex;box-sizing:border-box;width:544px;margin:0 auto;left:0;} section.event03 .contents_wrapper .event_wrapper .start .right .pic .card_wrap:nth-child(2){top:113px;} section.event03 .contents_wrapper .event_wrapper .start .right .pic .card_wrap:nth-child(3){top:227px;} section.event03 .contents_wrapper .event_wrapper .start .right .pic .card_wrap > div{position:absolute;} section.event03 .contents_wrapper .event_wrapper .start .right .pic .card_wrap .card01{background-image:url('../images/event03/game02/pic01.png');width:149px;height:148px;} section.event03 .contents_wrapper .event_wrapper .start .right .pic .card_wrap .card02{background-image:url('../images/event03/game02/pic02.png');width:149px;height:148px;left:113px;} section.event03 .contents_wrapper .event_wrapper .start .right .pic .card_wrap .card03{background-image:url('../images/event03/game02/pic03.png');width:114px;height:113px;left:225px;} section.event03 .contents_wrapper .event_wrapper .start .right .pic .card_wrap .card04{background-image:url('../images/event03/game02/pic04.png');width:149px;height:148px;left:303px;} section.event03 .contents_wrapper .event_wrapper .start .right .pic .card_wrap .card05{background-image:url('../images/event03/game02/pic05.png');width:149px;height:150px;} section.event03 .contents_wrapper .event_wrapper .start .right .pic .card_wrap .card06{background-image:url('../images/event03/game02/pic06.png');width:114px;height:115px;left:113px;} section.event03 .contents_wrapper .event_wrapper .start .right .pic .card_wrap .card07{background-image:url('../images/event03/game02/pic07.png');width:183px;height:185px;left:191px;top:-35px;} section.event03 .contents_wrapper .event_wrapper .start .right .pic .card_wrap .card08{background-image:url('../images/event03/game02/pic08.png');width:114px;height:115px;left:339px;} section.event03 .contents_wrapper .event_wrapper .start .right .pic .card_wrap .card09{background-image:url('../images/event03/game02/pic09.png');width:114px;height:113px;} section.event03 .contents_wrapper .event_wrapper .start .right .pic .card_wrap .card10{background-image:url('../images/event03/game02/pic10.png');width:184px;height:148px;left:78px;top:-35px;} section.event03 .contents_wrapper .event_wrapper .start .right .pic .card_wrap .card11{background-image:url('../images/event03/game02/pic11.png');width:114px;height:113px;left:224px;} section.event03 .contents_wrapper .event_wrapper .start .right .pic .card_wrap .card12{background-image:url('../images/event03/game02/pic12.png');width:149px;height:148px;left:303px;top:-35px;} section.event03 .contents_wrapper .event_wrapper .start .right .rdo{position:relative;background-image:url('../images/event03/rdo.png');width:48px;height:48px;margin-right:15px;cursor:pointer;} section.event03 .contents_wrapper .event_wrapper .start .right .rdo.on::before{position:absolute;content:'';background-image:url('../images/event03/chk.png');width:43px;height:43px;left:5px;top:-10px;} section.event03 .contents_wrapper .event_wrapper .step01{position:relative;display:flex;width:100%;margin:0 auto;flex-direction:column;justify-content:space-between;align-items:center;} section.event03 .contents_wrapper .event_wrapper .step01 .title{position:absolute;background-image:url('../images/event03/step02.png');width:526px;height:50px;} section.event03 .contents_wrapper .event_wrapper .step01 .left{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:70px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic{position:relative;width:472px;height:366px;border-radius:10px;background:#e4ffc8;margin-bottom:10px;display:flex;flex-direction:column;align-items:center;padding:11px 10px;box-sizing:border-box;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic_wrap{position:relative;width:449px;height:337px;background-image:url('../images/event03/game01/bg_game01.png');} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic .card_wrap{position:relative;display:flex;box-sizing:border-box;width:544px;margin:0 auto;left:0;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic .card_wrap:nth-child(2){top:113px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic .card_wrap:nth-child(3){top:227px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic .card_wrap > div{position:absolute;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p01 .card_wrap .card01{border-radius:10px;width:149px;height:148px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p01 .card_wrap .card01.on{background-image:url('../images/event03/game01/pic01.png');width:149px;height:148px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p01 .card_wrap .card02{background-image:url('../images/event03/game01/pic02.png');width:149px;height:148px;left:113px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p01 .card_wrap .card03{background-image:url('../images/event03/game01/pic03.png');width:115px;height:113px;left:225px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p01 .card_wrap .card04{background-image:url('../images/event03/game01/pic04.png');width:149px;height:148px;left:304px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p01 .card_wrap .card05{background-image:url('../images/event03/game01/pic05.png');width:149px;height:150px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p01 .card_wrap .card06{background-image:url('../images/event03/game01/pic06.png');width:113px;height:115px;left:113px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p01 .card_wrap .card07{width:184px;height:185px;left:191px;top:-35px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p01 .card_wrap .card07.on{background-image:url('../images/event03/game01/pic07.png');} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p01 .card_wrap .card08{background-image:url('../images/event03/game01/pic08.png');width:114px;height:115px;left:339px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p01 .card_wrap .card09{width:114px;height:113px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p01 .card_wrap .card09.on{background-image:url('../images/event03/game01/pic09.png');} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p01 .card_wrap .card10{background-image:url('../images/event03/game01/pic10.png');width:184px;height:148px;left:78px;top:-35px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p01 .card_wrap .card11{background-image:url('../images/event03/game01/pic11.png');width:115px;height:113px;left:224px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p01 .card_wrap .card12{width:149px;height:148px;left:303px;top:-35px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p01 .card_wrap .card12.on{background-image:url('../images/event03/game01/pic12.png');} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p02 .card_wrap .card01{background-image:url('../images/event03/game02/pic01.png');width:149px;height:148px;border-radius:10px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p02 .card_wrap .card02{width:149px;height:148px;left:113px} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p02 .card_wrap .card02.on{background-image:url('../images/event03/game02/pic02.png');} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p02 .card_wrap .card03{background-image:url('../images/event03/game02/pic03.png');width:115px;height:113px;left:225px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p02 .card_wrap .card04{background-image:url('../images/event03/game02/pic04.png');width:149px;height:148px;left:304px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p02 .card_wrap .card05{background-image:url('../images/event03/game02/pic05.png');width:149px;height:150px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p02 .card_wrap .card06{background-image:url('../images/event03/game02/pic06.png');width:113px;height:115px;left:113px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p02 .card_wrap .card07{width:184px;height:185px;left:191px;top:-35px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p02 .card_wrap .card07.on{background-image:url('../images/event03/game02/pic07.png');} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p02 .card_wrap .card08{background-image:url('../images/event03/game02/pic08.png');width:114px;height:115px;left:339px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p02 .card_wrap .card09{width:114px;height:113px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p02 .card_wrap .card09.on{background-image:url('../images/event03/game02/pic09.png');} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p02 .card_wrap .card10{background-image:url('../images/event03/game02/pic10.png');width:184px;height:148px;left:78px;top:-35px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p02 .card_wrap .card11{background-image:url('../images/event03/game02/pic11.png');width:115px;height:113px;left:224px} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p02 .card_wrap .card12{width:149px;height:148px;left:303px;top:-35px;} section.event03 .contents_wrapper .event_wrapper .step01 .left .pic.p02 .card_wrap .card12.on{background-image:url('../images/event03/game02/pic12.png');} section.event03 .contents_wrapper .event_wrapper .step01 .right .pic.p01 {position:relative;padding:30px 10px 0 10px;box-sizing:border-box;} section.event03 .contents_wrapper .event_wrapper .step01 .right .pic.p01 > div{position:absolute;cursor:pointer;} section.event03 .contents_wrapper .event_wrapper .step01 .right .pic.p01 > div.on{opacity:.7;} section.event03 .contents_wrapper .event_wrapper .step01 .right .pic.p01 .d01{background-image:url('../images/event03/game01/pic01.png');width:149px;height:148px;left:192px;transform:rotate(45deg)} section.event03 .contents_wrapper .event_wrapper .step01 .right .pic.p01 .d01 .hand{transform:rotate(-45deg);animation:1s p_guide03 infinite linear forwards} section.event03 .contents_wrapper .event_wrapper .step01 .right .pic.p01 .d01.r .hand{transform:rotate(-45deg);animation:1s p_guide03_1 infinite linear forwards} section.event03 .contents_wrapper .event_wrapper .step01 .right .pic.p01 .d02{background-image:url('../images/event03/game01/pic07.png');width:184px;height:185px;left:337px;top:-14px;transform:rotate(45deg)} section.event03 .contents_wrapper .event_wrapper .step01 .right .pic.p01 .d02 .hand{transform:rotate(-45deg);animation:1s p_guide02 infinite linear forwards} section.event03 .contents_wrapper .event_wrapper .step01 .right .pic.p01 .d03{background-image:url('../images/event03/game01/pic09.png');width:114px;height:113px;left:44px;transform:rotate(45deg);top:19px;} section.event03 .contents_wrapper .event_wrapper .step01 .right .pic.p01 .d03 .hand{transform:rotate(-45deg);animation:.7s p_guide01 infinite linear forwards} section.event03 .contents_wrapper .event_wrapper .step01 .right .pic.p01 .d04{background-image:url('../images/event03/game01/pic12.png');width:149px;height:148px;left:545px;top:3px;transform:rotate(-215deg)} section.event03 .contents_wrapper .event_wrapper .step01 .right .pic.p01 .d04 .hand{transform:rotate(215deg);animation:.7s p_guide04 infinite linear forwards} section.event03 .contents_wrapper .event_wrapper .step01 .right .pic.p02 {position:relative;padding:10px 10px;box-sizing:border-box;} section.event03 .contents_wrapper .event_wrapper .step01 .right .pic.p02 > div{position:absolute;cursor:pointer;} section.event03 .contents_wrapper .event_wrapper .step01 .right .pic.p02 .d01{background-image:url('../images/event03/game02/pic02.png');width:149px;height:148px;left:192px;transform:rotate(45deg);top:30px} section.event03 .contents_wrapper .event_wrapper .step01 .right .pic.p02 .d02{background-image:url('../images/event03/game02/pic07.png');width:184px;height:185px;left:337px;top:-14px;transform:rotate(45deg)} section.event03 .contents_wrapper .event_wrapper .step01 .right .pic.p02 .d03{background-image:url('../images/event03/game02/pic09.png');width:114px;height:113px;left:44px;transform:rotate(45deg);top:19px;} section.event03 .contents_wrapper .event_wrapper .step01 .right .pic.p02 .d04{background-image:url('../images/event03/game02/pic12.png');width:149px;height:148px;left:545px;top:3px;transform:rotate(-215deg)} section.event03 .contents_wrapper .event_wrapper .step01 .right{position:relative;display:flex;flex-direction:column;align-items:center;} section.event03 .contents_wrapper .event_wrapper .step01 .right .pic{position:relative;width:700px;height:170px;border-radius:10px;margin-bottom:10px;} section.event03 .contents_wrapper .event_wrapper .step01 .info_txt {position:absolute;width:100%;text-align:center;bottom:-58px;color:#0c2e5f;font-weight:600;font-size:24px;} section.event03 .contents_wrapper .event_wrapper .step_result{position:relative;display:flex;width:100%;margin:0 auto;justify-content:center;} section.event03 .contents_wrapper .event_wrapper .step_result .title{position:absolute;background-image:url('../images/event03/step03.png');width:565px;height:50px;} section.event03 .contents_wrapper .event_wrapper .step_result .result_box_wrapper{position:relative;;margin-top:90px;} section.event03 .contents_wrapper .event_wrapper .step_result .result_box{position:relative;width:580px;height:445px;border: 10px solid rgba(228, 255, 200, 0);border-radius:20px;overflow:hidden;display:flex;justify-content:center;align-items:center;} section.event03 .contents_wrapper .event_wrapper .step_result .result_box .img{position:relative;width:540px;height:405px;background-position:center;background-repeat:no-repeat;z-index:2;border-radius:20px;} section.event03 .contents_wrapper .event_wrapper .step_result .result_box:after{position: absolute;content: "";z-index: 1;width: 200%;height: 250%;left:-40%;top:-30%;background: linear-gradient(#c7e0ad, #8ab588, #93db23);border-radius: 10px;animation: borderAni 5s infinite ease-in-out forwards;overflow:hidden;} section.event03 .contents_wrapper .event_wrapper .step_result .result_box_wrapper .star{position:absolute;background-image:url('../images/event04/star.png');width:244px;height:95px;animation:1s star infinite linear forwards;z-index:5;} section.event03 .contents_wrapper .event_wrapper .step_result .result_box_wrapper .star.one{top:-40px;left:-45px;} section.event03 .contents_wrapper .event_wrapper .step_result .result_box_wrapper .star.two{bottom:-40px;right:-45px;transform:rotate(180deg);} section.event03 .contents_wrapper .event_wrapper .step_result .result_box.r01 .img{background-image:url('../images/event03/puzzle01_complete.png');} section.event03 .contents_wrapper .event_wrapper .step_result .result_box.r02 .img{background-image:url('../images/event03/puzzle02_complete.png');} section.event03 .contents_wrapper .event_wrapper .step_result .btns_wrap{position:absolute;width:100%;left:0;bottom:-190px;display:flex;justify-content:center;} section.event03 .contents_wrapper .event_wrapper .step_result .btns_wrap .btn{position:relative;background-image:url('../images/event03/btn_join.png');width:410px;height:111px;cursor:pointer;} section.event03 .join_info_wrapper {position:absolute;left:0;width:100%;color:#FFFFFF;font-weight:400;bottom:40px;} section.event03 .join_info_wrapper > .join_info {position:relative;width:700px;height:130px;margin:0 auto;background:#409624;border-radius:40px;font-size:36px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;letter-spacing:-1px;line-height:1.3;} section.event03 .join_info_wrapper > .join_info > div{display:inline} section.event03 .join_info_wrapper > .join_info span{font-weight:700;color:#82ffed} section.event03 .join_info_wrapper > .join_info span.num{color:#ffff00} /* 이벤트 03 */ /* 이벤트 04 */ section.event04 {position:relative;width:100%;height:2500px;background-image:url('../images/event04/bg_event04.png');background-position:center center;top:-600px} section.event04 .contents_wrapper {display:block;position:absolute;left:0;top:60px;width:100%;} section.event04 .contents_wrapper .title_wrapper{position:relative;display:flex;justify-content:center;} section.event04 .contents_wrapper .title_wrapper .title{position:relative;background-image:url('../images/event04/title.png');width:631px;height:76px;background-repeat:no-repeat;} section.event04 .contents_wrapper .present_wrapper{position:relative;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;} section.event04 .contents_wrapper .present_wrapper .txt{position:relative;background-image:url('../images/event04/title_img.png');width:705px;height:631px;margin-top:10px;} section.event04 .contents_wrapper .present_wrapper .gtitle{position:relative;background-image:url('../images/event04/g_title.png');width:683px;height:228px;} section.event04 .contents_wrapper .present_wrapper .gtitle > div{position:absolute;display:flex;justify-content:center;align-items:center;font-family:'GmarketSansTTFBold',sans-serif;font-size:60px;color:#FFFFFF;} section.event04 .contents_wrapper .present_wrapper .gtitle > div > .apple{position:absolute;width:58px;height:67px;background-image:url('../images/event04/tapple.png');top:-5px;font-size:39px;display:flex;justify-content:center;align-items:center;padding-top:20px;box-sizing:border-box;left:0;cursor:pointer;background-size:100%;} section.event04 .contents_wrapper .present_wrapper .gtitle > div > .apple.y{background-image:url('../images/event04/y_apple.png');} section.event04 .contents_wrapper .present_wrapper .gtitle > div > .apple.end{background-image:url('../images/event04/apple_end.png');width:66px;height:49px;left:-4px;top:17px;} section.event04 .contents_wrapper .present_wrapper .gtitle .star{position:absolute;background-image:url('../images/event04/star.png');width:244px;height:95px;top:-100px;} section.event04 .contents_wrapper .present_wrapper .gtitle .star.m{top:-95px;} section.event04 .contents_wrapper .present_wrapper .gtitle .app01{top:110px;left:31px;} section.event04 .contents_wrapper .present_wrapper .gtitle .app02{top:130px;left:144px;} section.event04 .contents_wrapper .present_wrapper .gtitle .app03{top:110px;left:258px;} section.event04 .contents_wrapper .present_wrapper .gtitle .app04{top:130px;left:373px;} section.event04 .contents_wrapper .present_wrapper .gtitle .app05{top:110px;left:483px;} section.event04 .contents_wrapper .present_wrapper .gtitle .app06{top:130px;left:593px;} section.event04 .contents_wrapper .present_wrapper .present_list{position:relative;width:100%;height:332px;display:flex;justify-content:space-between;margin:30px auto 28px auto;padding:0 70px;box-sizing:border-box;} section.event04 .contents_wrapper .present_wrapper .present_list .present{position:relative;width:167px;height:100%;background-size:100%;background-position:center;background-repeat:no-repeat;} section.event04 .contents_wrapper .present_wrapper .present_list .present.p01{background-image:url('../images/event04/present01.png');} section.event04 .contents_wrapper .present_wrapper .present_list .present.p02{background-image:url('../images/event04/present02.png');} section.event04 .contents_wrapper .present_wrapper .present_list .present.p03{background-image:url('../images/event04/present03.png');} section.event04 .contents_wrapper .present_wrapper .present_list .present.p04{background-image:url('../images/event04/present04.png');} section.event04 .contents_wrapper .present_wrapper .present_list .present.p05{background-image:url('../images/event04/present05.png');} section.event04 .contents_wrapper .event_wrapper{position:relative;background-image:url('../images/event04/bg_cover.png');width:100%;margin:0 auto;padding:0 0 0 0;box-sizing:border-box;} section.event04 .contents_wrapper .event_wrapper .char{position:relative;background-image:url('../images/event04/people.png');width:332px;height:535px;margin:0 auto;} section.event04 .contents_wrapper .event_wrapper .event_table{position:relative;background-image:url('../images/event04/table.png');width:100%;height:474px;margin:0 auto;top:-200px;} section.event04 .contents_wrapper .event_wrapper .event_table .apple_box{position:absolute;display:flex;overflow:hidden;width:650px;box-sizing:border-box;justify-content:space-between;left:50px;top:-143px;} section.event04 .contents_wrapper .event_wrapper .event_table .apple_box .apple{width:126px;height:145px;background-image:url('../images/event04/apple.png');font-size:61px;font-weight:700;color:#FFFFFF;display:flex;justify-content:center;align-items:center;padding-top:30px;box-sizing:border-box;background-size:100%;} section.event04 .contents_wrapper .event_wrapper .event_table .apple_box .apple.y{background-image:url('../images/event04/y_apple.png');} section.event04 .contents_wrapper .event_wrapper .event_table .start_box{position:relative;display:flex;width:447px;box-sizing:border-box;justify-content:space-between;margin:0 auto;z-index:10;} section.event04 .contents_wrapper .event_wrapper .event_table .start_box .btn_start{background-image:url('../images/event04/start_game_btn.png');width:447px;height:111px;cursor:pointer;margin-top: -2px;} section.event04 .contents_wrapper .event_wrapper .event_table .btns{position:relative;display:flex;width:447px;box-sizing:border-box;justify-content:space-between;top:-10px;margin:0 auto;z-index:10;} section.event04 .contents_wrapper .event_wrapper .event_table .btns .btn_join{background-image:url('../images/event04/join_event_04.png');width:447px;height:111px;cursor:pointer;} section.event04 .contents_wrapper .event_wrapper .event_table .control_box{position:relative;display:flex;overflow:hidden;width:250px;height:57px;box-sizing:border-box;justify-content:space-between;top:21px;margin:0 auto;} section.event04 .contents_wrapper .event_wrapper .event_table .control_box > div{cursor:pointer;} section.event04 .contents_wrapper .event_wrapper .event_table .control_box .prev{background-image:url('../images/event04/btn_prev.png');width:50px;height:57px;} section.event04 .contents_wrapper .event_wrapper .event_table .control_box .next{background-image:url('../images/event04/btn_next.png');width:50px;height:57px;} section.event04 .contents_wrapper .event_wrapper .event_table .control_box .pause{background-image:url('../images/event04/btn_pause.png');width:40px;height:57px;} section.event04 .join_info_wrapper {position:absolute;left:0;width:100%;color:#FFFFFF;font-weight:400;bottom:80px;} section.event04 .join_info_wrapper > .join_info {position:relative;width:700px;height:130px;margin:0 auto;background:#ff8400;border-radius:40px;font-size:36px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;letter-spacing:-1px;line-height:1.3;} section.event04 .join_info_wrapper > .join_info > div{display:inline} section.event04 .join_info_wrapper > .join_info span{font-weight:700;color:#ffea00;} section.event04 .join_info_wrapper > .join_info span.num{color:#6effea} /* 이벤트 04 */ /* 포스터 */ section.poster {position:relative;width:100%;height:1052px;background-image:url('../images/poster/bg_poster_m.jpg');background-position:center;top:-600px} /* 포스터 */ /* 몰 */ section.shop {position:relative;width:100%;height:1315px;background:#d0d0d8;top:-600px} section.shop .contents_wrapper{position:absolute;width:100%;top:80px;display:flex;flex-direction:column;align-items:center;} section.shop .contents_wrapper .title{position:relative;background-image:url('../images/shop/title.png');width:658px;height:40px;} section.shop .contents_wrapper .mall_wrap{position:relative;display:flex;width:100%;flex-direction:column;justify-content:center;margin-top:40px;} section.shop .contents_wrapper .mall_wrap .mall{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:center;margin-bottom:62px;} section.shop .contents_wrapper .mall_wrap .mall:last-child{margin-bottom:0;} section.shop .contents_wrapper .mall_wrap .mall .pic{position:relative;width:599px;height:378px;margin-bottom:30px;} section.shop .contents_wrapper .mall_wrap .mall .btn{position:relative;width:599px;height:89px;cursor:pointer;} section.shop .contents_wrapper .mall_wrap .mall .btn a{display:block;width:100%;height:100%;} section.shop .contents_wrapper .mall_wrap .mall.p01 .pic{background-image:url('../images/shop/pic01.png');} section.shop .contents_wrapper .mall_wrap .mall.p01 .btn{background-image:url('../images/shop/btn_mall01.png');} section.shop .contents_wrapper .mall_wrap .mall.p02 .pic{background-image:url('../images/shop/pic02.png');} section.shop .contents_wrapper .mall_wrap .mall.p02 .btn{background-image:url('../images/shop/btn_mall02.png');} /* 몰 */ /* 프렌드 */ section.friend {position:relative;width:100%;height:896px;background-image:url('../images/friend/bg_friend.png');top:-600px} section.friend .contents_wrapper{position:absolute;width:100%;bottom:0;display:flex;flex-direction:column;align-items:center;} section.friend .contents_wrapper .btn{position:relative;width:535px;height:92px;margin-left:-20px;} section.friend .contents_wrapper .btn a{display:block;width:100%;height:100%;} section.friend .contents_wrapper .btn a .hand{right:20px;} /* 프렌드 */ /* 영상 */ section.movie {position:relative;width:100%;height:920px;background:#9ccb6d;top:-600px;} section.movie .contents_wrapper{position:absolute;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;} section.movie .contents_wrapper .title{position:relative;width:100%;height:56px;margin-bottom:50px;text-align:center;font-size:44px;font-family:'GmarketSansTTFLight',sans-serif;letter-spacing:-2px;} section.movie .contents_wrapper .title span{font-family:'GmarketSansTTFBold',sans-serif;} section.movie .contents_wrapper .youtube_wrap{position:relative;width:640px;height:562px;border-radius:10px;overflow:hidden;} section.movie .contents_wrapper .youtube_wrap iframe{width:100%;height:100%;} /* 영상 */ /* 홈페이지 */ section.homepage {position:relative;width:100%;height:920px;background-image:url('../../images/homepage/bg_homepage.png');background-position:center center;;top:-600px;} section.homepage .contents_wrapper{position:absolute;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;} section.homepage .contents_wrapper .title{position:relative;width:100%;height:101px;font-size:27px;font-family:'GmarketSansTTFMedium',sans-serif;text-align:center;} section.homepage .contents_wrapper .title p {margin-top:5px;line-height:1.3;} section.homepage .contents_wrapper .title p span{font-size:40px;font-family:'GmarketSansTTFBold',sans-serif;letter-spacing:-2px;} section.homepage .contents_wrapper .mall_wrap{position:relative;width:700px;height:352px;background-image:url('../../images/homepage/pic_homepage.png');margin:60px 0 20px 0;background-size:100%;} section.homepage .contents_wrapper .btns_wrap{position:relative;width:432px;} section.homepage .contents_wrapper .btns_wrap .btn{position:relative;width:432px;height:93px;background-image:url('../../images/homepage/btn_home.png');} section.homepage .contents_wrapper .btns_wrap .btn a{display:block;width:100%;height:100%;} /* 홈페이지 */ .pop_evt2_wrapper {position:fixed;left:0;top:0;width:100%;height:100vh;background-color:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:10;} .pop_evt2_wrapper .pop_content_wrapper{position:relative;width:1238px;height:1000px;margin:0 auto;background:#FFFFFF;border-radius:30px;scale:.8} .pop_evt2_wrapper .pop_content_wrapper .close{position:absolute;background-image:url('../images/btn_evt2_close.png');width:54px;height:54px;right:-80px;cursor:pointer;} .pop_evt2_wrapper .pop_content_wrapper .contents{position:relative;display:flex;width:100%;height:100%;border-radius:30px;overflow:hidden;} .pop_evt2_wrapper .pop_content_wrapper .contents .left_part{position:relative;width:588px;height:100%;background:#FED286;display:flex;align-items:center;justify-content:end;} .pop_evt2_wrapper .pop_content_wrapper .contents .left_part .data{position:relative;width:542px;} .pop_evt2_wrapper .pop_content_wrapper .contents .left_part .data .bg{position:absolute;background-image:url('../images/bg_pop_pic.png');width:300px;height:245px;right:0;top:-40px;} .pop_evt2_wrapper .pop_content_wrapper .contents .left_part .data .bg .pic{position:relative;display:flex;justify-content:center;align-items:center;top:45px;} .pop_evt2_wrapper .pop_content_wrapper .contents .left_part .data .txt{position:relative;font-size:46px;margin-bottom:38px;} .pop_evt2_wrapper .pop_content_wrapper .contents .left_part .data .txt p{position:relative;} .pop_evt2_wrapper .pop_content_wrapper .contents .left_part .data .txt p span{font-weight:700;} .pop_evt2_wrapper .pop_content_wrapper .contents .left_part .data .exp{font-weight:500;font-size:21px;color:#000000;line-height:1.4;} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part{position:relative;width:650px;height:100%;display:flex;flex-direction:column;align-items:center;padding:37px 0 0 0;box-sizing:border-box;} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part .r_data{position:relative;display:flex;justify-content:center;flex-direction:column;width:600px;align-items:center;} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part .r_data .title{font-size:24px;text-align:center;margin-bottom:40px;} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part .r_data .title span{font-weight:700;} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part .r_data .exp_wrap{position:relative;padding:54px 0 43px 0;} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part .r_data .exp_wrap .simple{position:relative;font-size:22px;text-align:center;} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part .r_data .exp_wrap .ttl{position:relative;font-size:28px;font-weight:700;text-align:center;} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part .r_data .pic_list_wrap {position:relative;width:100%;} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part .r_data .pic_list_wrap ul{position:relative;display:flex;justify-content:space-between;} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part .r_data .pic_list_wrap ul li{position:relative;width:190px;} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part .r_data .pic_list_wrap ul li .img{position:relative;width:190px;height:125px;} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part .r_data .pic_list_wrap ul li .img.on:before{position:absolute;0;content:'';background-image:url('../images/stamp.png');top:0;left:0;width:100%;height:100%;background-position:center;background-repeat:no-repeat;} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part .r_data .pic_list_wrap ul li .img img{width:100%;height:100%;} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part .r_data .pic_list_wrap ul li .ttl{font-size:18px;font-weight:500;letter-spacing:-1px;padding:5px 0 0 5px;} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part .btns{position:absolute;width:100%;bottom:110px;display:flex;justify-content:center;} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part .btns .btn_join{position:relative;background-image:url('../images/btn_evt2_join.png');width:419px;height:110px;cursor:pointer;} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part .btns .btn_join .hand{display:none;} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part .btns .btn_join.on{background-image:url('../images/btn_evt2_join_on.png');} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part .btns .btn_join.on .hand{display:block;} .pop_evt2_wrapper .pop_content_wrapper .contents .right_part .txt{position:absolute;width:100%;bottom:57px;display:flex;justify-content:center;} .pop_evt2_wrapper .pop_content_wrapper .contents .frame_div {position:absolute;width:100%;height:58%;z-index:99;left:0;top:0;border:5px solid #000;box-sizing:border-box;border-radius:30px;background:#FFFFFF;overflow:hidden;} .pop_evt2_wrapper .pop_content_wrapper .contents .frame_div .pclose{position:absolute;right:10px;top:10px;cursor:pointer;z-index:9;} .pop_evt2_wrapper .pop_content_wrapper .contents .frame_div iframe{width:101%;height:100%;} /* 이벤트 02 */ /* SNS SHARE */ section.snsshare {position:relative;width:100%;height:640px;background:#2e3339;top:-600px;} section.snsshare .content_wrapper {display:block;position:absolute;left:0;width:100%;height:100%;} section.snsshare .content_wrapper > .content_wrap{position:relative;width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:start;align-items:center;} section.snsshare .content_wrapper > .content_wrap > .title{margin-top:70px;margin-bottom:35px;} section.snsshare .content_wrapper > .content_wrap > .sns_wrapper{position:relative;width:659px;height:94px;background-image:url('../images/share_icon.png');margin: 0 auto;} section.snsshare .content_wrapper > .content_wrap > .sns_wrapper > ul{} section.snsshare .content_wrapper > .content_wrap > .sns_wrapper > ul > li{float:left;width:94px;height:94px;margin-right:19px;box-sizing:border-box;} section.snsshare .content_wrapper > .content_wrap > .sns_wrapper > ul > li:last-child{margin-right:0;} section.snsshare .content_wrapper > .content_wrap > .sns_wrapper > ul > li > a{display:block;width:100%;height:100%;text-indent:-9999px;} section.snsshare .content_wrapper > .content_wrap > .line{height:1px;width:1618px;background:#585c61;display: none;} /* 참여 정보 */ section.snsshare .sec-join-info {position:absolute;width:100%;bottom:0;height:235px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#222218;font-weight:300;font-size:35px;background-color:#54585d;color:#FFFFFF;margin:0 0 0 0;line-height:1.1;} section.snsshare .sec-join-info > div:nth-child(3){margin-top:5px;} section.snsshare .sec-join-info > div > span {font-size:54px;font-weight:900;} section.snsshare .sec-join-info > div > span.j_visitor {color:#ffdf00;} section.snsshare .sec-join-info > div > span.j_join {color:#FFFFFF} /* 참여 정보 */ /* SNS */ /* 참여 정보 */ section.sec-copyright {position:relative;width:100%;display:flex;flex-direction:column;align-items:center;background:#d5d6d7;color:#2e3339;font-size:23px;top:-600px;} section.sec-copyright > .copyright {width:100%;} section.sec-copyright > .copyright ul{} section.sec-copyright > .copyright ul li{width:100%;text-align:center;} section.sec-copyright > .copyright ul li:nth-child(1){margin-bottom:15px;} section.sec-copyright > .copyright ul li:nth-child(2){margin-bottom:45px;} section.sec-copyright > .copyright ul li:nth-child(3){margin-bottom:15px;} section.sec-copyright > .copyright ul li:nth-child(4){font-size:20px;color:#96999d;} /* 고정 메뉴 */ .navigator_wrapper {position:fixed;left:0;bottom:0;width:100%;height:110px;z-index:11; bottom: 0; } .navigator_wrapper .cont_wrap {width:100%;margin:0 auto;background-image:url('../images/bg_nav.png');height:100%;overflow:hidden;background-position:center;} .navigator_wrapper .cont_wrap .navi_wrap {width:100%;margin:0 auto;height:100%;display:flex;justify-content:start;align-items:center;} .navigator_wrapper .cont_wrap .navi_wrap > li{position:relative;box-sizing:border-box;height:100%;display:flex;justify-content:center;align-items:center;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_menu{position:relative;width:36px;height:30px;cursor:pointer;z-index:3;background-image:url('../images/allmenu.png');background-repeat:no-repeat;} .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(1) {width:72px;} .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(2) {width:150px;} .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(3) {width:153px;} .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(4) {width:155px;} .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(5) {width:150px;} .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(6) {width:74px;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tabs{background-position:center;background-repeat:no-repeat;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab01{background-image:url('../images/nav01.png');background-size:69px 68px;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab02{background-image:url('../images/nav02.png');background-size:87px 68px;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab03{background-image:url('../images/nav03.png');background-size:105px 66px;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab04{background-image:url('../images/nav04.png');background-size:105px 66px;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab01.result{background-image:url('../images/nav01on.png');background-size:73px 79px;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab02.result{background-image:url('../images/nav02on.png');background-size:82px 84px;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab03.result{background-image:url('../images/nav03on.png');background-size:108px 86px;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab04.result{background-image:url('../images/nav04on.png');background-size:99px 86px;} .navigator_wrapper .cont_wrap .navi_wrap > li > div {position:relative;width:100%;height:100%;} .navigator_wrapper .cont_wrap .navi_wrap > li > div > a{display:block;width:100%;height:100%;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_top{position:absolute;background-image:url('../images/top.png');width:63px;height:63px;cursor:pointer;background-repeat:no-repeat;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_top:hover{background-image:url('../images/top.png');} .navigator_wrapper .cont_wrap .navi_wrap > li:last-child {margin-right:0;} .n_menu_list {position:fixed;bottom:-800px;z-index:99;background:#263E99;width:500px;box-sizing:border-box;font-size:22px;} .n_menu_list.on {bottom:0;} .n_menu_list > .n_menu.close {float:right;background-image:url('../images/gnb_close.png');width:46px;height:46px;display:inline-block;margin-top:13px;margin-right:20px;cursor:pointer;} .n_menu_list > .m_list {width:100%;display:flex;flex-wrap:wrap;padding:0 0 0 0;box-sizing:border-box;text-align:center;display:flex;flex-direction:column;} .n_menu_list > .m_list a {color:#FFFFFF;} .n_menu_list > .m_list div {border-bottom:2px solid #D9D9D9;width:433px;margin:0 auto;padding:15px 0;} .n_menu_list > .m_list a:last-child div{border-bottom:0;} .n_menu_list > .m_list div > span {display:flex;cursor:pointer;position:relative;width:433px;height:80px;line-height:1.4;align-items:center;justify-content:start;text-align:left;padding-left:20px;box-sizing:border-box;} .n_menu_list > .m_list div > span a{display:block;font-size:23px;color:#FFFFFF;font-weight:500;letter-spacing:-.5px;text-align:left;} .n_menu_list > .m_list div > span {position:relative;} .n_menu_list > .m_list div > span::after {content:'';width:80px;height:80px;position:absolute;left:10px;top:0;} .n_menu_list > .m_list div.on {background-color:rgba(255,255,255,.1);} /* 고정 메뉴 */ /* 기타 */ .join_info_wrapper {position:absolute;bottom:0;width:100%;text-align:center;} .join_info_wrapper.evt01 {bottom:150px;} .join_info_wrapper.evt01 .join_info{background:#dbf7da;border-radius:50px;color:#333333;display:inline-block;padding:0 30px;font-size:24px;height:92px;line-height:92px;vertical-align:middle;border:2px solid #3fa03b;} .join_info_wrapper.evt02 {bottom:124px;} .join_info_wrapper.evt02.result {bottom:30px;} .join_info_wrapper.evt02 .join_info{background:#bdddf3;border-radius:40px;color:#071b28;display:inline-block;padding:0 30px;font-size:22px;height:63px;line-height:63px;vertical-align:middle;} .join_info_wrapper.evt03 {bottom:150px;} .join_info_wrapper.evt03 .join_info{background:#3bd368;border-radius:40px;color:#071b28;display:inline-block;padding:0 30px;font-size:22px;height:63px;line-height:63px;vertical-align:middle;} .join_info_wrapper .join_info span.num{font-size:40px;color:#125400;font-weight:900;} .join_info_wrapper .join_info span.b{font-size:27px;font-weight:700;} .hand {position:absolute;bottom:-10px;right:-20px;z-index:5;animation:zoom 1s ease-in-out infinite;animation-delay:0.5s;animation-duration:1s;width:70px;height:84px;background-image:url(../images/hand.png);} .hand.mv01 {animation:move_center01 1.7s ease-in-out infinite forwards;} .hand.mv02 {animation:move_center02 1.7s ease-in-out infinite forwards;} .hand.mv03 {animation:move_center03 1.7s ease-in-out infinite forwards;} .hand.mv04 {animation:move_center04 1.7s ease-in-out infinite forwards;} .hand.move {position:absolute;bottom:-38px;right:20px;z-index:5;animation:move_left 1s ease-in-out infinite;animation-delay:0.5s;animation-duration:1s;width:96px;height:91px;background-image:url(../images/hand.png);} .hand.move2 {position:absolute;bottom:-38px;right:20px;z-index:5;animation:move_left 1s ease-in-out 2 forwards;animation-delay:0.5s;animation-duration:1s;width:96px;height:91px;background-image:url(../images/hand.png);} .hand01 {position:absolute;top:200px;left:200px;z-index:5;animation:zoom 1s ease-in-out infinite;animation-delay:0.5s;animation-duration:1s;width:96px;height:91px;background-image:url(../images/hand.png);} .hand.on {opacity:1;} .hand.go1_1 {animation:zoom 1s ease-in-out infinite forwards;} .hand.go1_2 {animation:zoom 1.5s ease-in-out infinite forwards;} .hand.go1_3 {animation:zoom 1.5s ease-in-out infinite forwards;} .hand.go2_1 {animation:zoom 1.5s ease-in-out infinite forwards;} .hand.go2_2 {animation:zoom 1.5s ease-in-out infinite forwards;} .hand.go2_3 {animation:zoom 1.5s ease-in-out infinite forwards;} .hand.go3_1 {animation:zoom 1.5s ease-in-out infinite forwards;} .hand.go3_2 {animation:zoom 1.5s ease-in-out infinite forwards;} .hand.go3_3 {animation:zoom 1.5s ease-in-out infinite forwards;} #r_title1 span{#ff5400} #r_title2 span{#feaf18} #r_title3 span{#1d7b07} .result_wrap {position:absolute;width:100%;text-align:center;bottom:100px;} .result_wrap > .btn.event_result2{width:463px;height:122px;display:inline-block;background-image:url('../images/event2_done.png');} .result_wrap > .btn.event_result2 > a {display:block;width:100%;height:100%;} /* 슬라이드 */ .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: transparent; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide img {width:100%;} .cardNewsSwiper.citySwiper swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .wallSwiper.citySwiper swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .swiper-button-disabled {opacity:.2;} .cont_wrap {width:1200px;margin:0 auto;position:relative;} a:focus {outline:none;} .cardnew-swiper-button-prev {position:absolute;background-image:url('../images/cardnews/btn_prev.png');width:70px;height:70px;left:-110px;top:315px;cursor:pointer;} .cardnew-swiper-button-next {position:absolute;background-image:url('../images/cardnews/btn_next.png');width:70px;height:70px;right:-110px;top:315px;cursor:pointer;} .bounce1 {animation: bounce1 2s;} .bounce2 {animation: bounce2 1s;} .bounce3 {animation: bounce3 1s;} .kb_hand {position:absolute;background-image:url('../images/hand_ani.png');scale:.8;width:102px;height:96px;animation: vmove 1.5s infinite;animation-direction: reverse;animation-iteration-count: 3;z-index:999;bottom:0px;left:40px;} .b_hand {position:absolute;right:-50px;bottom:-20px;background-image:url('../images/hand_ani.png');width:102px;height:96px;animation: blink 1s infinite;} .b_hand.com {right:0;bottom:5px;zoom:.7;} .qb_hand {position:absolute;right:-50px;bottom:-20px;background-image:url('../images/hand_ani.png');width:102px;height:96px;animation: blink 1s infinite;} .qb_hand.hide {display:none;} .qb_hand.evt3 {display:none;} .hide {display:none !important;} .present_wrap .swiper-slide img {width:100%;} .j_wrap01{} .j_wrap02{margin-top:35px;} .j_wrap01 .swiper-slide{width:487px;height:120px;border-radius:60px;color:#004819;font-size:40px;font-weight:bold;display:flex;justify-content:center;align-items:center;} .j_wrap01 .swiper-slide:nth-child(1n+1){background-image: linear-gradient(#FFFFFF, #FFFFFF);} .j_wrap01 .swiper-slide:nth-child(2n+2){background-image: linear-gradient(#FFFFFF, #FFFFFF);} .j_wrap01 .swiper-slide:nth-child(3n+3){background-image: linear-gradient(#FFFFFF, #FFFFFF);} .puzzleSwiper {width: 100%; height: 100%;} .puzzleSwiper .swiper-slide {width:474px;text-align: center; font-size: 18px; display: flex; justify-content: center; align-items: center;} .puzzleSwiper .swiper-slide:nth-child(1) {} .puzzle_content .swiper-pagination-bullet { width: 50px; height: 50px; text-align: center; line-height: 50px; font-size: 28px; font-weight: 700; } .puzzle_content .swiper-pagination-bullet-active { background: #ffff4e; color: #0c2e5f !important; font-weight: 700 !important; } .presentSwiper {width: 100%; height: 100%;} .presentSwiper .swiper-slide {width:167px !important;text-align: center; font-size: 18px; display: flex; justify-content: center; align-items: center;} /* popup */ html.on { height:100%; overflow:hidden; } .pu_bg { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); z-index:98; display:none; } .pu { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); z-index:99; display:none; } .pu .bt_close { position:absolute; top:0; right:-60px; width:48px; height:48px; background:url(../images/bt_pu_close.png?v=1) no-repeat 0 0; text-indent:-9999px; } .pu_event_youtube { width:800px; background:#fff;border-radius:15px;display:none; } .pu_event_youtube .p_con { position:relative; } .pu_event_youtube .p_con iframe {width:800px;height:450px;} .pu_event_info { width:650px; display:none; border:6px solid #726a55;border-radius:40px;padding:30px 30px;box-sizing:border-box;font-size:20px;background:#FFFFFF;color:#000;font-weight:600;} .pu_event_info a.bt_close{position:absolute;background-image:url('../images/event01/pop_close.png');width:104px;height:110px;right:-50px;top:-50px;cursor:pointer;} .pu_event_info .item_wrapper {display:flex;flex-direction:column;} .pu_event_info .item_wrapper .item{display:flex;align-items:end;margin-bottom:10px;} .pu_event_info .item_wrapper .item.privacy{display:flex;flex-direction:column;align-items:start;margin-bottom:0;} .pu_event_info .item_wrapper .item .ttl{width:135px;} .pu_event_info .item_wrapper .item .ipt{display:flex;width:430px;align-items:center;} .pu_event_info .item_wrapper .item .ipt.hp{justify-content:space-between;} .pu_event_info .item_wrapper .item .ipt input[type=text]{height:34px;line-height:34px;text-align:center;} .pu_event_info .item_wrapper input[type=checkbox]{width:25px;height:22px;} .pu_event_info .item_wrapper .item .ipt.hp input[type=text]{width: 30% !important;} .pu_event_info .item_wrapper .item .p_ttl {margin-bottom:17px;margin-top:10px;} .pu_event_info .item_wrapper .item .p_cont {display:flex;flex-direction:column;} .pu_event_info .item_wrapper .item .p_cont .pitem{display:flex;margin-bottom:20px;flex-direction:column;} .pu_event_info .item_wrapper .item .p_cont .pitem:last-child{margin-bottom:10px;} .pu_event_info .item_wrapper .item .p_cont .pitem .ttl{width:100%;} .pu_event_info .item_wrapper .item .p_cont .pitem .txt{width:100%;line-height:1.5;font-size:18px;font-weight:400} .pu_event_info .item_wrapper .item .p_cont.row {flex-direction:row;width:100%;justify-content:space-between} .pu_event_info .item_wrapper .item .p_cont.row .pitem{display:flex;flex-direction:column;width:49.5%;justify-content:center;align-items:center;background:#e8e8e8;height:100px;} .pu_event_info .item_wrapper .item .p_cont.row .pitem .ttl{width:100%;text-align:center;} .pu_event_info .item_wrapper .item .p_cont.row .pitem .txt{width:100%;text-align:center;} .pu_event_info .btns {width:100%;display:flex;justify-content:center;} .pu_event_info .btns a{font-family:'GmarketSansTTFLight',sans-serif;border-radius:9999px;width:240px;height:49px;font-size:20px;display:flex;justify-content:center;align-items:center;color:#FFFFFF;} .pu_event_info .btns a.bt_participate_done {background:#726a55;;margin-right:10px;} .pu_event_info .btns a.bt_cancel {background:#979797;} .pu_event_info .radiob input[type="radio"] { position:absolute; top:0; left:0; opacity:0; -webkit-opacity:0; } .pu_event_info .radiob input[type="radio"] + label:after { content:' '; display:inline-block; width:33px; height:35px; line-height:35px; margin:-10px 0 0 10px; text-align:center; vertical-align:middle; background:url(../images/radio.png) no-repeat 0 4px; } .pu_event_info .radiob input[type="radio"]:checked + label:after { background:url(../images/radio-on.png) no-repeat 0 4px; } .pu_event_done { overflow:hidden; display:none;} .pu_event_done .btn a { display:block; line-height:96px; text-align:center; font-size:30px; color:#fff; font-weight:800; letter-spacing:10px; } .pu_event_done .btn a img{width:100%;} .tc {text-align:center;} .htmlWrapper section.visual_wrapper .contents_wrap .stage_wrapper .apple_mid{ position: absolute; background-image: url('../images/visual/apple.png'); width: 205px; height: 170px; right: 50%; bottom: 67px; transform: translate(50% , 0); z-index: 5; } .judarigi { position: absolute; background-image: url('../images/visual/judarigi.png'); width: 115px; height: 83px; right: 70px; top: 970px; } section.event03 .contents_wrapper .event_wrapper .puzzle { background-image: url('../images/event03/puzzle.png'); width: 386px; height: 88px; position: absolute; bottom:100px; left:65px; } section.event03 .contents_wrapper .event_wrapper .water_apple { background-image: url('../images/event03/water_apple.png'); width: 200px; height: 197px; position: absolute; bottom:10px; right:10px; z-index: 10; } .info_num_pop {position:fixed;left:0;top:0;width:100%;height:100vh;display:flex;justify-content:center;align-items:center;align-items:center;z-index:999;background-color:rgba(0,0,0,.7);} .info_num_pop .info_num{position:relative;width:700px;height:520px;background-image:url('../../images/info_num.jpg');} .info_num_pop .info_num .close{position:absolute;width:46px;height:46px;background-image:url('../../images/gnb_close.png');right:0;top:-50px;cursor:pointer;}