body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background:#f0f0f0; } body::after{ position:absolute; width:0; height:0; overflow:hidden; z-index:-1; content: background-image:url('../images/visual/bg02.jpg>v=1') url('../images/event01/woman_on.png'); url('../images/event01/man_on.png');; } .htmlWrapper {width:100%;max-width:1920px;margin:0 auto;padding-bottom:0;position:relative;padding-bottom:100px;} .htmlWrapper section {background-position:center;min-width:1840px;overflow:hidden;} .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;} .htmlWrapper section.top_wrapper > .hx_top{position:relative;background-image:url('../images/top_hx.png');width:756px;height:38px;margin:0 auto;display:flex;align-items:center;gap:0 10px;} .htmlWrapper section.top_wrapper > .hx_top .link_daum {position:absolute;width:85px;height:100%;} .htmlWrapper section.top_wrapper > .hx_top .link_comp {position:absolute;width:155px;height:100%;left:110px;} .htmlWrapper section.top_wrapper > .hx_top > div > a{display:block;width:100%;height:100%;} /* Visual */ .htmlWrapper section.visual_wrapper {position:relative;width:100%;height:880px;background-image:url('../images/visual/bg01.jpg?v=1');overflow:hidden;overflow:hidden;background-repeat:no-repeat;background-position:center;transition:.5s all;} .htmlWrapper section.visual_wrapper.on {background-image:url('../images/visual/bg02.jpg');transition:.5s all;} .htmlWrapper section.visual_wrapper .contents_wrap{position:relative;width:1400px;margin:0 auto;height:100%;display:flex;flex-direction:column;align-items:center;padding:100px 0 0 0;box-sizing:border-box;gap:40px 0;} .htmlWrapper section.visual_wrapper .contents_wrap .title_wrap{display:flex;align-items:center;} .htmlWrapper section.visual_wrapper .contents_wrap .title_wrap .year{animation:1s twist infinite linear forwards;} .htmlWrapper section.visual_wrapper .contents_wrap .movie_wrap{position:absolute;left:0;bottom:80px;width:844px;display:flex;flex-direction:row;} .htmlWrapper section.visual_wrapper .contents_wrap .movie_wrap .youtube{width:830px;height:474px;background-image: url(../images/visual/movie.png);border:8px solid #FFFFFF;box-sizing:border-box;} .htmlWrapper section.visual_wrapper .contents_wrap .movie_wrap .youtube iframe{width:100%;height:100%;} .htmlWrapper section.visual_wrapper .contents_wrap .character_wrap{position:absolute;right:-100px;bottom:0;} .htmlWrapper section.visual_wrapper .contents_wrap .character_wrap .character{position:relative;width:404px;height:467px;background-image:url('../images/visual/character.png');} .htmlWrapper section.visual_wrapper .contents_wrap .character_wrap .character .word_wrap{position:absolute;left:-160px;top:-130px;width:353px;height:174px;display:flex;align-items:end;justify-content:end;} .htmlWrapper section.visual_wrapper .contents_wrap .character_wrap .character .word_wrap .word{position:relative;width:353px;height:174px;background-image:url('../images/visual/word.png');background-position:center bottom;animation:3s word infinite linear forwards;transform-origin:right bottom;} /* 이벤트 01 */ .htmlWrapper section.event01 {position:relative;width:100%;height:3247px;background-image:url('../images/event01/bg.jpg');background-position:center top;font-family:'GmarketSansMedium',sans-serif;margin:0 auto;z-index:5;} .htmlWrapper section.event01 .contents_wrap {display:flex;width:100%;flex-direction:column;align-items:center;padding:180px 0 0 0;box-sizing:border-box;} .htmlWrapper section.event01 .contents_wrap .title {background-image:url('../images/event01/title.png');width:884px;height:171px;} .htmlWrapper section.event01 .contents_wrap .present_wrapper {width:1400px;display:flex;justify-content:space-between;margin-top:80px;} .htmlWrapper section.event01 .contents_wrap .event_wrapper {position:relative;background-image:url('../images/event01/event_cover.png?v=1');width:1400px;display:flex;flex-direction:column;align-items:center;margin-top:80px;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01{width:100%;display:flex;flex-direction:column;gap:0 0;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .e_title{margin-bottom:30px;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items{display:flex;align-items:start;width:100%;gap:0 40px;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .ttl{padding:58px 0 0 0;box-sizing:border-box;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel{display:flex;align-items:center;width:1300px;gap:0 0;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .sex{width:679px;height:140px;background-position:center;cursor:pointer;background-repeat:no-repeat;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .sex.sexF{background-image:url('../images/event01/woman.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .sex.sexM{background-image:url('../images/event01/man.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .sex.on{transition:.1s all;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .sex.sexF.on{background-image:url('../images/event01/woman_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .sex.sexM.on{background-image:url('../images/event01/man_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .sex:hover{transition:.1s all;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .sex.sexF:hover{background-image:url('../images/event01/woman_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .sex.sexM:hover{background-image:url('../images/event01/man_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel.sec {flex-direction:column;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .sec_wrap{display:flex;width:1300px;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age{width:349px;height:140px;background-position:center;background-repeat:no-repeat;text-indent:-9999px;cursor:pointer;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.on{transition:.1s all;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a01{background-image:url('../images/event01/age01.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a02{background-image:url('../images/event01/age02.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a03{background-image:url('../images/event01/age03.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a04{background-image:url('../images/event01/age04.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a05{background-image:url('../images/event01/age05.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a06{background-image:url('../images/event01/age06.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a07{background-image:url('../images/event01/age07.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a08{background-image:url('../images/event01/age08.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a01.on{background-image:url('../images/event01/age01_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a02.on{background-image:url('../images/event01/age02_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a03.on{background-image:url('../images/event01/age03_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a04.on{background-image:url('../images/event01/age04_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a05.on{background-image:url('../images/event01/age05_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a06.on{background-image:url('../images/event01/age06_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a07.on{background-image:url('../images/event01/age07_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a08.on{background-image:url('../images/event01/age08_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age:hover{transition:.1s all;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a01:hover{background-image:url('../images/event01/age01_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a02:hover{background-image:url('../images/event01/age02_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a03:hover{background-image:url('../images/event01/age03_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a04:hover{background-image:url('../images/event01/age04_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a05:hover{background-image:url('../images/event01/age05_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a06:hover{background-image:url('../images/event01/age06_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a07:hover{background-image:url('../images/event01/age07_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step01 .items .sel .age.a08:hover{background-image:url('../images/event01/age08_on.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02{position:relative;font-size:34px;font-family:'Pretendard',sans-serif;font-weight:700;margin-top:100px;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .etitle{margin-bottom:50px;padding:0 55px;box-sizing:border-box;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper{position:relative;display:flex;width:1400px;flex-wrap:wrap;margin:40px 0 0 0;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap{ position:relative;background-image:url('../images/event01/bg_card.png'); background-position:center; width:350px;height:551px; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; -o-transition: -o-transform 0.4s; transition: transform 0.4s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .front{ position:absolute; width:100%;height:100%;display:flex;flex-direction:column;align-items:center; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; z-index:2; } .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .back{ position:absolute; background-image:url('../images/event01/bg_card_back.png'); background-position:center; width:350px;height:551px; display:flex; flex-direction:column; align-items:center; border-radius:20px; overflow:hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); } .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap.flipped { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); } .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .front .ettl{height:96px;font-size:27px;font-weight:800;color:#111111;padding:30px 0 4px 0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .front .simple{height:70px;font-size:20px;font-weight:400;color:#777777;display:flex;align-items:center;justify-content:center;text-align:center;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .front .pic{width:303px;height:200px;border-radius:16px;overflow:hidden;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .front .pic img{width:100%;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .front .tag{display:flex;flex-wrap:wrap;gap:0 6px;font-size:18px;color:#9680FF;font-weight:400;padding:20px 20px 0 20px;box-sizing:border-box;letter-spacing:-1px;justify-content:center;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .front .tag i{color:#5033DA;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .front .btns{position:absolute;display:flex;width:100%;justify-content:center;left:0;bottom:25px;gap:0 8px;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .front .btns > div{position:relative;width:148px;height:64px;cursor:pointer;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .front .btns .btn_view{background-image:url('../images/event01/btn_view.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .front .btns .btn_sel{background-image:url('../images/event01/btn_select.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .front .btns .btn_sel .hand{bottom:-60px;right:-60px;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .front .btns .btn_sel.on::before{position:absolute;left:120px;top:-20px;content:'';background-image:url('../images/event01/set_heart.png');width:56px;height:56px;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .back .ettl{height:108px;font-size:27px;font-weight:800;color:#ffffff;padding:30px 0 16px 0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .back .tag{height:50px;display:flex;flex-wrap:wrap;gap:0 6px;font-size:18px;color:#FFFFFF;font-weight:400;padding:0 20px 0 20px;box-sizing:border-box;letter-spacing:-1px;justify-content:center;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .back .tag i{color:#BAACFF;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .back .stamp_wrap{width:100%;height:165px;display:flex;justify-content:center;align-items:center;gap:0 8px;margin:20px 0 0 0;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .back .stamp_wrap .photo{width:150px;height:150px;border-radius:50%;overflow:hidden;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .back .stamp_wrap .photo img{width:100%;height:100%;object-fit:cover;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .back .stamp_wrap .stamp{width:150px;height:150px;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .back .memo{width:100%;height:100px;font-size:22px;font-weight:400;color:#ffffff;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.4;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .back .btns{position:absolute;display:flex;width:100%;justify-content:center;left:0;bottom:25px;gap:0 8px;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .back .btns > div{position:relative;width:148px;height:64px;cursor:pointer;} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .back .btns .btn_view{background-image:url('../images/event01/btn_view2.png');} .htmlWrapper section.event01 .contents_wrap .event_wrapper .step02 .card_wrapper .card_wrap .back .btns .btn_sel_cancel{background-image:url('../images/event01/btn_cancel.png');} .htmlWrapper section.event01 .contents_wrap .char{position:absolute;right:0;bottom:-50px;width:610px;height:595px;background-image:url('../images/event01/friends.png');} .htmlWrapper section.event01 .heart_wrapper{position:absolute;bottom:0;left:0;width:100%;z-index:99999;} .htmlWrapper section.event01 .heart_wrapper .heart{position:absolute;background-image:url('../images/event01/icon_heart.png?v=1');width:106px;height:94px;bottom:0;left:-50px;scale:0;margin-left:150px;z-index:99999} .htmlWrapper section.event01 .heart_wrapper .heart.on.h01{animation:1s boom_heart01 forwards;} .htmlWrapper section.event01 .heart_wrapper .heart.on.h02{animation:1s boom_heart01 forwards;animation-delay:.3s;} .htmlWrapper section.event01 .heart_wrapper .heart.on.h03{animation:1s boom_heart01 forwards;animation-delay:.6s;} .htmlWrapper section.event01 .heart_wrapper .heart.on.h04{animation:1s boom_heart02 forwards;animation-delay:.2s;} .htmlWrapper section.event01 .heart_wrapper .heart.on.h05{animation:1s boom_heart02 forwards;animation-delay:.4s;} .htmlWrapper section.event01 .heart_wrapper .heart.on.h06{animation:1s boom_heart02 forwards;animation-delay:.6s;} .htmlWrapper section.event01 .heart_wrapper .heart.on.h07{animation:1s boom_heart03 forwards;animation-delay:.3s;} .htmlWrapper section.event01 .heart_wrapper .heart.on.h08{animation:1s boom_heart03 forwards;animation-delay:.6s;} .htmlWrapper section.event01 .heart_wrapper .heart.on.h09{animation:1s boom_heart03 forwards;animation-delay:.9s;} .htmlWrapper section.event01 .heart_wrapper .heart.on.h10{animation:1s boom_heart04 forwards;} .htmlWrapper section.event01 .heart_wrapper .heart.on.h11{animation:1s boom_heart04 forwards;animation-delay:.3s;} .htmlWrapper section.event01 .heart_wrapper .heart.on.h12{animation:1s boom_heart04 forwards;animation-delay:.6s;} .e_quick_wrapper {display:none;position:absolute;right:200px;top:500px;z-index:9;} .e_quick_wrapper .e_quick{position:fixed;background-image:url('../images/event01/e_quick.png');width:130px;height:200px;display:flex;align-items:center;justify-content:center;} .e_quick_wrapper .e_quick .nums_wrap{color:#efdfa4;font-family:'RiaSans-ExtraBold',sans-serif;font-size:30px;letter-spacing:-4px;} .e_quick_wrapper .e_quick .nums_wrap span.b{font-size:42px;} .evt01_pop {position:fixed;left:0;top:0;width:100%;height:100vh;display:flex;justify-content:center;padding:50px 0 0 0;box-sizing:border-box;z-index:99;background-color:rgba(0,0,0,.7);} .evt01_pop .evt01_pop_wrapper{position:relative;width:1050px;height:685px;background-image:url('../images/event01/bg_pop.png');padding:0 0 0 20px;box-sizing:border-box;border-radius:20px;} .evt01_pop .evt01_pop_wrapper .cont_wrapper {position:relative;width:100%;display:flex;justify-content:start;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .close{position:absolute;background-image:url('../images/event01/pop_close.png');width:72px;height:72px;cursor:pointer;right:-90px;top:0px;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .info_wrap{position:relative;width:344px;padding:20px 0 0 0;box-sizing:border-box;display:flex;flex-direction:column;justify-content:start;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .info_wrap .title{color:#FF1CB6;font-size:36px;font-family:'SBAggroB';} .evt01_pop .evt01_pop_wrapper .cont_wrapper .info_wrap .simple{color:#555555;font-size:24px;font-weight:400;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .info_wrap .tag_wrap{position:absolute;bottom:0;width:100%;display:flex;align-items:end;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .info_wrap .tag_wrap .tag{width:404px;height:499px;position:absolute;left:-60px;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .info_wrap .tag_wrap .tag img{width:100%;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .shorts_wrap{position:relative;width:310px;display:flex;flex-direction:column;align-items:center;padding:13px 0 0 0;box-sizing:border-box;margin-left:16px;display:none;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .shorts_wrap .s_ttl{font-size:22px;color:#252525;font-weight:700;margin-top:10px;text-align:center;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .shorts_wrap .short{position:relative;width:310px;height:656px;border-radius:13px;overflow:hidden;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .shorts_wrap .short iframe{width:100%;height:100%} .evt01_pop .evt01_pop_wrapper .cont_wrapper .shorts_wrap .short .ctl_sound{position:absolute;left:16px;bottom:15px;background-image:url('../images/event01/icon_sound.png');width:37px;height:30px;text-indent:-9999px;background-position:center left;background-repeat:no-repeat;background-size:cover;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .shorts_wrap .short .ctl_sound.off{background-image:url('../images/event01/icon_sound_off.png');} .evt01_pop .evt01_pop_wrapper .cont_wrapper .shorts_wrap .short .ctl_sound a{display:block;width:100%;height:100%;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .gallery_wrap{position:relative;width:688px;height:688px;padding:30px 0 0 0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;background-image:url('../images/event01/bg_gallery.png');} .evt01_pop .evt01_pop_wrapper .cont_wrapper .gallery_wrap .g_title{position:relative;width:100%;font-size:30px;color:#808998;font-weight:400;text-align:center;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .gallery_wrap .g_title span{font-size:30px;color:#3018A2;font-weight:600;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .gallery_wrap .g_title span.ttl{font-size:30px;color:#3018A2;font-weight:800;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .gallery_wrap .gallery{position:relative;width:500px;height:300px;display:flex;flex-direction:column;justify-content:center;margin-top:20px;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .gallery_wrap .gallery .swiper-slide {border-radius:8px;overflow:hidden;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .gallery_wrap .memo{font-size:19px;font-weight:300;color:#808998;line-height:1.3;margin-top:50px;padding:0 0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .gallery_wrap .pop-button-prev{position:absolute;background-image:url('../images/event01/btn_prev.png');width:48px;height:48px;top:125px;left:-64px;z-index:9;cursor:pointer;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .gallery_wrap .pop-button-next{position:absolute;background-image:url('../images/event01/btn_next.png');width:48px;height:48px;top:125px;right:-64px;z-index:9;cursor:pointer;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .gallery_wrap .pop-pagination{position:absolute;left:0;bottom:-30px;width:100%;display:flex;justify-content:center;align-items:center;z-index:10;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .gallery_wrap .pop-pagination .swiper-pagination-bullet{width:16px;height:16px;background:inherit;background-image:url('../images/event01/dot.png');opacity:1;} .evt01_pop .evt01_pop_wrapper .cont_wrapper .gallery_wrap .pop-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:inherit;width:16px;height:16px;background-image:url('../images/event01/dot_on.png');border:0;} .evt01_pop .evt01_pop_wrapper .btns_wrap {position:absolute;width:100%;bottom:35px;display:flex;justify-content:center;left:0;gap:0 20px;} .evt01_pop .evt01_pop_wrapper .btns_wrap > div {position:relative;width:240px;height:64px;cursor:pointer;} .evt01_pop .evt01_pop_wrapper .btns_wrap .btn_sel{background-image:url('../images/event01/btn_pop_select.png');} .evt01_pop .evt01_pop_wrapper .btns_wrap .btn_sel.on::before{position:absolute;left:145px;top:-25px;content:'';background-image:url('../images/event01/heart_pop.png');width:49px;height:46px;} .evt01_pop .evt01_pop_wrapper .btns_wrap .btn_sel .hand{bottom:-60px;} .evt01_pop .evt01_pop_wrapper .btns_wrap .btn_detail_view{background-image:url('../images/event01/btn_pop_detail.png');} .evt01_pop .evt01_pop_wrapper .btns_wrap .btn_detail_view a{display:block;width:100%;height:100%;} /* 이벤트 01 */ /* 순위 */ .htmlWrapper section.order {position:relative;width:100%;height:1750px;background-image:url('../images/order/bg.jpg');display:none;} .htmlWrapper section.order .contents_wrap{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;padding:80px 0 0 0;} .htmlWrapper section.order .contents_wrap > .title{position:relative;} .htmlWrapper section.order .contents_wrap > .search_wrapper{position:relative;background-image:url('../images/order/search_bar.png');width:1400px;height:132px;display:flex;align-items:center;justify-content:start;font-family:'Pretendard',sans-serif;color:#252525;font-weight:700;font-size:26px;z-index:2;margin:60px 0 0 0;} .htmlWrapper section.order .contents_wrap > .search_wrapper .sec01{position:relative;margin-right:50px;} .htmlWrapper section.order .contents_wrap > .search_wrapper .sec02{position:relative;width:560px;height:116px;display:flex;align-items:center;justify-content:end;background-image:url('../images/order/bg_gender.png');padding:0 20px;box-sizing:border-box;} .htmlWrapper section.order .contents_wrap > .search_wrapper .sec03{position:relative;width:560px;height:116px;display:flex;align-items:center;justify-content:end;background-image:url('../images/order/bg_age.png');padding:0 20px;box-sizing:border-box;} .htmlWrapper section.order .contents_wrap > .search_wrapper .s_box{width:420px;height:68px;background:#FFFFFF;border-radius:16px;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;font-size:22px;font-weight:400;padding:0 40px;box-sizing:border-box;cursor:pointer;z-index:2;position:absolute;left:112px;top:20px;box-shadow:0 4px 8px 0px #00000050;} .htmlWrapper section.order .contents_wrap > .search_wrapper .s_box .dir{width:27px;height:22px;background-image:url('../images/order/down_arrow.png');transition:.1s all} .htmlWrapper section.order .contents_wrap > .search_wrapper .s_box .dir.on{background-image:url('../images/order/up_arrow.png');} .htmlWrapper section.order .contents_wrap > .search_wrapper .s_list{display:none;position:absolute;left:112px;top:80px;width:420px;box-sizing:border-box;padding:0 10px;font-size:22px;font-weight:400;color:#656462;background:#FFFFFF;z-index:2;border-radius:16px;box-shadow:0 4px 8px 0px #00000050;} .htmlWrapper section.order .contents_wrap > .search_wrapper .s_list .sitem{height:54px;display:flex;align-items:center;border-bottom:1px solid #c8c8c8;padding:0 30px;box-sizing:border-box;cursor:pointer;} .htmlWrapper section.order .contents_wrap > .search_wrapper .s_list .sitem:last-child{border-bottom:0;} .htmlWrapper section.order .contents_wrap > .order_wrapper {position:relative;display:flex;flex-wrap:wrap;width:1400px;margin:30px auto 0 auto;gap:30px 16px;justify-content:start;} .htmlWrapper section.order .contents_wrap > .order_wrapper .oitems{position:relative;display:flex;flex-direction:column;width:267px;height:509px;background:#FFFFFF;border-radius:20px;box-sizing:border-box;} .htmlWrapper section.order .contents_wrap > .order_wrapper .oitems .order_wrap{position:relative;width:100%;height:90px;display:flex;justify-content:center;align-items:center;} .htmlWrapper section.order .contents_wrap > .order_wrapper .oitems .order_wrap .logo{position:absolute;top:20px;right:20px;} .htmlWrapper section.order .contents_wrap > .order_wrapper .oitems .order_wrap .grade{position:absolute;left:-23px;top:-30px;width:102px;height:120px;display:none;} .htmlWrapper section.order .contents_wrap > .order_wrapper .oitems .order_wrap .grade01{display:block;background-image:url('../images/order/grade01.png');} .htmlWrapper section.order .contents_wrap > .order_wrapper .oitems .order_wrap .grade02{display:block;background-image:url('../images/order/grade02.png');} .htmlWrapper section.order .contents_wrap > .order_wrapper .oitems .order_wrap .grade03{display:block;background-image:url('../images/order/grade03.png');} .htmlWrapper section.order .contents_wrap > .order_wrapper .oitems .photo{position:relative;margin-right:35px;width:100%;height:167px;} .htmlWrapper section.order .contents_wrap > .order_wrapper .oitems .photo img{width:100%;height:100%;object-fit:cover;} .htmlWrapper section.order .contents_wrap > .order_wrapper .oitems .info{position:relative;width:100%;padding:20px 0;box-sizing:border-box;} .htmlWrapper section.order .contents_wrap > .order_wrapper .oitems .info .ord{position:relative;} .htmlWrapper section.order .contents_wrap > .order_wrapper .oitems .info .title{position:relative;width:100%;height:66px;font-size:28px;color:#3018A2;font-family:'Pretendard',sans-serif;font-weight:800;margin-bottom:10px;word-break:break-all;display:flex;align-items:center;justify-content:center;text-align:center;} .htmlWrapper section.order .contents_wrap > .order_wrapper .oitems .info .title.o1{color:transparent;background: linear-gradient(#FFD904, #FFAE00);-webkit-background-clip: text;} .htmlWrapper section.order .contents_wrap > .order_wrapper .oitems .info .title.o2{color:transparent;background: linear-gradient(#9D93FF, #5042E0);-webkit-background-clip: text;} .htmlWrapper section.order .contents_wrap > .order_wrapper .oitems .info .title.o3{color:transparent;background: linear-gradient(#FF6251, #E8852E);-webkit-background-clip: text;} .htmlWrapper section.order .contents_wrap > .order_wrapper .oitems .info .exp{position:relative;font-size:20px;color:#555555;font-family:'Pretendard',sans-serif;font-weight:400;line-height:1.2;text-align:center;letter-spacing:-1px;} .htmlWrapper section.order .contents_wrap > .order_wrapper .oitems .btn_wrap{position:absolute;left:0;bottom:20px;width:100%;display:flex;justify-content:center;} .htmlWrapper section.order .contents_wrap > .order_wrapper .oitems .btn_wrap .btn_view{position:relative;width:177px;height:64px;background-image:url('../images/order/btn_view.png');cursor:pointer;} .htmlWrapper section.order .contents_wrap > .basic_wrapper {position:absolute;width:100%;left:0;bottom:120px;display:flex;flex-direction:column;align-items:center;} /* 순위 */ /* SNS SHARE */ section.snsshare {position:relative;width:100%;height:421px;background-image:url('../images/share/bg.jpg');} section.snsshare .content_wrapper {display:block;position:absolute;left:0;width:100%;height:100%;} section.snsshare .content_wrapper > .content_wrap{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;gap:0 0;} section.snsshare .content_wrapper > .content_wrap > .title{} section.snsshare .content_wrapper > .content_wrap > .sns_wrapper{position:relative;} section.snsshare .content_wrapper > .content_wrap > .sns_wrapper > ul{display:flex;gap:0 20px;} section.snsshare .content_wrapper > .content_wrap > .sns_wrapper > ul > li{} section.snsshare .content_wrapper > .content_wrap > .sns_wrapper > ul > li > a{display:block;width:100%;height:100%;} /* SNS */ /* 결과 */ section.e_result {position:relative;width:100%;height:1250px;background-image:url('../images/result/bg_result.png');padding:80px 0 0 0;box-sizing:border-box;} section.e_result .contents_wrap {width:100%;height:100%;display:flex;flex-direction:column;align-items:center;} section.e_result .contents_wrap .card_list_wrapper{position:relative;width:1480px;height:880px;margin-top:234px;} section.e_result .contents_wrap .card_list_wrapper .card_list{display:flex;flex-wrap:wrap;justify-content:space-between;} section.e_result .contents_wrap .card_list_wrapper .card_list .card{width:291px;height:430px;margin-bottom:24px;} section.e_result .contents_wrap .card_list_wrapper .card_list .card > div{position:relative;width:291px;height:430px;background-repeat:no-repeat;z-index:2;display:flex;justify-content:center;align-items:end;} section.e_result .contents_wrap .card_list_wrapper .card_list .card > div.crown{position:absolute;background-image:url('../images/result/crown.png');width:92px;height:59px;left:100px;top:-40px;z-index:0;} section.e_result .contents_wrap .card_list_wrapper .card_list .card .c01{background-image:url('../images/result/card01.png?v=1');} section.e_result .contents_wrap .card_list_wrapper .card_list .card .c02{background-image:url('../images/result/card02.png?v=1');} section.e_result .contents_wrap .card_list_wrapper .card_list .card .c03{background-image:url('../images/result/card03.png?v=1');} section.e_result .contents_wrap .card_list_wrapper .card_list .card .c04{background-image:url('../images/result/card04.png?v=1');} section.e_result .contents_wrap .card_list_wrapper .card_list .card .c05{background-image:url('../images/result/card05.png?v=1');} section.e_result .contents_wrap .card_list_wrapper .card_list .card .c06{background-image:url('../images/result/card06.png?v=1');} section.e_result .contents_wrap .card_list_wrapper .card_list .card .c07{background-image:url('../images/result/card07.png?v=1');} section.e_result .contents_wrap .card_list_wrapper .card_list .card .c08{background-image:url('../images/result/card08.png?v=1');} section.e_result .contents_wrap .card_list_wrapper .card_list .card .c09{background-image:url('../images/result/card09.png?v=1');} section.e_result .contents_wrap .card_list_wrapper .card_list .card .c10{background-image:url('../images/result/card10.png?v=1');} section.e_result .contents_wrap .card_list_wrapper .card_list .card > div .btn_view{background-image:url('../images/result/btn_result_view.png');width:151px;height:51px;margin-bottom:15px;cursor:pointer;} .open_tip {position:absolute;background-color:rgba(0,0,0,.9);color:#FFFFFF;top:-130px;padding:30px;text-align:center;border-radius:30px;left:100px;opacity:0;line-height:1.4;} .open_tip.on {animation:1s show_tip 1 linear forwards} .open_tip::before{position:absolute;content:'▼';color:#000000;bottom:-18px;left:130px;} /* 결과 */ /* 참여 정보 */ section.sec-join-info {position:relative;width:100%;height:180px;display:flex;justify-content:center;align-items:center;background:#ffffff;color:#444444;font-weight:600;font-family:'Pretendard',sans-serif;font-size:26px;border-top:2px solid #393c42;font-family:'GmarketSansLight',sans-serif;} section.sec-join-info > div{display:flex;align-items:center;font-size:32px;line-height:1;color:#000000;} section.sec-join-info > div .v_info{display:flex;align-items:center;margin-right:14px;} section.sec-join-info > div .v_info span{color:#555555;padding:0 8px 0 0;} section.sec-join-info > div .v_info span.j_visitor {color:#3018A2;font-size:48px;font-weight:800;padding:0 5px;margin-top:-5px;} section.sec-join-info > div .j_info{display:flex;align-items:center;} section.sec-join-info > div .j_info span{color:#555555;padding:0 8px 0 0;} section.sec-join-info > div .j_info span.j_join {font-size:48px;font-weight:800;padding:0 5px;color:#FF1CB6;margin-top:-5px;} /* 참여 정보 */ /* 참여 정보 */ section.sec-copyright {position:relative;width:100%;height:162px;display:flex;justify-content:center;align-items:center;background:#f0f0f0;color:#555555;font-size:18px;font-family:'Pretendard',sans-serif;font-weight:300px;} section.sec-copyright > .copyright {width:1300px;} section.sec-copyright > .copyright ul{} section.sec-copyright > .copyright ul li{float:left;width:60%;margin-bottom:10px;} 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:nth-child(1){margin-right:20px;} section.sec-copyright > .copyright ul li:nth-child(4) > div:nth-child(2){text-align:left;} section.sec-copyright > .copyright ul li:nth-child(4) span{font-weight:800} /* 고정 메뉴 */ .navigator_wrapper {position:fixed;left:0;bottom:0;width:100%;height:110px;z-index:11; bottom: 0px; background:#3018A2;display:none;} .navigator_wrapper .cont_wrap {width:1400px;margin:0 auto;background-image:url('../images/tab_bg.png');height:100%;padding:0 30px 0 25px;box-sizing:border-box;} .navigator_wrapper .cont_wrap .navi_wrap {width:100%;margin:0 auto;height:100%;display:flex;justify-content:space-between;align-items:center;} .navigator_wrapper .cont_wrap .navi_wrap > li{position:relative;box-sizing:border-box;height:100px;display:flex;justify-content:start;align-items:center;cursor:pointer;} .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(1) {} .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(2) {} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab01{width:577px;height:80px;background-image:url('../images/btn_join.png');} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab01 .hand{display:none;right:-40px;bottom:-40px;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab01.on{background-image:url('../images/btn_join_on.png');} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab01.on .hand{display:block;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab02{display:flex;align-items:center;font-size:32px;color:#FFFFFF;font-weight:600;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab02 span.num{font-size:52px;font-weight:700;padding:0 5px 0 12px;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_top{background-image:url('../images/top.png');width:80px;height:80px;cursor:pointer;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab01.result{background-image:url('../images/tab01_result.png');height:82px;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab02.result{background-image:url('../images/tab02_result.png');height:82px;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab01.result.on{background-image:url('../images/nav01_result.png');} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab02.result.on{background-image:url('../images/nav02_result.png');} .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: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:40px;height:39px;display:inline-block;margin-top:13px;margin-right:20px;cursor:pointer;background-size:100%;} .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:94px;height:112px;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;} /* 슬라이드 */ .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/btn_cardnews_prev.png');width:70px;height:70px;left:-110px;top:315px;cursor:pointer;} .cardnew-swiper-button-next {position:absolute;background-image:url('../images/btn_cardnews_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);} /* 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.85); 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:675px; 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:130px; 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:44px; line-height:44px; 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:134px; } .pu_event_info .p_con .ty01 dd.num i { float:left; width:20px; text-align:center; color:#fff; line-height:44px; } .pu_event_info .p_con .ty02 { margin-top:30px;} .pu_event_info .p_con .ty02 dt { margin-bottom:10px; margin-top:20px;} .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:#fff4e4; padding:15px 20px; } .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 { float:left; width:50%; display:flex; justify-content:center;align-items:center;height:100px; line-height:1.2; text-align:center; font-size:30px; color:#fff; font-weight:800; } .pu_event_info .btns a:hover { text-decoration:none; } .pu_event_info .btns a.bt_participate_done {position:relative;background:#FF1CB6;} .pu_event_info .btns a.bt_participate_done .hand{right:40px;bottom:-20px;} .pu_event_info .btns a.bt_participate_done.i01 {background:#07788F;} .pu_event_info .btns a.bt_participate_done.i02 {background:#B7612B;} .pu_event_info .btns a.bt_participate_done.i03 {background:#316F52;} .pu_event_info .btns a.bt_participate_done.i04 {background:#B02923;} .pu_event_info .btns a.bt_cancel {background:#333;} .pu_event_info table { width:100%; color:#333; line-height:18px; } .pu_event_info table th { font-size:16px; padding:10px; vertical-align:top; } .pu_event_info table td { font-size:16px; padding:10px; 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:32px; height:32px; line-height:32px; margin:-10px 0 0 10px; text-align:center; vertical-align:middle; background:url(../images/cb.png?v=1) no-repeat 0 0; } .pu_event_info .checks input[type="checkbox"]:checked + label:after { background:url(../images/cb_on.png?v=3) no-repeat 0 0; } .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 { 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 a .hand{bottom:-60px;right:210px;} .pu_event_done.e01 {background:#000000;} .pu_event_done.e02 {background:#000000;} .pu_event_done.e03 {background:#000000;} .tc {text-align:center;} #scrollbar ::-webkit-scrollbar { width: 4px; height: 4px;} #scrollbar ::-webkit-scrollbar-track {background-color: rgba(0,0,0,0.2); border-radius: 4px;} #scrollbar ::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); border-radius: 4px;} .container { --color: #fff; --size: 30px; display: flex; justify-content: center; align-items: center; position: absolute; cursor: pointer; font-size: var(--size); user-select: none; fill: var(--color); right:100px; bottom:90px; scale: 3.5; } .container .mute { position: absolute; animation: keyframes-fill .5s; } .container .voice { position: absolute; display: none; animation: keyframes-fill .5s; } /* ------ On check event ------ */ .container input:checked ~ .mute { display: none; } .container input:checked ~ .voice { display: block; } /* ------ Hide the default checkbox ------ */ .container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .lang_wrapper {position:absolute;display:flex;left:-270px;padding:0 20px;z-index:5;align-items:center;top:10px;} .lang_wrapper .search_wrap{position:relative;width:150px;height:35px;} .lang_wrapper .select{position:absolute;left:0;top:0;display:flex;flex-direction:column;width:150px;height:35px;overflow:hidden;justify-content:start;padding:5px;background:#FFFFFF;transition:.5 all} .lang_wrapper .select::before{position:absolute;content:'▼';right:10px;top:7px;font-size:14px;transition:.5 all} .lang_wrapper .select.on{height:220px;} .lang_wrapper .select.on::before{content:'▲';right:10px;top:7px;transition:.5 all} .lang_wrapper .select > div{margin-bottom:10px;height:45px;display:flex;align-items:center;padding:0 10px;cursor:pointer;} .lang_wrapper .sch{background:#13274e;color:#FFFFFF;height:100%;padding:5px 10px;font-size:17px;height:35px;display:flex;align-items:center;cursor:pointer;}