event01.js@font-face { font-family: 'KblJump'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-5@1.0/KBLJump_RTTF.woff2') format('woff2'); font-weight: normal; font-display: swap; } @font-face { font-family: 'Cafe24Ssurround'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'GMarketSansBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: 300; font-display: swap; } @font-face { font-family: 'GMarketSans'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: 500; font-display: swap; } @font-face { font-family: 'SchoolSafetyNotification'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimAllimjangTTF-R.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'SchoolSafetyNotification'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimAllimjangTTF-B.woff2') format('woff2'); font-weight: 700; font-display: swap; } body {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;min-width: 1400px;background-color: #d5d6d7;} body::after { position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; content: url('../images/event01/tab01_on.png') url('../images/event01/tab02_on.png') url('../images/event01/tab03_on.png') url('../images/river/bg01.jpg') url('../images/river/bg02.jpg') url('../images/river/bg03.jpg') url('../images/river/bg04.jpg') url('../images/river/bg05.jpg') url('../images/river/bg06.jpg') url('../images/event02/puzzle01/complete.png?v=1') url('../images/event02/puzzle02/complete.png?v=1') url('../images/event02/puzzle03/complete.png?v=1') url('../images/event03/pic01.png') url('../images/event03/pic02.png') url('../images/event03/pic03.png') url('../images/event03/pic04.png') url('../images/event03/pic05.png') url('../images/event03/pic06.png') url('../images/event03/pic07.png'); } .htmlWrapper {width: 100%;max-width: 1920px;margin: 0 auto;padding-bottom: 88px;position: relative;overflow: hidden;} .htmlWrapper section {background-position: center;min-width: 1400px;} div:focus{outline:none;} body, h1, h2, h3, h4, input, select, button, textarea {font-family:'Pretendard',sans-serif;} /* 상단 */ .htmlWrapper section.top_wrapper { position: relative;display: flex;justify-content: center;align-items: center; width: 100%;height: 50px;box-sizing: border-box;z-index: 1;background: #FFFFFF; font-size: 20px;overflow: visible; } .quick_wrapper {position:fixed;top:0;right:0;z-index:9;display:none;} .quick_wrapper .quick_cont_wrap{position:relative;} .quick_wrapper .quick_cont_wrap .quick_cont_wrapper{position:relative;display:block;width:270px;background:#04183C;border-bottom-left-radius: 13px;} .quick_wrapper .quick_cont_wrap .quick_cover{position:relative;display:flex;align-items:center;justify-content:space-between;width:270px;height:60px;background:#04183C;padding:10px 10px;box-sizing: border-box;border-bottom-left-radius: 13px;} .quick_wrapper .quick_cont_wrap.on .quick_cover{border-bottom-left-radius: 0;} .quick_wrapper .quick_cont_wrap .quick_cover .ttl{position:relative;width:144px;height:44px;background-image: url('../images/quick/title.png');} .quick_wrapper .quick_cont_wrap .quick_cover .btn_gnb_menu{position:relative;width:88px;height:35px;background-image: url('../images/quick/quick_menu_close.png');cursor:pointer;} .quick_wrapper .quick_cont_wrap .quick_cover.on .btn_gnb_menu{background-image: url('../images/quick/quick_menu_open.png');} .quick_wrapper .quick_cont_wrap .quick_cover_wrapper{position:relative;width:270px;height:0;overflow:hidden;} .quick_wrapper .quick_cont_wrap.on .quick_cover_wrapper{height:auto;} .quick_wrapper .quick_cont_wrap .quick_cont_wrapper{position:relative;width:270px;top:-600px;transition: .5s all;} .quick_wrapper .quick_cont_wrap.on .quick_cont_wrapper{top:0;transition: .5s all;} .quick_wrapper .quick_cont_wrapper .quick_cont{position:relative;width:270px;display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:8px 0;box-sizing:border-box;} .quick_wrapper .quick_cont_wrapper .quick_cont .title{position:relative;width:250px;} .quick_wrapper .quick_cont_wrap .quick_cover .btn_gnb_menu{width:88px;height:35px;background-image: url('../images/quick/quick_menu_open.png');} .quick_wrapper .quick_cont_wrap.on .quick_cover .btn_gnb_menu{background-image: url('../images/quick/quick_menu_close.png');} .quick_wrapper .quick_cont_wrapper .quick_cont .title .gnb_close{position:absolute;width:32px;height:32px;cursor:pointer;right:10px;top:10px;} .quick_wrapper .quick_cont_wrapper .quick_cont .banner{position:relative;width:250px;height:70px;} .quick_wrapper .quick_cont_wrapper .quick_cont .banner a{display:block;width:100%;height:100%;} .quick_wrapper .quick_cont_wrapper .quick_cont .banner.b01{background-image: url('../images/quick/banner01.png');} .quick_wrapper .quick_cont_wrapper .quick_cont .banner.b02{background-image: url('../images/quick/banner02.png');} .quick_wrapper .quick_cont_wrapper .quick_cont .banner.b03{background-image: url('../images/quick/banner03.png');} .quick_wrapper .quick_cont_wrapper .quick_cont .banner.b04{background-image: url('../images/quick/banner04.png');} .quick_wrapper .quick_cont_wrapper .quick_cont .banner.b05{background-image: url('../images/quick/banner05.png');} .quick_wrapper .quick_cont_wrapper .quick_cont .banner.b06{background-image: url('../images/quick/banner06.png');} .htmlWrapper section.top_wrapper > .hx_top {position: relative;height: 100%;display: flex;justify-content: center;align-items: center;gap: 0 5px;color: #888888;} .htmlWrapper section.top_wrapper > .hx_top span {font-size: 24px;font-weight: 800;color: #222222;font-family: 'ONE-Mobile-Title';} .htmlWrapper section.top_wrapper > .hx_top span a {display: flex;} .htmlWrapper section.top_wrapper > .hx_top b {color: #000;font-size:22px;} .htmlWrapper section.top_wrapper > .hx_top i {margin-top: 3px;margin-right: 10px;} .htmlWrapper section.top_wrapper > .hx_top .com_logo {margin-top:-7px;} .htmlWrapper section.top_wrapper > .hx_top div.ment {margin-top: -5px;} .htmlWrapper section.top_wrapper > .hx_top span.txt {position:relative;top:3px;font-size:20px;color:#888888;font-weight:500;} .htmlWrapper section.top_wrapper > .hx_top .hx_txt {position: absolute;top: 40px;} /* Visual */ .htmlWrapper section.visual_wrapper {position: relative;width: 100%;height: 880px;background-image:url('../images/visual/bg.jpg');background-position: center;overflow: hidden;} .htmlWrapper section.visual_wrapper .contents_wrapper{position: relative;width: 100%;height: 100%;display:flex;justify-content: center;align-items:start;} .htmlWrapper section.visual_wrapper .contents_wrapper .s_logo{position:absolute;background-image:url('../images/logo_seoul.png');width:148px;height:24px;top:40px;right:46px;} .htmlWrapper section.visual_wrapper .contents_wrapper .title{background-image:url('../images/visual/title.png');width:744px;height:210px;margin:70px 0 0 0;} .htmlWrapper section.visual_wrapper .contents_wrapper .graph_wrapper{position:absolute;left:0;bottom:130px;width:1819px;height:297px;} .htmlWrapper section.visual_wrapper .contents_wrapper .graph_wrapper .graph_wrap{position:relative;width:100%;height:100%;} .htmlWrapper section.visual_wrapper .contents_wrapper .graph_wrapper .graph_wrap .place01{position:absolute;width:194px;height:188px;left:212px;top:-170px;opacity:0;} .htmlWrapper section.visual_wrapper .contents_wrapper .graph_wrapper .graph_wrap .place01 > div{position:relative;width:100%;height:100%;background-image: url('../images/visual/place01.png');} .htmlWrapper section.visual_wrapper .contents_wrapper .graph_wrapper .graph_wrap .place02{position:absolute;width:140px;height:196px;left:505px;top:-140px;opacity:0;} .htmlWrapper section.visual_wrapper .contents_wrapper .graph_wrapper .graph_wrap .place02 > div{position:relative;width:100%;height:100%;background-image: url('../images/visual/place02.png');} .htmlWrapper section.visual_wrapper .contents_wrapper .graph_wrapper .graph_wrap .place03{position:absolute;width:130px;height:190px;left:780px;top:-90px;opacity:0;} .htmlWrapper section.visual_wrapper .contents_wrapper .graph_wrapper .graph_wrap .place03 > div{position:relative;width:100%;height:100%;background-image: url('../images/visual/place03.png');} .htmlWrapper section.visual_wrapper .contents_wrapper .graph_wrapper .graph_wrap .place04{position:absolute;width:157px;height:190px;left:1043px;top:-97px;opacity:0;} .htmlWrapper section.visual_wrapper .contents_wrapper .graph_wrapper .graph_wrap .place04 > div{position:relative;width:100%;height:100%;background-image: url('../images/visual/place04.png');} .htmlWrapper section.visual_wrapper .contents_wrapper .graph_wrapper .graph_wrap .place05{position:absolute;width:182px;height:190px;left:1303px;top:-127px;opacity:0;} .htmlWrapper section.visual_wrapper .contents_wrapper .graph_wrapper .graph_wrap .place05 > div{position:relative;width:100%;height:100%;background-image: url('../images/visual/place05.png');} .htmlWrapper section.visual_wrapper .contents_wrapper .graph_wrapper .graph_wrap .place06{position:absolute;width:151px;height:190px;left:1563px;top:-161px;opacity:0;} .htmlWrapper section.visual_wrapper .contents_wrapper .graph_wrapper .graph_wrap .place06 > div{position:relative;width:100%;height:100%;background-image: url('../images/visual/place06.png');} .htmlWrapper section.visual_wrapper .contents_wrapper .graph_wrapper .graph_wrap > div.on{animation:place_on 1s linear forwards;} .htmlWrapper section.visual_wrapper .contents_wrapper .point_wrapper{position:absolute;left:0;bottom:0;width:1819px;height:297px;} .htmlWrapper section.visual_wrapper .contents_wrapper .point_wrapper .point_wrap{position:relative;width:100%;height:100%;} .htmlWrapper section.visual_wrapper .contents_wrapper .point_wrapper .point_wrap .point {position: absolute;left:0;width: 59px;height: 59px;background: url('../images/visual/point.png') no-repeat center center;background-size: contain;offset-path: path('M-21.5 169.268H217.782L239 98.234L250 127.234L261 120.234L270 165.234L306 12.234L332 254.234L357 141.234L369 169.234H502L523 128.234L534 166.234L546 151.234L560 199.234L578 47.234L596 232.234L621 152.234L636 169.234H751L771 164.234L787 203.234L799 184.234L824 226.234L850 87.234L865 259.234L880 144.234L894 164.234L904 123.234L921 169.268L1054 169.234L1070 123.234L1082 154.234L1093 140.234L1103 175.234L1122 77.234L1136 233.234L1153 136.234L1172 169.234H1330L1341 140.234L1348 155.234L1360 126.234L1372 141.234L1394 47.234L1417 229.234L1432 146.234L1441 174.234L1450 161.234L1460 169.268H1575L1588 116.234L1596 154.234L1606 140.234L1618 186.234L1640 12.234L1661 259.234L1682 126.234L1701 202.234L1715 169.268L1784 169.234');} .dline01 {stroke-dasharray: 4833.2;stroke-dashoffset: 4833.2;animation: drawPath01 2s linear forwards;} .dline02 {stroke-dasharray: 4833.2;stroke-dashoffset: 4833.2;animation: drawPath02 2s linear forwards;} .dline03 {stroke-dasharray: 4833.2;stroke-dashoffset: 4833.2;animation: drawPath03 2s linear forwards;} .dline04 {stroke-dasharray: 4833.2;stroke-dashoffset: 4833.2;animation: drawPath04 2s linear forwards;} .dline05 {stroke-dasharray: 4833.2;stroke-dashoffset: 4833.2;animation: drawPath05 2s linear forwards;} .dline06 {stroke-dasharray: 4833.2;stroke-dashoffset: 4833.2;animation: drawPath06 2s linear forwards;} .dline07 {stroke-dasharray: 4833.2;stroke-dashoffset: 4833.2;animation: drawPath07 1s linear forwards;} .htmlWrapper section.visual_wrapper .contents_wrapper .point_wrapper .point_wrap .point.step01{animation: moveParticle01 2s linear forwards;} .htmlWrapper section.visual_wrapper .contents_wrapper .point_wrapper .point_wrap .point.step02{animation: moveParticle02 2s linear forwards;} .htmlWrapper section.visual_wrapper .contents_wrapper .point_wrapper .point_wrap .point.step03{animation: moveParticle03 2s linear forwards;} .htmlWrapper section.visual_wrapper .contents_wrapper .point_wrapper .point_wrap .point.step04{animation: moveParticle04 2s linear forwards;} .htmlWrapper section.visual_wrapper .contents_wrapper .point_wrapper .point_wrap .point.step05{animation: moveParticle05 2s linear forwards;} .htmlWrapper section.visual_wrapper .contents_wrapper .point_wrapper .point_wrap .point.step06{animation: moveParticle06 2s linear forwards;} .htmlWrapper section.visual_wrapper .contents_wrapper .point_wrapper .point_wrap .point.step07{animation: moveParticle07 1s linear forwards;} /* 한강 */ section.river {position: relative;width: 100%;height: 999px;transition: .5s all} section.river.t01 {background-image: url('../images/river/bg01.jpg');} section.river.t02 {background-image: url('../images/river/bg02.jpg');} section.river.t03 {background-image: url('../images/river/bg03.jpg');} section.river.t04 {background-image: url('../images/river/bg04.jpg');} section.river.t05 {background-image: url('../images/river/bg05.jpg');} section.river.t06 {background-image: url('../images/river/bg06.jpg');} section.river .contents_wrapper {display: flex;flex-direction: column;width: 100%;height: 100%;align-items: center;justify-content: start;padding:120px 0 0 0;box-sizing: border-box;gap:20px 0;} section.river .contents_wrapper .title {} section.river .contents_wrapper .cont_wrap {position:relative;width:1300px;display:flex;flex-direction: column;align-items: center;gap:8px 0;} section.river .contents_wrapper .cont_wrap .tabs_wrap {position:relative;height:80px;display:flex;gap:0 8px;justify-content: center;} section.river .contents_wrapper .cont_wrap .tabs_wrap .tab{position:relative;width:210px;height:100%;background-position: center bottom;background-repeat: no-repeat;cursor:pointer;} section.river .contents_wrapper .cont_wrap .tabs_wrap .tab.t01{background-image: url('../images/river/tab01.png');} section.river .contents_wrapper .cont_wrap .tabs_wrap .tab.t01:hover{background-image: url('../images/river/tab01_on.png');transition: .2s all;} section.river .contents_wrapper .cont_wrap .tabs_wrap .tab.t01.on{background-image: url('../images/river/tab01_on.png');transition: .2s all;} section.river .contents_wrapper .cont_wrap .tabs_wrap .tab.t02{background-image: url('../images/river/tab02.png');} section.river .contents_wrapper .cont_wrap .tabs_wrap .tab.t02:hover{background-image: url('../images/river/tab02_on.png');transition: .2s all;} section.river .contents_wrapper .cont_wrap .tabs_wrap .tab.t02.on{background-image: url('../images/river/tab02_on.png');transition: .2s all;} section.river .contents_wrapper .cont_wrap .tabs_wrap .tab.t03{background-image: url('../images/river/tab03.png');} section.river .contents_wrapper .cont_wrap .tabs_wrap .tab.t03:hover{background-image: url('../images/river/tab03_on.png');transition: .2s all;} section.river .contents_wrapper .cont_wrap .tabs_wrap .tab.t03.on{background-image: url('../images/river/tab03_on.png');transition: .2s all;} section.river .contents_wrapper .cont_wrap .tabs_wrap .tab.t04{background-image: url('../images/river/tab04.png');} section.river .contents_wrapper .cont_wrap .tabs_wrap .tab.t04:hover{background-image: url('../images/river/tab04_on.png');transition: .2s all;} section.river .contents_wrapper .cont_wrap .tabs_wrap .tab.t04.on{background-image: url('../images/river/tab04_on.png');transition: .2s all;} section.river .contents_wrapper .cont_wrap .tabs_wrap .tab.t05{background-image: url('../images/river/tab05.png');} section.river .contents_wrapper .cont_wrap .tabs_wrap .tab.t05:hover{background-image: url('../images/river/tab05_on.png');transition: .2s all;} section.river .contents_wrapper .cont_wrap .tabs_wrap .tab.t05.on{background-image: url('../images/river/tab05_on.png');transition: .2s all;} section.river .contents_wrapper .cont_wrap .tabs_wrap .tab.t06{background-image: url('../images/river/tab06.png');} section.river .contents_wrapper .cont_wrap .tabs_wrap .tab.t06:hover{background-image: url('../images/river/tab06_on.png');transition: .2s all;} section.river .contents_wrapper .cont_wrap .tabs_wrap .tab.t06.on{background-image: url('../images/river/tab06_on.png');transition: .2s all;} section.river .contents_wrapper .cont_wrap .pic_wrap {position:relative;width:100%;} section.river .contents_wrapper .cont_wrap .riverSwiper .swiper-slide .cont03{position:relative;display:flex;align-items:end;justify-content:center;width:100%;height:550px;background-image: url('../images/river/cont03.png');padding:30px 0;box-sizing:border-box;} section.river .contents_wrapper .cont_wrap .riverSwiper .swiper-slide .cont03 .inner{position:relative;width:1220px;height:413px;display:flex;justify-content: space-between;} section.river .contents_wrapper .cont_wrap .riverSwiper .swiper-slide .cont03 .inner .inner_slide{position:relative;width:306px;height:100%;} section.river .contents_wrapper .cont_wrap .riverSwiper .swiper-slide .in-pagination-wrap {position:absolute;width:100%;height:22px;display:flex;align-items:center;bottom:26px;z-index:5;justify-content: center;} section.river .contents_wrapper .cont_wrap .riverSwiper .swiper-slide .in-pagination-wrap .btn_in_prev{position:relative;cursor:pointer;width:22px;height:22px;background-image: url('../images/river/btn_in_prev.png');margin-right:4px;} section.river .contents_wrapper .cont_wrap .riverSwiper .swiper-slide .in-pagination-wrap .btn_in_next{position:relative;cursor:pointer;width:22px;height:22px;background-image: url('../images/river/btn_in_next.png');margin-left:4px;} section.river .contents_wrapper .cont_wrap .riverSwiper .swiper-slide .in-pagination-wrap .in-pagination{position:relative;display:flex;gap:0 4px;width:auto !important;height:100%;align-items: center;bottom:0;} section.river .contents_wrapper .cont_wrap .riverSwiper .swiper-slide .in-pagination-wrap .in-pagination .swiper-pagination-bullet{margin:0;width:22px;height:22px;display:flex;justify-content: center;align-items: center;font-size:16px;font-weight:600;color:#FFFFFF;opacity:1;background-color:rgba(255,255,255,.2);} section.river .contents_wrapper .cont_wrap .riverSwiper .swiper-slide .in-pagination-wrap .in-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#FFFFFF;} section.river .contents_wrapper .cont_wrap .riverSwiper .swiper-slide .inner_slide.in01 .in-pagination-wrap .in-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{color:#567DFC;} section.river .contents_wrapper .cont_wrap .riverSwiper .swiper-slide .inner_slide.in02 .in-pagination-wrap .in-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{color:#9B51FE;} section.river .contents_wrapper .cont_wrap .riverSwiper .swiper-slide .inner_slide.in03 .in-pagination-wrap .in-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{color:#E74F9A;} section.river .contents_wrapper .control_wrapper {position:relative;width:100%;display:flex;justify-content: center;} section.river .contents_wrapper .control_wrapper .control_wrap{position:relative;width:276px;height:52px;background:#090C39;border-radius:500px;display:flex;align-items:center;justify-content: space-between;padding:0 20px;box-sizing: border-box;border: solid 3px #ffff;box-shadow:rgba(0, 0, 0, .4) 0 4px 8px;} section.river .contents_wrapper .control_wrapper .control_wrap .paging_wrap {position:relative;width:100%;display:flex;align-items:center;justify-content:center;height:100%;} section.river .contents_wrapper .control_wrapper .control_wrap .paging_wrap .paging {position:relative;width:100%;display:flex;align-items:center;height:28px;bottom:inherit;gap:0 17px;} section.river .contents_wrapper .control_wrapper .control_wrap .paging_wrap .swiper-pagination-bullet{width:16px;height:16px;opacity:1;margin:0;background-color:#6366AA;} section.river .contents_wrapper .control_wrapper .control_wrap .paging_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active{background:transparent;width:28px;height:28px;background-image: url('../images/river/page_on.png');opacity:1;} section.river .contents_wrapper .control_wrapper .control_wrap .btn_control{position:relative;width:20px;height:20px;background-image: url('../images/river/btn_pause.png');cursor:pointer;} section.river .contents_wrapper .control_wrapper .control_wrap .btn_control.pause{background-image: url('../images/river/btn_play.png');} section.river .contents_wrapper .control_wrapper .control_wrap .btn_control .hand{display:none;right:-89px;top:5px;} section.river .contents_wrapper .control_wrapper .control_wrap .btn_control.on .hand{display:block;} /* 한강 */ /* 이벤트 01 */ section.event01 {position: relative;width: 100%;height:1955px;background-image: url('../images/event01/bg.jpg');overflow:hidden;background-position: center top} section.event01 .contents_wrapper {display: flex;flex-direction: column;width: 1300px;margin:0 auto;align-items: center;padding: 120px 0 0 0;} section.event01 .contents_wrapper .title{position:relative;} section.event01 .contents_wrapper .schedule_wrap {display: flex;margin: 40px 0 120px 0;width: 100%;justify-content: space-between;} section.event01 .contents_wrapper .event_cont_wrapper {width:1300px;display:flex;flex-direction: column;align-items: center;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap{position:relative;width:100%;display:flex;flex-direction: column;align-items: center;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap.step02{opacity:0;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap.step02.on{opacity:1; transition: 1s all;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .event_title{position:relative;margin:0 0 20px 0;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .tabs_wrap{position:relative;display:flex;justify-content: center;gap:0 16px;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .tabs_wrap .tab{position:relative;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .tabs_wrap .tab.t01{width:235px;height:48px;background-image: url('../images/event01/tab01.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .tabs_wrap .tab.t01.on{background-image: url('../images/event01/tab01_on.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .tabs_wrap .tab.t02{width:370px;height:48px;background-image: url('../images/event01/tab02.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .tabs_wrap .tab.t02.on{background-image: url('../images/event01/tab02_on.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .tabs_wrap .tab.t03{width:410px;height:48px;background-image: url('../images/event01/tab03.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .tabs_wrap .tab.t03.on{background-image: url('../images/event01/tab03_on.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper{position:relative;width:100%;height:500px;margin:15px 0 0 0;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map{position:absolute;width:137px;height:104px;cursor:pointer;transition: .5s all;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map:hover{margin-top:-10px;transition: .5s all;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.ov{animation:1s map_ov infinite linear forwards;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.stamp::before{position:absolute;content:'';width:177px;height:177px;cursor:default;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.stamp{margin-top:0;} #section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.stamp:hover{margin-top:0;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm01{left:0;top:64px;background-image: url('../images/event01/place01.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm01:hover{background-image: url('../images/event01/place01_on.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm02{left:188px;top:22px;background-image: url('../images/event01/place02.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm02.on{background-image: url('../images/event01/place02_on.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm02.stamp::before{left:-10px;top:-50px;background-image: url('../images/event01/p02_stamp.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm02:hover{background-image: url('../images/event01/place02_on.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm03{left:147px;top:148px;background-image: url('../images/event01/place03.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm03:hover{background-image: url('../images/event01/place03_on.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm04{left:306px;top:97px;background-image: url('../images/event01/place04.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm04:hover{background-image: url('../images/event01/place04_on.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm05{left:279px;top:264px;background-image: url('../images/event01/place05.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm05.on{background-image: url('../images/event01/place05_on.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm05.stamp::before{left:-10px;top:-50px;background-image: url('../images/event01/p05_stamp.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm05:hover{background-image: url('../images/event01/place05_on.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm06{left:541px;top:222px;background-image: url('../images/event01/place06.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm06:hover{background-image: url('../images/event01/place06_on.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm07{right:576px;top:333px;background-image: url('../images/event01/place07.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm07.on{background-image: url('../images/event01/place07_on.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm07.stamp::before{left:-10px;top:-30px;background-image: url('../images/event01/p07_stamp.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm07:hover{background-image: url('../images/event01/place07_on.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm08{right:432px;top:273px;background-image: url('../images/event01/place08.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm08:hover{background-image: url('../images/event01/place08_on.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm09{right:308px;top:149px;background-image: url('../images/event01/place09.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm09.on{background-image: url('../images/event01/place09_on.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm09.stamp::before{left:-10px;top:-50px;background-image: url('../images/event01/p09_stamp.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm09:hover{background-image: url('../images/event01/place09_on.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm10{right:128px;top:256px;background-image: url('../images/event01/place10.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm10:hover{background-image: url('../images/event01/place10_on.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm11{right:0;top:0;background-image: url('../images/event01/place11.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .map_wrapper .map.pm11:hover{background-image: url('../images/event01/place11_on.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper{width:100%;height:621px;background:#ffffff;border-radius:20px;margin:20px 0 0 0;display:flex;flex-direction: column;align-items: center;gap:20px 0;padding:0 0 20px 20px;box-sizing: border-box;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .info_wrap{width:100%;display:flex;justify-content: space-between;box-sizing: border-box;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .info_wrap .fav{height:53px;border-bottom-left-radius: 12px;border-bottom-right-radius: 12px;display:flex;justify-content: center;align-items: center;padding:0 20px;color:#FFFFFF;font-size:26px;font-weight:900;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .info_wrap .info{color:#555555;display:flex;align-items:center;font-weight:500;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .info_wrap .info span{font-weight:900;font-size:28px;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .product_wrap{position:relative;width:100%;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .product_wrap .swiper-slide{width:365px !important;height:397px !important;border-radius:20px;overflow: hidden;box-sizing: border-box;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .product_wrap .swiper-slide .product{width:100%;height:100%;display:flex;flex-direction: column;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .product_wrap .swiper-slide .product .t_wrap{display:flex;align-items:center;justify-content: space-between;height:42px;padding:0 8px 0 16px;box-sizing: border-box;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .product_wrap .swiper-slide .product .t_wrap .name{color:#FFFFFF;font-size:21px;font-weight:900;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .product_wrap .swiper-slide .product .t_wrap .tname{height:26px;line-height:26px;font-size:16px;font-weight:600;color:#FFFFFF;border:1px solid #FFFFFF;box-sizing: border-box;border-radius:100px;padding:0 12px;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .product_wrap .swiper-slide .product .title{height:56px;display:flex;align-items: center;color:#222222;font-size:18px;font-weight:600;padding:0 16px;box-sizing: border-box;line-height:1.1;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .product_wrap .swiper-slide .product .pic{width:100%;height:167px;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .product_wrap .swiper-slide .product .pic img{width:100%;height:100%;object-fit: cover;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .product_wrap .swiper-slide .product .exp{flex:1;width:100%;display:flex;flex-direction: column;padding:8px 16px;box-sizing: border-box;justify-content: space-between;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .product_wrap .swiper-slide .product .exp .item{width:100%;display:flex;font-size:16px;color:#555555;gap:0 8px;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .product_wrap .swiper-slide .product .exp .item .cap{font-weight:700;display:flex;align-items: center;gap:0 8px;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .product_wrap .swiper-slide .product .exp .item .cap::before{position:relative;content:'';width:4px;height:4px;border-radius:50%;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .product_wrap .swiper-slide .product .exp .item .txt{line-height:1.2;font-weight:500;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .product_wrap .product-scrollbar-wrapper {position:relative;width:1254px;height:8px;margin:20px 0 0 0;background-color: rgba(0,0,0,.1);border-radius:10px;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .product_wrap .product-scrollbar {position:relative;width:100%;height:100%;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .product_wrap .btn_wrap {position:relative;width:100%;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .btn_wrap .btn_stamp{position:relative;background-image: url('../images/event01/btn_stamp.png');width:270px;height:83px;cursor:pointer;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .btn_wrap .btn_stamp.on{background-image: url('../images/event01/btn_stamp_on.png');} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .btn_wrap .btn_stamp .hand{display:none;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .btn_wrap .btn_stamp.on .hand{display:block;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .btn_wrap .btn_ok{position:relative;background:#B2B2B2;width:270px;height:83px;cursor:pointer;display:flex;justify-content: center;align-items:center;font-size:32px;font-weight:900;color:#FFFFFF;border-radius:100px;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .btn_wrap .btn_ok.on{background:#1A47C2;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .btn_wrap .btn_ok .hand{display:none;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper .btn_wrap .btn_ok.on .hand{display:block;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm01 .pColorBg{background:#864CEB;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm01 .pColor{color:#864CEB;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm01 .pColorBorder{border:2px solid #864CEB} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm01 .swiper-scrollbar-drag{background:#864CEB;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm01 .cap::before{background:#864CEB;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm02 .pColorBg{background:#24ABFF;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm02 .pColor{color:#24ABFF;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm02 .pColorBorder{border:2px solid #24ABFF} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm02 .swiper-scrollbar-drag{background:#24ABFF;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm02 .cap::before{background:#24ABFF;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm03 .pColorBg{background:#0048CD;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm03 .pColor{color:#0048CD;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm03 .pColorBorder{border:2px solid #0048CD} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm03 .swiper-scrollbar-drag{background:#0048CD;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm03 .cap::before{background:#0048CD;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm04 .pColorBg{background:#CE223B;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm04 .pColor{color:#CE223B;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm04 .pColorBorder{border:2px solid #CE223B} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm04 .swiper-scrollbar-drag{background:#CE223B;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm04 .cap::before{background:#CE223B;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm05 .pColorBg{background:#FF6A00;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm05 .pColor{color:#FF6A00;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm05 .pColorBorder{border:2px solid #FF6A00} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm05 .swiper-scrollbar-drag{background:#FF6A00;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm05 .cap::before{background:#FF6A00;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm06 .pColorBg{background:#FF63AF;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm06 .pColor{color:#FF63AF;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm06 .pColorBorder{border:2px solid #FF63AF} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm06 .swiper-scrollbar-drag{background:#FF63AF;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm06 .cap::before{background:#FF63AF;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm07 .pColorBg{background:#00A3C8;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm07 .pColor{color:#00A3C8;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm07 .pColorBorder{border:2px solid #00A3C8} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm07 .swiper-scrollbar-drag{background:#00A3C8;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm07 .cap::before{background:#00A3C8;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm08 .pColorBg{background:#FF7614;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm08 .pColor{color:#FF7614;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm08 .pColorBorder{border:2px solid #FF7614} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm08 .swiper-scrollbar-drag{background:#FF7614;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm08 .cap::before{background:#FF7614;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm09 .pColorBg{background:#469C47;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm09 .pColor{color:#469C47;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm09 .pColorBorder{border:2px solid #469C47} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm09 .swiper-scrollbar-drag{background:#469C47;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm09 .cap::before{background:#469C47;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm10 .pColorBg{background:#00A43F;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm10 .pColor{color:#00A43F;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm10 .pColorBorder{border:2px solid #00A43F} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm10 .swiper-scrollbar-drag{background:#00A43F;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm10 .cap::before{background:#00A43F;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm11 .pColorBg{background:#008E93;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm11 .pColor{color:#008E93;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm11 .pColorBorder{border:2px solid #008E93} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm11 .swiper-scrollbar-drag{background:#008E93;} section.event01 .contents_wrapper .event_cont_wrapper .event_cont_wrap .cont_wrapper.pm11 .cap::before{background:#008E93;} section.event01 .contents_wrapper > .join_wrapper {position: absolute;bottom:100px;width: 1217px;height: 132px;display: flex;justify-content: center;align-items: center;font-size: 28px;color:#555555;background-image: url('../images/bg_num01.png');} section.event01 .contents_wrapper > .join_wrapper .join_wrap {position: relative;display: flex;justify-content: center;align-items: center;gap: 0 5px;} section.event01 .contents_wrapper > .join_wrapper .join_wrap div {line-height: 1;} section.event01 .contents_wrapper > .join_wrapper .join_wrap .j_info {color: #3A8FFF;font-weight: 800;font-size: 40px;line-height: 0.7;} section.event01 .contents_wrapper > .join_wrapper .join_wrap .ttl {font-weight: 700;padding: 0 7px 0 12px;font-size: 32px;color: #111111;} /* 이벤트 01 */ /* 이벤트 02 */ section.event02 {position: relative;width: 100%;height:1882px;background-image: url('../images/event02/bg.jpg');overflow:hidden;} section.event02 .contents_wrapper {display: flex;flex-direction: column;width: 1300px;margin:0 auto;align-items: center;padding: 120px 0 0 0;} section.event02 .contents_wrapper .title{position:relative;} section.event02 .contents_wrapper .schedule_wrap {display: flex;margin: 60px 0 120px 0;width: 100%;justify-content: space-between;z-index: 2;} section.event02 .contents_wrapper .event_cont_wrapper {width:100%;display:flex;flex-direction: column;align-items: center;} section.event02 .contents_wrapper .event_cont_wrapper .event_cont_wrap {width:1300px;} section.event02 .contents_wrapper .event_cont_wrapper .event_cont_wrap .event_start{display:flex;flex-direction: column;justify-content: center;align-items: center;} section.event02 .contents_wrapper .event_cont_wrapper .event_cont_wrap .event_start .event_title{width:100%;margin-bottom:20px;text-align: center;} section.event02 .contents_wrapper .event_cont_wrapper .event_cont_wrap .event_start .cover{width:100%;height:481px;background-image:url('../images/event02/cover.png');margin-bottom:40px;} section.event02 .contents_wrapper .event_cont_wrapper .event_cont_wrap .event_start .btn_start{position:relative;width:270px;height:83px;cursor:pointer;background-image: url('../images/event02/btn_start.png');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper{position:relative;width:100%;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper .e_ttl{text-align:center;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper .step_bar{display:flex;justify-content: center;margin:20px 0;gap:0 20px;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper .step_bar .step{display:flex;justify-content:center;align-items:center;font-size:40px;font-weight:700;color:#FFFFFF;width:240px;height:82px;border:1px solid #FFFFFF;border-radius:100px;box-sizing: border-box;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper .step_bar .step.on{background:#FFFFFF;color:#6F3ECF;border:1px solid #00A3C8;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper .step_bar .step.e01.complete{background-image:url('../images/event02/tab01_complete.png?v=1');border:0;text-indent: -9999px;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper .step_bar .step.e02.complete{background-image:url('../images/event02/tab02_complete.png?v=1');border:0;text-indent: -9999px;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper .step_bar .step.e03.complete{background-image:url('../images/event02/tab03_complete.png?v=1');border:0;text-indent: -9999px;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper .puzzle_table_wrapper{position:relative;display:flex;align-items:start;justify-content:center;width:100%;height:587px;background-image: url('../images/event02/cover_puzzle.png?v=1');padding:30px 0 0 0;box-sizing: border-box;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper .puzzle_table_wrapper .puzzle_table{position:relative;display:flex;flex-wrap:wrap;width:720px;height:480px;background-image: url('../images/event02/puzzle.png');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper .puzzle_table_wrapper .puzzle_table .drop_item{position:relative;width:240px;height:240px;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper .guide {position:absolute;left:365px;bottom:30px;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .puzzle_table_wrapper .puzzle_table .drop_item.on .d01{position:absolute;left:0;top:0;width:268px;height:268px;background-image: url('../images/event02/puzzle01/01.png?v=1');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .puzzle_table_wrapper .puzzle_table .drop_item.on .d02{position:absolute;left:0;top:0;width:268px;height:268px;background-image: url('../images/event02/puzzle01/02.png?v=1');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .puzzle_table_wrapper .puzzle_table .drop_item.on .d03{position:absolute;left:0;top:0;width:240px;height:268px;background-image: url('../images/event02/puzzle01/03.png?v=1');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .puzzle_table_wrapper .puzzle_table .drop_item.on .d04{position:absolute;left:0;top:0;width:268px;height:240px;background-image: url('../images/event02/puzzle01/04.png?v=1');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .puzzle_table_wrapper .puzzle_table .drop_item.on .d05{position:absolute;left:0;top:0;width:268px;height:240px;background-image: url('../images/event02/puzzle01/05.png?v=1');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .puzzle_table_wrapper .puzzle_table .drop_item.on .d06{position:absolute;left:0;top:0;width:240px;height:240px;background-image: url('../images/event02/puzzle01/06.png?v=1');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step02 {display:none;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step02 .puzzle_table_wrapper .puzzle_table .drop_item.on .d01{position:absolute;left:0;top:0;width:268px;height:268px;background-image: url('../images/event02/puzzle02/01.png?v=1');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step02 .puzzle_table_wrapper .puzzle_table .drop_item.on .d02{position:absolute;left:0;top:0;width:268px;height:268px;background-image: url('../images/event02/puzzle02/02.png?v=1');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step02 .puzzle_table_wrapper .puzzle_table .drop_item.on .d03{position:absolute;left:0;top:0;width:240px;height:268px;background-image: url('../images/event02/puzzle02/03.png?v=1');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step02 .puzzle_table_wrapper .puzzle_table .drop_item.on .d04{position:absolute;left:0;top:0;width:268px;height:240px;background-image: url('../images/event02/puzzle02/04.png?v=1');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step02 .puzzle_table_wrapper .puzzle_table .drop_item.on .d05{position:absolute;left:0;top:0;width:268px;height:240px;background-image: url('../images/event02/puzzle02/05.png?v=1');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step02 .puzzle_table_wrapper .puzzle_table .drop_item.on .d06{position:absolute;left:0;top:0;width:240px;height:240px;background-image: url('../images/event02/puzzle02/06.png?v=1');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step03 {display:none;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step03 .puzzle_table_wrapper .puzzle_table .drop_item.on .d01{position:absolute;left:0;top:0;width:268px;height:268px;background-image: url('../images/event02/puzzle03/01.png?v=1');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step03 .puzzle_table_wrapper .puzzle_table .drop_item.on .d02{position:absolute;left:0;top:0;width:268px;height:268px;background-image: url('../images/event02/puzzle03/02.png?v=1');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step03 .puzzle_table_wrapper .puzzle_table .drop_item.on .d03{position:absolute;left:0;top:0;width:240px;height:268px;background-image: url('../images/event02/puzzle03/03.png?v=1');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step03 .puzzle_table_wrapper .puzzle_table .drop_item.on .d04{position:absolute;left:0;top:0;width:268px;height:240px;background-image: url('../images/event02/puzzle03/04.png?v=1');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step03 .puzzle_table_wrapper .puzzle_table .drop_item.on .d05{position:absolute;left:0;top:0;width:268px;height:240px;background-image: url('../images/event02/puzzle03/05.png?v=1');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step03 .puzzle_table_wrapper .puzzle_table .drop_item.on .d06{position:absolute;left:0;top:0;width:240px;height:240px;background-image: url('../images/event02/puzzle03/06.png?v=1');} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper .puzzle_table_wrapper .drag_box{top:0;position:absolute;height:100%;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper .puzzle_table_wrapper .drag_box.left{left:0;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper .puzzle_table_wrapper .drag_box.right{right:0;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper .puzzle_table_wrapper .drag_box .drag_item{position:absolute;width:201px;height:201px;background-size: 100%;background-repeat: no-repeat;cursor:pointer;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .puzzle_table_wrapper .drag_box .drag_item.d01{left:34px;top:29px;background-image: url('../images/event02/puzzle01/01_on.png');z-index:3;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .puzzle_table_wrapper .drag_box .drag_item.d02{left:75px;top:186px;background-image: url('../images/event02/puzzle01/02_on.png');z-index:1;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .puzzle_table_wrapper .drag_box .drag_item.d03{right:34px;bottom:38px;width:180px;height:200px;background-image: url('../images/event02/puzzle01/03_on.png');z-index:2;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .puzzle_table_wrapper .drag_box .drag_item.d04{right:47px;top:29px;width:201px;height:180px;background-image: url('../images/event02/puzzle01/04_on.png');z-index:1;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .puzzle_table_wrapper .drag_box .drag_item.d05{left:46px;bottom:59px;width:201px;height:180px;background-image: url('../images/event02/puzzle01/05_on.png');z-index:2;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .puzzle_table_wrapper .drag_box .drag_item.d06{right:85px;bottom:177px;width:180px;height:180px;background-image: url('../images/event02/puzzle01/06_on.png');z-index:3;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step02 .puzzle_table_wrapper .drag_box .drag_item.d01{left:34px;top:29px;background-image: url('../images/event02/puzzle02/01_on.png');z-index:3;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step02 .puzzle_table_wrapper .drag_box .drag_item.d02{left:75px;top:186px;background-image: url('../images/event02/puzzle02/02_on.png');z-index:1;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step02 .puzzle_table_wrapper .drag_box .drag_item.d03{right:34px;bottom:38px;width:180px;height:200px;background-image: url('../images/event02/puzzle02/03_on.png');z-index:2;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step02 .puzzle_table_wrapper .drag_box .drag_item.d04{right:47px;top:29px;width:201px;height:180px;background-image: url('../images/event02/puzzle02/04_on.png');z-index:1;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step02 .puzzle_table_wrapper .drag_box .drag_item.d05{left:46px;bottom:59px;width:201px;height:180px;background-image: url('../images/event02/puzzle02/05_on.png');z-index:2;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step02 .puzzle_table_wrapper .drag_box .drag_item.d06{right:85px;bottom:177px;width:180px;height:180px;background-image: url('../images/event02/puzzle02/06_on.png');z-index:3;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step03 .puzzle_table_wrapper .drag_box .drag_item.d01{left:34px;top:29px;background-image: url('../images/event02/puzzle03/01_on.png');z-index:3;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step03 .puzzle_table_wrapper .drag_box .drag_item.d02{left:75px;top:186px;background-image: url('../images/event02/puzzle03/02_on.png');z-index:1;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step03 .puzzle_table_wrapper .drag_box .drag_item.d03{right:34px;bottom:38px;width:180px;height:200px;background-image: url('../images/event02/puzzle03/03_on.png');z-index:2;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step03 .puzzle_table_wrapper .drag_box .drag_item.d04{right:47px;top:29px;width:201px;height:180px;background-image: url('../images/event02/puzzle03/04_on.png');z-index:1;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step03 .puzzle_table_wrapper .drag_box .drag_item.d05{left:46px;bottom:59px;width:201px;height:180px;background-image: url('../images/event02/puzzle03/05_on.png');z-index:2;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper.step03 .puzzle_table_wrapper .drag_box .drag_item.d06{right:85px;bottom:177px;width:180px;height:180px;background-image: url('../images/event02/puzzle03/06_on.png');z-index:3;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper .puzzle_complete{position:relative;display:none;width:720px;height:587px;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper .puzzle_complete.move{margin-left:-480px;transition: 1s all;top:25px} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper .info_txt{position:absolute;margin-top:25px;right:79px;width:407px;height:480px;display:flex;align-items: center;justify-content: center;opacity:0;} section.event02 .contents_wrapper .event_cont_wrapper .game_wrapper .info_txt.move{opacity:1;transition: 1s all;transition-delay: 1s;} section.event02 .contents_wrapper > .join_wrapper {position: absolute;width: 1332px;height: 132px;bottom:100px;display: flex;justify-content: center;align-items: center;font-size: 28px;color:#555555;background-image: url('../images/bg_num02.png');} section.event02 .contents_wrapper > .join_wrapper .join_wrap {position: relative;display: flex;justify-content: center;align-items: center;gap: 0 5px;letter-spacing: -2px;} section.event02 .contents_wrapper > .join_wrapper .join_wrap div {line-height: 1;} section.event02 .contents_wrapper > .join_wrapper .join_wrap .j_info {color: #A47EEF;font-weight: 800;font-size: 40px;line-height: 0.7;} section.event02 .contents_wrapper > .join_wrapper .join_wrap .ttl {font-weight: 700;padding: 0 7px 0 12px;font-size: 32px;color: #000000;} /* 이벤트 02 */ /* 이벤트 03 */ section.event03 {position: relative;width: 100%;height:1892px;background-image: url('../images/event03/bg.jpg');overflow:hidden;} section.event03 .contents_wrapper {display: flex;flex-direction: column;width: 1300px;margin:0 auto;align-items: center;padding: 120px 0 0 0;} section.event03 .contents_wrapper .title{position:relative;} section.event03 .contents_wrapper .schedule_wrap {display: flex;margin: 60px 0 120px 0;width: 100%;justify-content: space-between;z-index: 2;} section.event03 .contents_wrapper .event_cont_wrapper {width:100%;display:flex;flex-direction: column;align-items: center;} section.event03 .contents_wrapper .event_cont_wrapper .event_cont_wrap {width:1300px;} section.event03 .contents_wrapper .event_cont_wrapper .event_cont_wrap .event_start{display:flex;flex-direction: column;justify-content: center;align-items: center;} section.event03 .contents_wrapper .event_cont_wrapper .event_cont_wrap .event_start .event_title{width:100%;margin-bottom:20px;text-align: center;} section.event03 .contents_wrapper .event_cont_wrapper .event_cont_wrap .event_start .cover{width:100%;height:496px;background-image:url('../images/event03/cover.png');background-size:contain;margin-bottom:20px;background-repeat:no-repeat;} section.event03 .contents_wrapper .event_cont_wrapper .event_cont_wrap .event_start .btn_start{position:relative;width:239px;height:83px;cursor:pointer;background-image: url('../images/event03/btn_start.png');} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper{position:relative;width:100%;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper .e_ttl{text-align:center;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper .step_bar{display:flex;justify-content: center;margin:20px 0;gap:0 20px;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper .step_bar .step{display:flex;justify-content:center;align-items:center;font-size:40px;font-weight:700;color:#FFFFFF;width:240px;height:82px;border:1px solid #FFFFFF;border-radius:100px;box-sizing: border-box;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper .step_bar .step.on{background:#FFFFFF;color:#06B8CB;border:1px solid #00A3C8;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper .step_bar .step.complete{background:#FFFFFF;color:#06B8CB;border:1px solid #00A3C8;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 {display:flex;flex-direction: column;align-items: center;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper{width:100%;height:496px;background-image: url('../images/event03/quiz_cover.png');display:flex;justify-content: space-between;align-items: center;padding:0 20px;box-sizing: border-box;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper .quiz_box{width:769px;height:456px; transition:.3s all;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper .quiz_box.q01{background-image: url('../images/event03/pic01.png?v=1');} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper .quiz_box.q02{background-image: url('../images/event03/pic02.png?v=1');} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper .quiz_box.q03{background-image: url('../images/event03/pic03.png?v=1');} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper .quiz_box.q04{background-image: url('../images/event03/pic04.png?v=1');} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper .quiz_box.q05{background-image: url('../images/event03/pic05.png?v=1');} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper .quiz_box.q06{background-image: url('../images/event03/pic06.png?v=1');} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper .answer_box{width:471px;height:456px;display:flex;flex-direction: column;align-items: center;justify-content: space-between;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper .answer_box .txt{padding:10px 0 0 0;box-sizing: border-box;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper .answer_box .answer_wrap{width:471px;height:175px;display:flex;flex-direction: column;align-items: center;padding:20px 0;gap:20px 0;background-image: url('../images/event03/quest_bg.png');box-sizing: border-box;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper .answer_box .answer_wrap .qtxt{font-size:26px;font-weight:700;text-align:center;color:#FFFFFF;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper .answer_box .answer{width:100%;display:flex;flex-direction: column;justify-content: space-between;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper .answer_box .answer .ans{width:100%;height:98px;padding:0 20px;margin:7px 0 0 0;box-sizing:border-box;display:flex;align-items: center;justify-content: center;padding:5px 0 0 0;box-sizing: border-box;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper .answer_box .answer .ans input{width:43%;height:60%;background: transparent;border:0;font-size:24px;font-weight:500;color:#FFFFFF;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper .answer_box .answer .ans input:focus{outline:none;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper .answer_box .answer .ans input::placeholder{color:rgba(255,255,255,.5);} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper .answer_box .btn_hint{width:100%;height:141px;cursor:pointer;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper .answer_box .btn_hint.btn{background-image: url('../images/event03/btn_hint.png');} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .quiz_table_wrapper .answer_box .btn_hint.hint{background-image: url('../images/event03/hint.png');} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .btn_ok{position:relative;margin:20px 0 0 0;width:242px;height:83px;background-image: url('../images/event03/btn_ok.png');cursor:pointer;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .btn_ok .hand{display:none;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.step01 .btn_ok.on .hand{display:block;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.result {display:flex;flex-direction: column;align-items: center;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.result .result_wrapper{display:flex;justify-content: center;gap:0 20px;margin:40px 0 0 0;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.result .result_wrapper .result_box{position:relative;width:420px;height:529px;background-image: url('../images/event03/pic99_sel.png');} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.result .result_wrapper .result_box .num{position:absolute;left:180px;top:-30px;width:60px;height:60px;border-radius: 50%;background:#06B8CB;font-size:28px;font-weight:800;color:#FFFFFF;display:flex;justify-content: center;align-items: center;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.result .result_wrapper .result_box.r1{background-image: url('../images/event03/pic01_sel.png?v=1');} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.result .result_wrapper .result_box.r2{background-image: url('../images/event03/pic02_sel.png?v=1');} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.result .result_wrapper .result_box.r3{background-image: url('../images/event03/pic03_sel.png?v=1');} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.result .result_wrapper .result_box.r4{background-image: url('../images/event03/pic04_sel.png?v=1');} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.result .result_wrapper .result_box.r5{background-image: url('../images/event03/pic05_sel.png?v=1');} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.result .result_wrapper .result_box.r6{background-image: url('../images/event03/pic06_sel.png?v=1');} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.result .btn_join{position:relative;margin:15px 0 0 0;width:326px;height:83px;background-image: url('../images/event03/btn_join.png');cursor:pointer;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.result .btn_next{position:relative;margin:15px 0 0 0;width:242px;height:83px;background-image: url('../images/event03/btn_next.png');cursor:pointer;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.result .btn_join .hand{display:none;} section.event03 .contents_wrapper .event_cont_wrapper .game_wrapper.result .btn_join.on .hand{display:block;} section.event03 .contents_wrapper > .join_wrapper {position: absolute;width: 1217px;height: 132px;bottom:100px;display: flex;justify-content: center;align-items: center;font-size: 28px;color:#555555;background-image: url('../images/bg_num03.png');} section.event03 .contents_wrapper > .join_wrapper .join_wrap {position: relative;display: flex;justify-content: center;align-items: center;gap: 0 5px;letter-spacing: -2px;} section.event03 .contents_wrapper > .join_wrapper .join_wrap div {line-height: 1;} section.event03 .contents_wrapper > .join_wrapper .join_wrap .j_info {color: #06B8CB;font-weight: 800;font-size: 40px;line-height: 0.7;} section.event03 .contents_wrapper > .join_wrapper .join_wrap .ttl {font-weight: 700;padding: 0 7px 0 12px;font-size: 32px;color: #000000;} /* 이벤트 03 */ /* 배너 */ section.coupon-sec {position: relative;width: 100%;height:2099px;background-image:url('../images/coupon/bg.jpg');display:flex;justify-content: center;align-items: center;} section.coupon-sec .contents_wrapper {width: 1300px;height:100%;display: flex;flex-direction:column;align-items:center;justify-content:start;padding:120px 0 0 0;box-sizing: border-box;} section.coupon-sec .contents_wrapper .coupon {margin:80px 0 60px 0;text-align:center;} section.coupon-sec .contents_wrapper .box01 {width:100%;height:496px;display:flex;background-image: url('../images/coupon/box01.png');padding:120px 40px 0 40px;box-sizing: border-box;gap:0 56px;} section.coupon-sec .contents_wrapper .box01 .box{position:relative;} section.coupon-sec .contents_wrapper .box01 .box::after{position:absolute;content:'';margin-left:20px;top:152px;width:26px;height:42px;background-image: url('../images/coupon/dir.png');} section.coupon-sec .contents_wrapper .box01 .box:last-child::after{position:absolute;content:'';width:0;height:0;background-image:none;} section.coupon-sec .contents_wrapper .box02 {width:100%;height:422px;display:flex;background-image: url('../images/coupon/box02.png');padding:120px 40px 0 40px;box-sizing: border-box;gap:0 18px;margin:40px 0 0 0;} section.coupon-sec .contents_wrapper .box02 .box{position:relative;} /* 배너 */ /* 동영상 */ section.movie {position: relative;width: 100%;height:999px;background-image:url('../images/movie/bg.jpg');} section.movie .contents_wrapper {display: flex;flex-direction: column;width: 100%;height:100%;align-items: center;justify-content:start;gap:15px 0;padding:120px 0 0 0;box-sizing: border-box;} section.movie .contents_wrapper .movie_wrap{position:relative;width:1051px;height:593px;display:flex;flex-direction: column;align-items: center;justify-content: center;background-image: url('../images/movie/cover.png');} section.movie .contents_wrapper .movie_wrap .movie{position:relative;width:1004px;height:498px;display:flex;flex-direction: column;align-items:center;justify-content:center;gap:8px 0;} section.movie .contents_wrapper .movie_wrap .movie .movie-wrapper {position:relative;width:100%;height:100%;} section.movie .contents_wrapper .movie_wrap .info{width:100%;display:flex;justify-content: space-between;padding:10px 25px 0 25px;box-sizing: border-box;} section.movie .contents_wrapper .movie_wrap .info .info_wrap{display:flex;gap:0 8px;align-items: center;font-weight:700;font-size:26px;} section.movie .contents_wrapper .movie_wrap .info .info_wrap .icon{line-height:0;} section.movie .contents_wrapper .movie_wrap .info .subscribe_wrap{display:flex;gap:0 8px;align-items: center;} section.movie .contents_wrapper .movie_wrap .info .subscribe_wrap .btn_subscribe{background-image:url('../images/movie/btn_subscribe.png');width:54px;height:33px;} section.movie .contents_wrapper .movie_wrap .info .subscribe_wrap .btn_subscribe a{display:block;width:100%;height:100%;} /* 동영상 */ /* SNS SHARE */ section.snsshare {position: relative;width: 100%;height: 421px;background-image:url('../images/share/bg.jpg');} section.snsshare .contents_wrap {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;gap:24px 0;} section.snsshare .contents_wrap .title_wrap {display:flex;flex-direction: column;gap:20px 0;} section.snsshare .contents_wrap .sns_wrapper {position: relative;display:flex;justify-content: center;align-items: center;} section.snsshare .contents_wrap .sns_wrapper > ul {display: flex;gap: 0 20px;} /* SNS SHARE */ .productSwiper {height:397px;} /* 참여 정보 */ section.sec-join-info { position: relative; width: 100%; height: 208px; display: flex; justify-content: center; font-size: 32px; align-items: center; color: #111116; background-color: #ffffff; } section.sec-join-info div { font-weight: 700; display: flex; align-items: center; } section.sec-join-info i { font-weight: 500; color:#333333; margin-right:10px; } section.sec-join-info span.normal { color:#262630; font-weight: 500; font-size: 32px; margin-right: 5px; margin-top: -5px; } section.sec-join-info span._visit_all_cnt { color: #D3006D; margin-left: 10px; margin-right: 10px; margin-top: -10px; font-weight: 900; line-height: 0; font-size:48px; font-family:'SchoolSafetyNotification'; } section.sec-join-info span._join_all_cnt { color: #783E9A; margin-left: 10px; margin-right: 10px; margin-top: -10px; font-size:48px; font-family:'SchoolSafetyNotification'; } section.sec-join-info div span { font-size: 48px; font-weight: 900; font-family: "ONE-Mobile-Title",sans-serif; padding: 0 0 0 5px; } /* 참여 정보 */ /* 접속 정보 */ section.sec-connect-info { position: relative; width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; color: #222222; background-color: #DFDFDF; font-size: 32px; } section.sec-connect-info div { font-weight: 800; display: flex; align-items: center; } section.sec-connect-info span.area { color: #0A91F8; font-size:36px; padding:0 5px; font-weight:800; } /* 참여 정보 */ /* SNS */ /* 참여 정보 */ section.sec-copyright { position: relative; width: 100%; height: 162px; display: flex; justify-content: center; align-items: center; background: #f0f0f0; color: #555555; font-size: 18px; } section.sec-copyright > .copyright { width: 1400px; } section.sec-copyright > .copyright ul { } section.sec-copyright > .copyright ul li { float: left; width: 60%; margin-bottom: 10px; } section.sec-copyright > .copyright ul li:first-child { color: #262630; font-size: 20px; font-weight: 500; font-family: 'Pretendard',sans-serif; } section.sec-copyright > .copyright ul li:nth-child(2n+2) { text-align: right; width: 40%; } section.sec-copyright > .copyright ul li:nth-child(4) { display: flex; justify-content: end; } section.sec-copyright > .copyright ul li:nth-child(4) > div { text-align: right; margin-left: 10px; } section.sec-copyright > .copyright ul li:nth-child(4) span { color: #555555; font-weight: 800; font-family: 'Pretendard',sans-serif; } /* 고정 메뉴 */ .navigator_wrapper { position: fixed;left: 0;bottom: 0;width: 100%;height: 88px;z-index: 51;overflow: hidden;background:#7E66F8;display:none; } .navigator_wrapper .cont_wrap {width: 100%;height: 100%;display: flex;justify-content: center;} .navigator_wrapper .cont_wrap .navi_wrap { width: 1300px; height: 100%; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; box-sizing: border-box; } .navigator_wrapper .cont_wrap .navi_wrap > li { position: relative; flex: 1; 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: 83px; height: 44px; 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) { margin-right: 20px; } .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(2) { margin-right: 8px; } .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(3) { margin-right: 8px; } .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(4) { margin-right: 8px; } .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(5) { margin-right: 19px; } .navigator_wrapper .cont_wrap .navi_wrap > li > div > a { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .navigator_wrapper .cont_wrap .navi_wrap > li > .n_top { position: relative; background-image: url('../images/top.png'); width: 70px; height: 70px; cursor: pointer; border-radius:50%; } .n_menu_list { position: fixed; bottom: -800px; z-index: 99; background: #002B6B; 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: 10px 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;z-index: 5;animation: 1.5s zoom ease-in-out infinite;animation-delay: 0.5s;width: 106px;height: 106px;background-image: url(../images/hand.png);right:-40px;bottom:-50px;} .result_wrap { position: absolute; width: 100%; text-align: center; bottom: 100px; } .result_wrap > .btn.event_result2 > a { display: block; width: 100%; height: 100%; } #cont_wrap { width: 1200px; margin: 0 auto; position: relative; } a:focus { outline: 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); } /* 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_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: 580px; display: none; border-radius: 20px; overflow: hidden; } .pu_event_info .form_top a { display: block; width: 100%; height: 100%; } .pu_event_info .p_con { position: relative; padding: 30px; background: #fff; overflow: hidden; } .pu_event_info .p_con dt { position: relative; font-size: 18px; color: #222; font-weight: 700; } .pu_event_info .p_con .ty00 { position: relative; height: 30px; padding-top: 5px; padding-left: 0; text-align: center; font-weight: 600; } .pu_event_info .p_con .ty00 dd { display: inline-block; } .pu_event_info .p_con .ty00 dd + dd { padding-left: 30px; } .pu_event_info .p_con .ty01 { position: relative; height: 44px; padding-left: 70px; margin-bottom: 20px; } .pu_event_info .p_con .ty01 dt { position: absolute; top: 0; left: 0; width: 120px; line-height: 44px; text-align: left; } .pu_event_info .p_con .ty01 dd { position: relative; } .pu_event_info .p_con .ty01 dd input { height: 40px; line-height: 40px; background: #fff; border: 1px solid #cdcdcd; padding: 0 10px; box-sizing: border-box; } .pu_event_info .p_con .ty01 dd.num:after { content: ''; clear: both; display: block; height: 0; visibility: hidden; } .pu_event_info .p_con .ty01 dd.num input { text-align: center; float: left; width: 144px; } .pu_event_info .p_con .ty01 dd.num i { float: left; width: 9px; text-align: center; color: #fff; line-height: 40px; } .pu_event_info .p_con .ty02 { margin-top: 16px; } .pu_event_info .p_con .ty02 dt { margin-bottom: 10px; margin-top: 10px; } .pu_event_info .p_con .ty02 dt span { position: absolute; bottom: 0; right: -5px; } .pu_event_info .p_con .ty02 dt span input { margin: 0; } .pu_event_info .p_con .ty02 dd { background: #F6F6F6; padding: 15px 20px; border-radius:8px; } .pu_event_info .btns:before { position: absolute; content: ''; top: 0; left: 50%; bottom: 0; width: 1px; ; z-index: 1; } .pu_event_info .btns:after { content: ''; clear: both; display: block; height: 0; visibility: hidden; } .pu_event_info .btns a { position:relative; float: left; width: 50%; display: flex; justify-content: center; align-items: center; height: 100px; line-height: 1.2; text-align: center; font-size: 32px; color: #fff; font-weight: 800; } .pu_event_info .btns a:hover { text-decoration: none; } .pu_event_info .btns a.bt_participate_done .hand{ right:20px; bottom:-20px; transform:scale(.7); } .pu_event_info.pop01 .btns a.bt_participate_done { background: #4D93EF; color: #FFFFFF; } .pu_event_info.pop02 .btns a.bt_participate_done { background: #A47EEF; color: #FFFFFF; } .pu_event_info.pop03 .btns a.bt_participate_done { background: #06B8CB; color: #FFFFFF; } .pu_event_info .btns a.bt_cancel { background: #7D7D83; } .pu_event_info table { width: 100%; color: #333; line-height: 18px; } .pu_event_info table th { font-size: 16px; padding: 6px; vertical-align: top; text-align:left; font-weight:400; } .pu_event_info table th.center { vertical-align: middle; } .pu_event_info table td { font-size: 16px; padding: 6px; color: #333; letter-spacing: -1px; line-height: 1.5; } .pu_event_info .checks input[type="checkbox"] { position: absolute; top: 0; left: 0; opacity: 0; -webkit-opacity: 0; } .pu_event_info .checks input[type="checkbox"] + label:after { content: ' '; display: inline-block; width: 29px; height: 27px; line-height: 27px; margin: -10px 0 0 10px; text-align: center; vertical-align: middle; background-position: center bottom; background: url('../images/cb.png') no-repeat 2px 3px; } .pu_event_info .checks input[type="checkbox"]:checked + label:after { background-position: center bottom; } .pu_event_info.pop01 .checks input[type="checkbox"] + label:after { background: url(../images/cb.png) no-repeat bottom 0; } .pu_event_info.pop01 .checks input[type="checkbox"]:checked + label:after { background: url(../images/cb_on.png) no-repeat 0 0; } .pu_event_info.pop02 .checks input[type="checkbox"]:checked + label:after { background: url(../images/cb2_on.png) no-repeat 0 0; } .pu_event_info.pop03 .checks input[type="checkbox"]:checked + label:after { background: url(../images/cb3_on.png) no-repeat 0 0; } .pu_event_info .radiob input[type="radio"] { position: absolute; top: 0; left: 0; opacity: 0; -webkit-opacity: 0; } .pu_event_done { width: 680px; display: none; } .pu_event_done a{ position:absolute; width:100%; height:86px; left:0; bottom:0; } .pu_event_done .btn_go{ position:absolute; width:329px; height:77px; left:42px; top:300px; } .pu_event_done .ph { width: 100%; } .pu_event_done .ph .confirm { position: relative; width: 100%; height: 70px; line-height:70px; font-size:30px; font-weight:600; background:#000; color:#FFFFFF; text-align:center; } .pu_event_done .ph .hand { right:180px; bottom:-40px; } .pu_event_done .ph .close a { display: block; width: 100%; height: 100%; } .pu_event_done .ph .btn_wrap .btn { position: relative; width: 250px; height: 100%; } .pu_event_done .ph .btn_wrap .btn .hand { right: 0px; bottom: -40px; } .pu_event_done .ph .btn_wrap .btn a { display: block; width: 100%; height: 100%; } .pu_event_done.e01 { background: #000000; } .pu_event_done.e02 { background: #000000; } .pu_event_done.e03 { background: #000000; } .tc { text-align: center; } .rmove_1 {animation: 1s radum_move1 infinite linear forwards;} .rmove_2 {animation: 1s radum_move2 infinite linear forwards;} .rmove_3 {animation: 1s radum_move3 infinite linear forwards;} .rmove_4 {animation: 1s radum_move4 infinite linear forwards;} .rmove_5 {animation: 1s radum_move5 infinite linear forwards;} .rmove_6 {animation: 1s radum_move6 infinite linear forwards;} .rmove_7 {animation: 1s radum_move7 infinite linear forwards;} .rmove_8 {animation: 1s radum_move8 infinite linear forwards;} .rmove_9 {animation: 1s radum_move9 infinite linear forwards;} .rmove_10 {animation: 1s radum_move10 infinite linear forwards;} .rmove_1.delay1 {animation-delay: 0s;} .rmove_1.delay2 {animation-delay: 30s;} .rmove_1.delay3 {animation-delay: 50s;} .rmove_1.delay4 {animation-delay: 70s;} .rmove_1.delay5 {animation-delay: 90s;} .rmove_1.delay6 {animation-delay: 120s;} .rmove_1.delay7 {animation-delay: 150s;} .rmove_1.delay8 {animation-delay: 180s;} .rmove_1.delay9 {animation-delay: 210s;} .rmove_1.delay10 {animation-delay: 240s;} .rotate1 {transform:rotate(10deg);} .rotate2 {transform:rotate(15deg);} .rotate3 {transform:rotate(20deg);} .rotate4 {transform:rotate(25deg);} .rotate5 {transform:rotate(30deg);} .rotate6 {transform:rotate(35deg);} .rotate7 {transform:rotate(40deg);} .rotate8 {transform:rotate(45deg);} .rotate9 {transform:rotate(50deg);} .rotate10 {transform:rotate(55deg);} .rotate11 {transform:rotate(60deg);} .rotate12 {transform:rotate(65deg);} .rotate13 {transform:rotate(70deg);} .rotate14 {transform:rotate(75deg);} .rotate15 {transform:rotate(80deg);} .aniMovie01 {animation: 20s aniMovie01 infinite linear forwards; } .aniMovie02 {animation: 20s aniMovie02 infinite linear forwards; } .aniMovie03 {animation: 20s aniMovie03 infinite linear forwards; } .aniMovie04 {animation: 20s aniMovie04 infinite linear forwards; } .aniMovie05 {animation: 20s aniMovie05 infinite linear forwards; }