body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } body::after{ position:absolute; width:0; height:0; overflow:hidden; z-index:-1; content:url('../images/v_01.jpg?v=1') url('../images/v_02.jpg?v=1') url('../images/v_03.jpg?v=1') url('../images/v_04.jpg?v=1') url('../images/v_05.jpg?v=1') url('../images/v_06.jpg?v=1') url('../images/e_info2050.png') url('../images/e_info15.png') url('../images/e_info100.png') url('../images/e_info40.png') url('../images/e_info0.png'); } .htmlWrapper {width:100%;max-width:1920px;margin:0 auto;min-width:1400px;padding-bottom:100px;} .htmlWrapper section {background-position:center;} /* 상단 */ .htmlWrapper section.top_wrapper {position:relative;display:block;width:100%;height:50px;line-height:50px;text-align:center;padding-top:10px;box-sizing:border-box;} .htmlWrapper section.top_wrapper > .hx_top{position:relative;background-image:url('../images/top_hx.jpg');width:611px;height:31px;margin:0 auto;} .htmlWrapper section.top_wrapper > .hx_top .link_daum {position:absolute;width:73px;height:29px;} .htmlWrapper section.top_wrapper > .hx_top .link_comp {position:absolute;width:150px;height:29px;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%;background:#FFFFFF;;height:933px;background-position:center;overflow:hidden;} .htmlWrapper section.visual_wrapper .v_step_info {position:absolute;left:0;top:-50px;width:100%;height:983px;z-index:0;background-size:cover;background-position:center;} .htmlWrapper section.visual_wrapper .v_step_info.v01 {background-image:url('../images/v_01.jpg?v=1');} .htmlWrapper section.visual_wrapper .v_step_info.v02 {background-image:url('../images/v_02.jpg?v=1');} .htmlWrapper section.visual_wrapper .v_step_info.v03 {background-image:url('../images/v_03.jpg?v=1');} .htmlWrapper section.visual_wrapper .v_step_info.v04 {background-image:url('../images/v_04.jpg?v=1');} .htmlWrapper section.visual_wrapper .v_step_info.v05 {background-image:url('../images/v_05.jpg?v=1');} .htmlWrapper section.visual_wrapper .v_step_info.v06 {background-image:url('../images/v_06.jpg?v=1');} .htmlWrapper section.visual_wrapper .v_step_info .v_m_cont {position:relative;width:1200px;margin:0 auto;height:100%;} .htmlWrapper section.visual_wrapper .v_step_info .v_ball_wrapper {position:absolute;right:-50px;top:120px;height:690px;width:97px;} .htmlWrapper section.visual_wrapper .v_step_info .v_ball_wrapper .v_ball{position:absolute;background-image:url('../images/earth.png');width:97px;height:99px;bottom:0;} .htmlWrapper section.visual_wrapper .v_step_info .v_ball_wrapper .v_ball .v_txt {position:absolute;right:100px;top:10px;color:#244d5a;font-size:22px;display:inline-block;width:261px;height:71px;background-image:url('../images/bg_txt.png');padding:10px 30px 0 0;box-sizing:border-box;text-align:right;} .htmlWrapper section.visual_wrapper .v_step_info .v_ball_wrapper .v_ball .v_txt span {font-weight:700;} .htmlWrapper section.visual_wrapper .sns_wrapper {position:absolute;width:100%;left:0;top:30px;z-index:2;display:none;} .htmlWrapper section.visual_wrapper .sns_wrapper .sns_wrap {position:relative;width:1200px;margin:0 auto;} .htmlWrapper section.visual_wrapper .sns_wrapper .sns_wrap .sns{width:190px;height:34px;background-image:url('../images/sns.png');} .htmlWrapper section.visual_wrapper .sns_wrapper .sns_wrap .sns ul{} .htmlWrapper section.visual_wrapper .sns_wrapper .sns_wrap .sns ul > li{position:relative;float:left;width:33px;height:33px;margin-right:6px;box-sizing:border-box;cursor:pointer;} .htmlWrapper section.visual_wrapper .sns_wrapper .sns_wrap .sns ul > li:last-child{margin-right:0;} .htmlWrapper section.visual_wrapper .sns_wrapper .sns_wrap .sns ul > li a{display:block;width:100%;height:100%;text-indent:-9999px;} /* 영상 */ .htmlWrapper section.movie_wrapper {position:relative;width:100%;height:598px;background-image:url('../images/bg_movie.jpg');} .htmlWrapper section.movie_wrapper .movie_wrap {position:absolute;width:100%;left:0;top:113px;} .htmlWrapper section.movie_wrapper .movie_wrap .movie {position:relative;width:722px;height:407px;margin:0 auto;} .htmlWrapper section.movie_wrapper .movie_wrap .movie iframe{width:100%;height:100%;} /* 영상 */ /* 다음 */ .htmlWrapper section.daum_wrapper {position:relative;width:100%;background-image:url('../images/bg_daum.jpg');height:294px;background-position:center;} .htmlWrapper section.daum_wrapper > .daum_wrap {} .htmlWrapper section.daum_wrapper > .daum_wrap .keyword{position:absolute;width:400px;height:50px;top:150px;left:300px;font-size:35px;font-weight:700;color:#323232;} .htmlWrapper section.daum_wrapper > .daum_wrap .keyword::before { content: "탄소중립바로알기캠페인"; position: absolute; display:inline-block; top: 0; left: 0; width: 100%; font-weight:700; height: 100%; color: #333333; font-size:40px; overflow: hidden; border-right: 1px solid black; animation: typing 5s steps(31); animation-iteration-count: 3; } .htmlWrapper section.daum_wrapper > .daum_keyword_list_wrapper {position:absolute;bottom:50px;text-align:center;width:100%;} .htmlWrapper section.daum_wrapper > .daum_keyword_list_wrapper .keyword_list {position:relative;display:inline-block;font-size:24px;color:#297c98;margin-left:50px;font-weight:500;text-align:left;} /* 다음 */ /* 이벤트 01 */ .htmlWrapper section.event_wrapper {position:relative;width:100%;height:2008px;background-image:url('../images/bg_event1.jpg');} .htmlWrapper section.event_wrapper .event_start {position:absolute;left:0;top:840px;width:100%;} .htmlWrapper section.event_wrapper .event_start .game_bg {position:relative;width:1126px;height:788px;background-image:url('../images/bg_event1_start.png');margin:0 auto;z-index:3;} .htmlWrapper section.event_wrapper .event_start .game_bg .btn_wrap {position:absolute;bottom:155px;width:100%;height:0;left:0;} .htmlWrapper section.event_wrapper .event_start .game_bg .btn_wrap .btn{width:310px;height:95px;margin:0 auto;background-image:url('../images/btn_evt1_start.png');cursor:pointer;position:relative;} .htmlWrapper section.event_wrapper .event_start .game_bg .btn_wrap .btn.result{background-image:url('../images/event1_done.png');} .htmlWrapper section.event_wrapper .event_wrap {position:absolute;left:0;top:840px;width:100%;} .htmlWrapper section.event_wrapper .event_wrap .game_bg {position:relative;width:1126px;height:788px;background-image:url('../images/evt1_game_bg.png');margin:0 auto;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_step {width:100%;height:49px;text-align:center;padding-top:90px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_step span{position:relative;display:inline-block;width:49px;height:49px;line-height:49px;background-image:url('../images/evt1_pos_off.png');background-position:center;background-repeat:no-repeat;margin-right:95px;font-size:18px;color:#878787;font-weight:700;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_step span:last-child{margin-right:0;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_step span.on{background-image:url('../images/evt1_pos_on.png');color:#FFFFFF;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_step span.comp{background-image:url('../images/evt1_pos_complete.png');color:#FFFFFF;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_step span::after{position:absolute;content:'';width:116px;height:2px;background:#d6d6d6;top:23px;left:44px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_step span.on::after{position:absolute;content:'';width:116px;height:2px;background:#e74646;top:23px;left:44px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_step span.on::after{position:absolute;content:'';width:116px;height:2px;background:#e74646;top:23px;left:44px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_step span:last-child::after{position:absolute;content:'';width:0;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_step span.on:last-child::after{position:absolute;content:'';width:0;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content {position:relative;width:100%;text-align:left;;height:640px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_info {position:relative;width:100%;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_info .title{color:#0c466d;font-size:58px;padding:25px 0 0 0;text-align:center;margin-bottom:60px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_info .title span {font-weight:700;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap {position:relative;width:100%;padding:0 64px 0 64px;box-sizing:border-box;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap .photo {float:left;width:335px;height:335px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap .txt_wrap {float:right;width:660px;padding:0 0 0 55px ;box-sizing:border-box;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap .txt_wrap > .ttl{position:relative;width:100%;height:80px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap .txt_wrap > .ttl > .eraser_wrap > .e_bg > .img_wrap{width:100%;height:100%;padding:0 0 0 0;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap .txt_wrap > .ttl > .eraser_wrap > .e_bg > .img_wrap > .cover{position:absolute;background-image:url('../images/eraser_bg.png');width:215px;height:89px;margin:0 auto;top:-30px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap .txt_wrap > .ttl > .eraser_wrap > .e_bg > .img_wrap > .nation{padding-left:30px;margin-top:-10px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap .txt_wrap > .ttl > .eraser_wrap {position:absolute;z-index:2;width:100%;height:100%;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap .txt_wrap > .ttl > .eraser_wrap > .e_bg{width:233px;height:97px; margin-left:150px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap .txt_wrap > .ttl > .eraser_wrap > .e_bg > .stitle{position:absolute;top:0;left:0;font-size:27px;font-weight:700;color:#323232;padding:5px 0 0 0} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap .txt_wrap > .ttl > .eraser_wrap > .eraser {position:absolute;background-image:url('../images/eraser.png');width:99px;height:111px;right:120px;top:-40px;cursor:pointer;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap .txt_wrap > .ttl > .eraser_wrap > .eraser.on {animation: zoom 1s infinite;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap .txt_wrap > .ttl > .eraser_wrap > .eraser_txt {position:absolute;background-image:url('../images/eraser_ment.png');width:93px;height:95px;right:20px;top:-70px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap .txt_wrap > .cont{font-size:23px;color:#323232;line-height:1.5;letter-spacing:-1px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap .txt_wrap > .cont span {position:relative;font-weight:700;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap .txt_wrap > .cont span.point {font-size:30px;color:#e74646;letter-spacing:-1px;padding-right:3px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap .txt_wrap > .cont span.point .mark {position:absolute;background-image:url('../images/eraser_txt1.png');width:77px;height:51px;top:-5px;left:-4px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap .txt_wrap > .cont span.point .mark.st1 {width:150px;height:108px;top:-34px;left:-41px;background-position:center;background-repeat:no-repeat;} #htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap .txt_wrap > .cont span.point::before {content:'';background-image:url('../images/eraser_txt1.png');width:77px;height:51px;position:absolute;top:-7px;left:-4px} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .btn_wrap {position:absolute;right:30px;bottom:20px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .btn_wrap .btn{width:121px;height:108px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .btn_wrap .btn.prev{float:left;background-image:url('../images/btn_evt1_prev.png');cursor:pointer;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .btn_wrap .btn.next{float:right;background-image:url('../images/btn_evt1_next.png');cursor:pointer;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .btn_wrap.full {width:93%} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .btn_wrap.full .btn.prev{float:left;background-image:url('../images/btn_evt1_prev.png');} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap {position:relative;width:100%;padding:0 0 0 0;box-sizing:border-box;display:flex;flex-wrap:wrap;margin-top:-30px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap .qitem {width:308px;height:377px;margin-right:36px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap .qitem:last-child{margin-right:0;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap .qitem .photo_wrap {width:100%;height:282px;text-align:center;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap .qitem .photo_wrap.i01 {background-image:url('../images/evt1_pic03_1.png');} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap .qitem .photo_wrap.i02 {background-image:url('../images/evt1_pic03_2.png');} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap .qitem .photo_wrap.i03 {background-image:url('../images/evt1_pic03_3.png');} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap .qitem .photo_wrap {width:100%;height:282px;text-align:center;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap .qitem .photo_wrap.i01 {background-image:url('../images/evt1_pic03_1.png');} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap .qitem .photo_wrap.i02 {background-image:url('../images/evt1_pic03_2.png');} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap .qitem .photo_wrap.i03 {background-image:url('../images/evt1_pic03_3.png');} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap .qitem .ttl {width:100%;height:114px;font-size:23px;color:#323232;text-align:center;padding:14px 0 0 0;box-sizing:border-box;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap .qitem .ttl span{font-weight:500;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap .qitem .photo_wrap > .img_wrap{position:relative;width:100%;height:100%;padding:0 0 0 0;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap .qitem .photo_wrap > .img_wrap > .cover{position:absolute;margin:0 auto;top:0;left:20px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap .qitem .photo_wrap > .img_wrap > .nation{padding-top:15px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap .qitem .photo_wrap.i01 > .img_wrap > .cover{background-image:url('../images/eraser_bg3_1.png');width:178px;height:73px;left:60px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap .qitem .photo_wrap.i02 > .img_wrap > .cover{background-image:url('../images/eraser_bg3_2.png');width:269px;height:73px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap .qitem .photo_wrap.i03 > .img_wrap > .cover{background-image:url('../images/eraser_bg3_3.png');width:269px;height:73px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap > .eraser {position:absolute;background-image:url('../images/eraser.png');width:99px;height:111px;right:120px;top:-40px;cursor:pointer;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap > .eraser.on {animation: zoom 1s infinite;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .t_wrap > .eraser_txt {position:absolute;background-image:url('../images/eraser_ment.png');width:93px;height:95px;right:20px;top:-70px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st4 .qitem .ttl {width:100%;height:105px;font-size:23px;color:#323232;text-align:center;padding:0 0 0 0;box-sizing:border-box;border-left:1px solid #d9d9d9;border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st4 .qitem .ttl span{font-weight:500;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st4 .qitem {width:272px;height:392px;margin-right:88px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st4 .qitem:last-child{margin-right:0;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st4 .qitem .photo_wrap {position:relative;width:100%;height:282px;text-align:center;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st4 .qitem .photo_wrap.f01 {background-image:url('../images/evt1_pic04_1.png');} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st4 .qitem .photo_wrap.f01::after {position:absolute;content:'';background-image:url('../images/arrow.png');width:49px;height:32px;right:-66px;top:173px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st4 .qitem .photo_wrap.f02 {background-image:url('../images/evt1_pic04_2.png');} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st4 .qitem .photo_wrap.f02::after {position:absolute;content:'';background-image:url('../images/arrow.png');width:49px;height:32px;right:-66px;top:173px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st4 .qitem .photo_wrap.f03 {background-image:url('../images/evt1_pic04_3.png');} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st4 .qitem .ttl.f01 {padding-top:30px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st4 .qitem .ttl.f03 {padding-top:20px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st4 .qitem .ttl .img_wrap {position:relative;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st4 .qitem .ttl.f01 .img_wrap .cover.pic01 {position:absolute;background-image:url('../images/eraser_bg4_1.png');width:169px;height:71px;left:30px;margin-top:-10px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st4 .qitem .ttl.f02 {} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st4 .qitem .ttl.f02 .img_wrap .cover.pic02 {position:absolute;background-image:url('../images/eraser_bg4_2.png');width:213px;height:69px;left:10px;margin-top:30px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st5 {width:100%;text-align:center;display:inline-block;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st5 .img {background-image:url('../images/scale.png');width:403px;height:244px;margin:0 auto;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st5 .info {margin-top:30px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st5 .info span{color:#2a7cb1;font-weight:700;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st5 .info .img_wrap {margin-top:20px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st5 .info .img_wrap img{margin:0 20px 0 20px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st5 .info .img_wrap .cover {position:absolute;background-image:url('../images/eraser_bg5_1.png');width:204px;height:85px;left:360px;margin-top:-15px;} .htmlWrapper section.event_wrapper .event_wrap .game_bg .game_content .ebox_wrap.st5 .qitem .ttl span{font-weight:500;} .lh44 {line-height:44px;} .htmlWrapper section.event_wrapper .event_wrap_complete {position:absolute;left:0;top:840px;width:100%;display:none;} .htmlWrapper section.event_wrapper .event_wrap_complete .game_content_complete .game_bg {position:relative;width:1126px;height:788px;background-image:url('../images/evt1_game_complete_bg.png');margin:0 auto;} .htmlWrapper section.event_wrapper .event_wrap_complete .game_content_complete .game_bg .btns {position:absolute;width:100%;bottom:120px;text-align:center;z-index:5;cursor:pointer;height:0;} .htmlWrapper section.event_wrapper .event_wrap_complete .game_content_complete .game_bg .btns .join{position: relative;width: 310px;height: 95px;margin: 0 auto;} .htmlWrapper section.event_wrapper .event_wrap_complete .game_content_complete .game_bg .btn_wrap {position:absolute;right:30px;bottom:20px;} .htmlWrapper section.event_wrapper .event_wrap_complete .game_content_complete .game_bg .btn_wrap .btn{width:121px;height:108px;cursor:pointer;} .htmlWrapper section.event_wrapper .event_wrap_complete .game_content_complete .game_bg .btn_wrap .btn.prev{float:left;background-image:url('../images/btn_evt1_prev.png');} .htmlWrapper section.event_wrapper .event_wrap_complete .game_content_complete .game_bg .btn_wrap .btn.next{float:right;background-image:url('../images/btn_evt1_next.png');} .htmlWrapper section.event_wrapper .event_wrap_complete .game_content_complete .game_bg .btn_wrap.full {width:93%} .htmlWrapper section.event_wrapper .event_wrap_complete .game_content_complete .game_bg .btn_wrap.full .btn.prev{float:left;background-image:url('../images/btn_evt1_prev.png');} /* 이벤트 01 */ /* SNS 링크 */ .htmlWrapper section.snslink_wrapper {position:relative;width:100%;height:455px;background-image:url('../images/bg_sns.jpg');} .htmlWrapper section.snslink_wrapper .snslink_wrap{position:absolute;left:0;width:100%;top:268px;} .htmlWrapper section.snslink_wrapper .snslink_wrap .sns{width:520px;margin:0 auto;padding-left:14px;box-sizing:border-box;} .htmlWrapper section.snslink_wrapper .snslink_wrap .sns ul{} .htmlWrapper section.snslink_wrapper .snslink_wrap .sns ul li{position:relative;float:left;width:84px;height:84px;box-sizing:border-box;margin-right:56px;cursor:pointer;} .htmlWrapper section.snslink_wrapper .snslink_wrap .sns ul li a{display:block;width:100%;height:100%;text-indent:-9999px;} .htmlWrapper section.snslink_wrapper .snslink_wrap .sns ul li:last-child{margin-right:0;} /* SNS 링크 */ /* 이벤트 02 */ .htmlWrapper section.event02_wrapper {position:relative;width:100%;height:1718px;background-image:url('../images/bg_event2.jpg');} .htmlWrapper section.event02_wrapper > .event02_wrap {position:absolute;top:857px;width:100%;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items{position:relative;width:1083px;margin:0 auto;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .ani_cursor {position:absolute;top:225px;left:450px;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .ani_cursor > .hand{ position:absolute; background-image:url('../images/hand_ani.png'); width:102px; height:96px; animation-name: move_right; animation-duration:2s; animation-delay:1s; animation-duration: leaner; animation-direction:normal; animation-fill-mode: forwards; animation-iteration-count: infinite; } .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .item_wrap {float:left;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .item_wrap > .item{position:absolute;width:100%;cursor:pointer;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .item_wrap > .ritem{position:absolute;width:100%;cursor:pointer;display:none;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .evt02_items_cover{float:right;position:relative;width:499px;height:500px;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .evt02_items_cover > .over {position:absolute;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:2;border-radius:10px;display:none;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .evt02_items_cover > .over.on {display:block;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .evt02_items_cover > .over > .btn_join_wrap {position:absolute;top:194px;left:17px;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .evt02_items_cover > .over > .btn_join_wrap > .btn_join {background-image:url('../images/btn_join.png');width:463px;height:122px;cursor:pointer;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .evt02_items_cover > .info {position:relative;width:499px;height:500px;z-index:1;border-radius:10px;overflow:hidden;display:none;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .evt02_items_cover > .info > .btns {position:absolute;bottom:0;right:0;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .evt02_items_cover > .info > .btns > .btn {background-image:url('../images/btn_confirm.png');width:200px;height:92px;cursor:pointer;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .evt02_items_cover.e01 > .info {display:block;background-image:url('../images/e_info2050.png');} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .evt02_items_cover.e02 > .info {display:block;background-image:url('../images/e_info15.png');} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .evt02_items_cover.e03 > .info {display:block;background-image:url('../images/e_info100.png');} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .evt02_items_cover.e04 > .info {display:block;background-image:url('../images/e_info40.png');} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .evt02_items_cover.e05 > .info {display:block;background-image:url('../images/e_info0.png');} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .item_wrap > .item.item01{background-image:url('../images/m2050.png');width:183px;height:78px;top:70px;left:30px; animation:zoom 2s infinite;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .item_wrap > .item.item02{background-image:url('../images/m15.png');width:92px;height:78px;top:20px;left:250px;animation:zoom 2s infinite;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .item_wrap > .item.item03{background-image:url('../images/m100.png');width:136px;height:78px;top:130px;left:370px;animation:zoom 2s infinite;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .item_wrap > .item.item04{background-image:url('../images/m40.png');width:109px;height:78px;top:400px;left:250px;animation:zoom 2s infinite;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .item_wrap > .item.item05{background-image:url('../images/m0.png');width:60px;height:78px;top:340px;left:85px;animation:zoom 2s infinite;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .item_wrap > .ritem.item01{background-image:url('../images/m2050.png');width:183px;height:78px;top:70px;left:30px;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .item_wrap > .ritem.item02{background-image:url('../images/m15.png');width:92px;height:78px;top:20px;left:250px;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .item_wrap > .ritem.item03{background-image:url('../images/m100.png');width:136px;height:78px;top:130px;left:370px;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .item_wrap > .ritem.item04{background-image:url('../images/m40.png');width:109px;height:78px;top:400px;left:250px;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .item_wrap > .ritem.item05{background-image:url('../images/m0.png');width:60px;height:78px;top:340px;left:85px;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .item_wrap > .ritem.on{background-image:url('../images/stamp.png');width:187px;height:187px;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .item_wrap > .ritem.on.item01{top:20px;left:0;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .item_wrap > .ritem.on.item02{top:-50px;left:200px;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .item_wrap > .ritem.on.item03{top:85px;left:365px;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .item_wrap > .ritem.on.item04{top:340px;left:215px;} .htmlWrapper section.event02_wrapper > .event02_wrap > .evt02_items > .item_wrap > .ritem.on.item05{top:280px;left:10px;} /* 이벤트 02 */ /* 유투브 */ .htmlWrapper section.youtube_wrapper {position:relative;width:100%;height:1117px;background-image:url('../images/bg_youtube.jpg');} .htmlWrapper section.youtube_wrapper > .youtube_wrap{position:absolute;width:100%;top:329px;} .htmlWrapper section.youtube_wrapper > .youtube_wrap > .youtube_list{position:relative;width:968px;margin:0 auto;left:29px;} .htmlWrapper section.youtube_wrapper > .youtube_wrap > .youtube_list ul{} .htmlWrapper section.youtube_wrapper > .youtube_wrap > .youtube_list ul li{float:left;width:460px;height:352px;margin-right:48px;} .htmlWrapper section.youtube_wrapper > .youtube_wrap > .youtube_list ul li:nth-child(2n+2){margin-right:0;} .htmlWrapper section.youtube_wrapper > .youtube_wrap > .youtube_list ul li .youtube {width:460px;height:258px;box-sizing:border-box;overflow:hidden;border-radius:3px;} .htmlWrapper section.youtube_wrapper > .youtube_wrap > .youtube_list ul li .youtube iframe {width:100%;height:100%;} .htmlWrapper section.youtube_wrapper > .youtube_wrap > .youtube_list ul li .title {width:100%;height:65px;line-height:65px;text-align:center;font-size:32px;color:#111f05;font-weight:700;} /* 유투브 */ /* 이벤트 03 */ .htmlWrapper section.event03_wrapper {position:relative;width:100%;height:1953px;background-image:url('../images/bg_event_a3.jpg');} .htmlWrapper section.event03_wrapper > .event03_wrap {position:relative;width:100%;display:inline-block;text-align:center;} .htmlWrapper section.event03_wrapper > .event03_wrap .head {width:1080px;height:702px;margin:0 auto;} .htmlWrapper section.event03_wrapper > .event03_wrap .out_card_wrapper {position:relative;width:1100px;margin:0 auto;padding-top:90px;} .htmlWrapper section.event03_wrapper > .event03_wrap .out_card_wrapper .out_card_list {float:left;width:199px;height:265px;margin-right:24px;} .htmlWrapper section.event03_wrapper > .event03_wrap .out_card_wrapper .out_card_list:last-child {margin-right:0;} .out_card {width:199px;height:265px;z-index:9;cursor:pointer;} .out_card.o01 {background-image:url('../images/evt_cover_r_1.png?v=1');} .out_card.o02 {background-image:url('../images/evt_cover_r_2.png?v=1');} .out_card.o03 {background-image:url('../images/evt_cover_r_3.png?v=1');} .out_card.o04 {background-image:url('../images/evt_cover_r_4.png?v=1');} .out_card.o05 {background-image:url('../images/evt_cover_r_5.png?v=1');} .out_card.o01.on {animation: zoom_3 1.5s infinite;} .out_card.o02.on {animation: zoom_3 1.5s infinite;} .out_card.o03.on {animation: zoom_3 1.5s infinite;} .out_card.o04.on {animation: zoom_3 1.5s infinite;} .out_card.o05.on {animation: zoom_3 1.5s infinite;} .htmlWrapper section.event03_wrapper > .event03_wrap .out_guide_wrapper {position:relative;width:1200px;margin:240px auto;height:0;} .htmlWrapper section.event03_wrapper > .event03_wrap .out_guide_wrapper .out_guide {position:absolute;background-image:url('../images/out_guide.png');width:292px;height:94px;left:-120px;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper {position:relative;width:1736px;height:818px;margin:-10px auto;display:inline-block;background-position:-35px 0;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap {position:absolute;width:100%;height:0;top:380px;left:0;padding-left:80px;box-sizing:border-box;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale{position:relative;background-image:url('../images/bg_scale.png');width:995px;height:74px;margin:0 auto;transition: all ease 1s;left:-40px;background-repeat:no-repeat;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale.step1 {transform: rotate(-10deg)} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .btns {position:relative;width:100%;position:absolute;left:0;margin-top:90px;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .btns .btn{position:relative;background-image:url('../images/btn_evt3_join.png');width:430px;height:90px;margin:0 auto;cursor:pointer;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .btns .btn.result{background-image:url('../images/event3_done.png');width:462px;height:122px;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .btns .btn.on{background-image:url('../images/btn_evt3_join_ok.png');width:462px;height:122px;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .btns .btn .b_hand {display:none;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover_wrap{position:relative;z-index:2;width:320px;margin:0 auto;text-align:center;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper {position:absolute;z-index:2;width:254px;margin:0 auto;text-align:center;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .earth_face{display:inline-block;position:absolute;z-index:5;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .earth_face.ok {background-image:url('../images/earth_ok.png');width:183px;height:263px;left:30px;bottom:90px;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .earth_face.bad {background-image:url('../images/earth_1.png');width:254px;height:182px;left:-40px;bottom:90px;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .earth_face.bad.stp1 {transform: rotate(80deg);transition: all ease 1s;left:-10px;bottom:110px;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .earth_face.bad.stp2 {transform: rotate(60deg);transition: all ease 1s;left:-22px;bottom:110px;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .earth_face.bad.stp3 {transform: rotate(40deg);transition: all ease 1s;left:-30px;bottom:110px;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .earth_face.bad.stp4 {transform: rotate(20deg);transition: all ease 1s;left:-39px;bottom:110px;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .earth_face.bad.stp5 {transform: rotate(0deg);transition: all ease 1s;left:-42px;bottom:90px;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .earth_face.good {background-image:url('../images/earth_3.png');width:240px;height:183px;left:30px;bottom:90px;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .earth_face.same {background-image:url('../images/earth_2.png');width:183px;height:263px;left:30px;bottom:90px;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .axis{display:inline-block;background-image:url('../images/axis.png');width:104px;height:120px;left:0;z-index:3;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .b_box {position:absolute;width:510px;height:305px;left:-470px;top:-300px;overflow:hidden;box-sizing:border-box;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .b_box.move1 {top:-238px;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .b_box.move2 {top:-222px;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .b_box.move3 {top:-206px;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .b_box.move4 {top:-182px;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .b_box.move5 {top:-178px;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .b_box > .out_card {position:absolute !important; } .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .b_box .out_card:nth-child(1) {left:140px !important;top:0px !important;z-index:1;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .b_box .out_card:nth-child(2) {left:130px !important;top:10px !important;z-index:2;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .b_box .out_card:nth-child(3) {left:120px !important;top:20px !important;z-index:3;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .b_box .out_card:nth-child(4) {left:110px !important;top:30px !important;z-index:4;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .b_box .out_card:nth-child(5) {left:100px !important;top:40px !important;z-index:5;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .r_box {position:absolute;width:250px;height:305px;right:-400px;bottom:110px;overflow:hidden;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .b_box.smove1 {top:-209px;left:-445px;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .b_box.smove2 {top:-230px;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .b_box.smove3 {top:-251px;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .b_box.smove4 {top:-275px;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .r_box.smove1 {top:-345px;right:-300px;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .r_box.smove2 {top:-312px;right:-310px;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .r_box.smove3 {top:-283px;right:-333px;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .r_box.smove4 {top:-269px;right:-348px;transition: all ease 1s;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .r_box > .in_card {position:absolute !important; } .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .r_box .in_card:nth-child(1) {left:40px !important;top:0px !important;z-index:1} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .r_box .in_card:nth-child(2) {left:30px !important;top:10px !important;z-index:2} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .r_box .in_card:nth-child(3) {left:20px !important;top:20px !important;z-index:3} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .r_box .in_card:nth-child(4) {left:10px !important;top:30px !important;z-index:4} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .earth_face.bad.sstp1 {transform: rotate(25deg);transition: all ease 1s;left:-37px;bottom:110px;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .earth_face.bad.sstp2 {transform: rotate(50deg);transition: all ease 1s;left:-22px;bottom:110px;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .earth_face.bad.sstp3 {transform: rotate(75deg);transition: all ease 1s;left:-10px;bottom:110px;} .htmlWrapper section.event03_wrapper > .event03_wrap .scale_wrapper .bg_scale_wrap .bg_scale_cover .char_wrapper .earth_face.bad.sstp4 {transform: rotate(0deg);transition: all ease 1s;left:-39px;bottom:110px;} .htmlWrapper section.event03_wrapper > .event03_wrap .in_card_wrapper {position:relative;width:880px;margin:0 auto;padding-top:90px;display:none;} .htmlWrapper section.event03_wrapper > .event03_wrap .in_card_wrapper .in_card_list {float:left;width:199px;height:265px;margin-right:24px;} .htmlWrapper section.event03_wrapper > .event03_wrap .in_card_wrapper .in_card_list:last-child {margin-right:0;} .in_card {width:199px;height:265px;z-index:9;cursor:pointer;} .in_card.o01 {background-image:url('../images/evt_cover_s_1.png?v=1');} .in_card.o02 {background-image:url('../images/evt_cover_s_2.png?v=1');} .in_card.o03 {background-image:url('../images/evt_cover_s_3.png?v=1');} .in_card.o04 {background-image:url('../images/evt_cover_s_4.png?v=1');} .in_card.o01.on {animation: zoom_3 1.5s infinite;} .in_card.o02.on {animation: zoom_3 1.5s infinite;} .in_card.o03.on {animation: zoom_3 1.5s infinite;} .in_card.o04.on {animation: zoom_3 1.5s infinite;} .htmlWrapper section.event03_wrapper > .event03_wrap .in_guide_wrapper {position:relative;width:970px;margin:240px auto;height:0;display:none;} .htmlWrapper section.event03_wrapper > .event03_wrap .in_guide_wrapper .in_guide {position:absolute;background-image:url('../images/in_guide.png');width:282px;height:94px;left:-120px;transition: all ease 1s;} /* 이벤트 03 */ /* 뉴스레터 */ .htmlWrapper section.newsletter_wrapper {position:relative;width:100%;height:1221px;background-image:url('../images/bg_newsletter.jpg');background-position:center;} .htmlWrapper section.newsletter_wrapper > .newsletter_wrap {position:absolute;top:540px;width:100%;left:0;} .htmlWrapper section.newsletter_wrapper > .newsletter_wrap > .form_wrapper{position:relative;width:380px;margin:0 auto;} .htmlWrapper section.newsletter_wrapper > .newsletter_wrap > .form_wrapper > .form_wrap{position:relative;width:380px;} .htmlWrapper section.newsletter_wrapper > .newsletter_wrap > .form_wrapper > .form_wrap > .f_i {margin-bottom:30px;} .htmlWrapper section.newsletter_wrapper > .newsletter_wrap > .form_wrapper > .form_wrap > .f_i input[type=text]{width:380px;height:50px;background:transparent;padding:0 20px;box-sizing:border-box;border:0;outline:none;} .htmlWrapper section.newsletter_wrapper > .newsletter_wrap > .form_wrapper > .form_wrap > .f_i .privacy {width:100%;height:210px;overflow:auto;padding:20px;box-sizing:border-box;font-weight:700;} .htmlWrapper section.newsletter_wrapper > .newsletter_wrap > .form_wrapper > .form_wrap > .f_i .privacy div{padding-left:10px;box-sizing:border-box;letter-spacing:-1px;font-size:18px;font-weight:500;padding-top:10px;line-height:1.3} .htmlWrapper section.newsletter_wrapper > .newsletter_wrap > .form_wrapper > .form_wrap > .f_i .privacy_chk {padding:20px 0 0 0;font-size:20px;} .htmlWrapper section.newsletter_wrapper > .newsletter_wrap > .form_wrapper > .form_wrap > .f_i .privacy_chk input[type=checkbox]{width:28px;height:28px;} .htmlWrapper section.newsletter_wrapper > .newsletter_wrap > .form_wrapper > .form_wrap > .f_i .privacy_chk label{vertical-align:baseline;margin-top:-13px;} .htmlWrapper section.newsletter_wrapper > .newsletter_wrap > .form_wrapper > .btns {position:absolute;width:100%;text-align:center;margin-top:75px;margin-left:-40px;} .htmlWrapper section.newsletter_wrapper > .newsletter_wrap > .form_wrapper > .btns .btn {background-image:url('../images/btn_newsletter_join.png');width:430px;height:90px;display:inline-block;cursor:pointer;} .htmlWrapper section.newsletter_wrapper > .newsletter_wrap > .form_wrapper > .btns .btn.on {background-image:url('../images/btn_newsletter_join_on.png');} /* 뉴스레터 */ /* 소개 */ .htmlWrapper section.intro_wrapper {position:relative;width:100%;height:1018px;background-image:url('../images/bg_intro.jpg');} .htmlWrapper section.intro_wrapper > .intro_wrap {position:absolute;top:530px;width:100%;} .htmlWrapper section.intro_wrapper > .intro_wrap .link_box {position:relative;width:1200px;margin:0 auto;} .htmlWrapper section.intro_wrapper > .intro_wrap .link_box ul {float:right;width:560px;} .htmlWrapper section.intro_wrapper > .intro_wrap .link_box ul li{float:left;width:270px;height:183px;margin-bottom:15px;} .htmlWrapper section.intro_wrapper > .intro_wrap .link_box ul li a{display:block;width:100%;height:100%;} .htmlWrapper section.intro_wrapper > .intro_wrap .link_box ul li:nth-child(2n+2){float:right;} /* 소개 */ /* FAQ */ .htmlWrapper section.faq_wrapper {position:relative;width:100%;background:#e2f0d9;background-image:url('../images/bg_faq.jpg');background-position:center top;background-repeat:no-repeat;padding: 0 0 200px 0} .htmlWrapper section.faq_wrapper > .faq_wrap {position:relative;padding-top:300px;width:100%;z-index:2;} .htmlWrapper section.faq_wrapper > .faq_wrap > .faq_content{width:1100px;border:4px solid #385723;border-radius:20px;margin:0 auto;padding:45px 65px;box-sizing:border-box;background:#FFFFFF;} .htmlWrapper section.faq_wrapper > .faq_wrap > .faq_content .quest {margin-bottom:35px;} .htmlWrapper section.faq_wrapper > .faq_wrap > .faq_content .quest .qtitle{position:relative;font-size:28px;font-weight:700;color:#111f05;padding-left:92px;height:68px;line-height:68px;border-bottom:1px solid #e2f0d9;padding-bottom:34px;} .htmlWrapper section.faq_wrapper > .faq_wrap > .faq_content .quest .qtitle > div {line-height:1.2;display:inline-block;cursor:pointer;} .htmlWrapper section.faq_wrapper > .faq_wrap > .faq_content .quest .qtitle::before{content:'';background-image:url('../images/q.png');width:68px;height:68px;position:absolute;left:10px;} .htmlWrapper section.faq_wrapper > .faq_wrap > .faq_content .quest .qtitle::after{content:'';background-image:url('../images/faq_down.png');width:31px;height:15px;position:absolute;right:0;top:20px;} .htmlWrapper section.faq_wrapper > .faq_wrap > .faq_content .quest .qtitle.open::after{content:'';background-image:url('../images/faq_up.png');} .htmlWrapper section.faq_wrapper > .faq_wrap > .faq_content .quest .qcont{position:relative;font-size:26px;font-weight:400;color:#111f05;padding-left:92px;line-height:1.4;display:none;background:#f7fef2;padding-top:10px;padding-bottom:10px;} .htmlWrapper section.faq_wrapper > .faq_wrap > .faq_content .quest .qcont::before{content:'';background-image:url('../images/a.png');width:68px;height:68px;position:absolute;left:10px;} .htmlWrapper section.faq_wrapper > .faq_wrap > .faq_content .quest .qcont span {font-weight:700;} .htmlWrapper section.faq_wrapper > .faq_wrap > .faq_content .quest .qcont.close {display:none;} .htmlWrapper section.faq_wrapper > .faq_char_wrap {position:absolute;bottom:0;left:0;width:100%;z-index:1;} .htmlWrapper section.faq_wrapper > .faq_char_wrap > .faq_char {background-image:url('../images/faq_char.png');height:618px;} /* FAQ */ /* SNS */ .htmlWrapper section.sns_wrapper {position:relative;width:100%;height:187px;background-image:url('../images/bg_sns_f.jpg');background-position:center;} .htmlWrapper section.sns_wrapper > .sns_wrap {position:absolute;top:64px;width:100%;} .htmlWrapper section.sns_wrapper > .sns_wrap > .sns{position:relative;width:920px;margin:0 auto;} .htmlWrapper section.sns_wrapper > .sns_wrap > .sns ul{} .htmlWrapper section.sns_wrapper > .sns_wrap > .sns ul > li{float:left;width:68px;height:68px;position:relative;box-sizing:border-box;margin-right:11px;} .htmlWrapper section.sns_wrapper > .sns_wrap > .sns ul > li a{display:block;width:100%;height:100%;text-indent:-9999px;} /* SNS */ /* 이벤트 03 */ .htmlWrapper section.efooter_wrapper {position:relative;width:100%;padding:60px 0;background:#e7f9ff;text-align:center;font-size:30px;color:#323232;letter-spacing:-1px;} .htmlWrapper section.efooter_wrapper .jinfo {padding-top:16px;} .htmlWrapper section.efooter_wrapper span{font-size:35px;font-weight:700;} .htmlWrapper section.efooter_wrapper span.txt01{font-size:35px;font-weight:700;color:#0b409b;} .htmlWrapper section.efooter_wrapper span.txt01_num{font-size:45px;font-weight:700;color:#0b409b;letter-spacing:-1px;} .htmlWrapper section.efooter_wrapper span.txt02{font-size:35px;font-weight:700;color:#ff7e00;} .htmlWrapper section.efooter_wrapper span.txt02_num{font-size:45px;font-weight:700;color:#ff7e00;letter-spacing:-1px;} /* 이벤트 03 */ /* 카피라이터 */ .htmlWrapper section.copyright_wrapper {position:relative;width:100%;background:#FFFFFF;height:113px;background-position:center;} .htmlWrapper section.copyright_wrapper > .copyright_wrap {position:relative;width:1200px;margin:0 auto;padding:40px 0 0 0;box-sizing:border-box;} .htmlWrapper section.copyright_wrapper > .copyright_wrap ul{width:100%;} .htmlWrapper section.copyright_wrapper > .copyright_wrap ul li{float:left;font-size:16px;color:#666666;} .htmlWrapper section.copyright_wrapper > .copyright_wrap ul li:nth-child(odd){width:65%;margin-bottom:10px;} .htmlWrapper section.copyright_wrapper > .copyright_wrap ul li:nth-child(even){width:35%;} /* 카피라이터 */ /* 고정 메뉴 */ .navigator_wrapper {position:fixed;left:0;bottom:0;width:100%;height:100px;background:#ffbd33;z-index:9;} .navigator_wrapper .cont_wrap .navi_wrap {width:100%;} .navigator_wrapper .cont_wrap .navi_wrap > li{position:relative;float:left;box-sizing:border-box;height:100px;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_menu{position:relative;width:100%;font-size:27px;font-weight:700;color:#fefcef;line-height:100px;text-align:center;cursor:pointer;z-index:3;} #navigator_wrapper .cont_wrap .navi_wrap > li > .n_menu.open::after {position:absolute;content:'▲';top:1px;margin-left:7px;font-size:35px;} .navigator_wrapper .cont_wrap > .n_menu_list {display:none;position:absolute;bottom:-100px;z-index:6;background:#FFFFFF;width:251px;border:1px solid #FFFFFF;box-sizing:border-box;} .navigator_wrapper .cont_wrap > .n_menu_list > .n_menu.close {font-size:30px;font-weight:700;color:#e2ffe4;background:#3c9742;text-align:center;height:98px;line-height:98px;cursor:pointer;} #navigator_wrapper .cont_wrap > .n_menu_list > .n_menu.close span::after {position:absolute;content:'▼';top:1px;margin-left:7px;font-size:35px;} .navigator_wrapper .cont_wrap > .n_menu_list > .m_list {width:100%;display:flex;flex-wrap:wrap;padding:0 0 10px 0;box-sizing:border-box;text-align:center;} .navigator_wrapper .cont_wrap > .n_menu_list > .m_list > div {width:100%;text-align:center;padding:20px 0;background:#f2fff3;} .navigator_wrapper .cont_wrap > .n_menu_list > .m_list > div > span {display:inline-block;cursor:pointer;} .navigator_wrapper .cont_wrap > .n_menu_list > .m_list > div > span a{display:block;width:100%;height:100%;font-size:18px;color:#092016;font-weight:500;letter-spacing:-.5px;} .navigator_wrapper .cont_wrap > .n_menu_list > .m_list > div > span {position:relative;} .navigator_wrapper .cont_wrap > .n_menu_list > .m_list > div.on {background:#b8f4bc;} .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(1) {width:251px;background:#3c9742;} .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(2) {width:290px;cursor:pointer;} .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(3) {width:290px;cursor:pointer;} .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(4) {width:290px;cursor:pointer;} .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(5) {width:78px;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab01{background-image:url('../images/nav_01_off.jpg');} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab02{background-image:url('../images/nav_02_off.jpg');} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab03{background-image:url('../images/nav_03_off.jpg');} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab01.on{background-image:url('../images/nav_01_on.jpg');} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab02.on{background-image:url('../images/nav_02_on.jpg');} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab03.on{background-image:url('../images/nav_03_on.jpg');} .navigator_wrapper .cont_wrap > .b_img {position:absolute;width:273px;top:30px;background-image:url('../images/j_cover.png');height:69px;z-index:2;} .navigator_wrapper .cont_wrap .navi_wrap > li > div {position:relative;width:100%;height:100%;} .navigator_wrapper .cont_wrap .navi_wrap > li > div > a{display:block;width:100%;height:100%;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_top{position:absolute;background-image:url('../images/bt_top.png');width:45px;height:48px;top:23px;left:20px;cursor:pointer;} .navigator_wrapper .cont_wrap .navi_wrap > li:last-child {margin-right:0;} /* 고정 메뉴 */ /* 기타 */ .join_info_wrapper {position:absolute;bottom:0;width:100%;text-align:center;} .join_info_wrapper.evt01 {bottom:230px;} .join_info_wrapper.evt01 .join_info{background:#f47272;border-radius:40px;color:#310a0a;display:inline-block;padding:0 30px;font-size:22px;height:63px;line-height:63px;vertical-align:middle;} .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:36px;color:#FFFFFF;font-weight:900;} .join_info_wrapper .join_info span.b{font-weight:700;} .result_wrap {position:absolute;width:100%;text-align:center;bottom:100px;} .result_wrap > .btn.event_result2{width:463px;height:122px;display:inline-block;background-image:url('../images/event2_done.png');} .result_wrap > .btn.event_result2 > a {display:block;width:100%;height:100%;} /* 슬라이드 */ .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* 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; } .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;} .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;} @keyframes blink{ 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes vmove{ 0% { top: 0px; opacity:0; } 100% { top: 620px; opacity:1; } } @keyframes typing{ 0% { width: 0%; } 50% { width: 100%; } 100% { width: 0%; } } @keyframes zoom{ 0% { scale: 1; } 50% { scale: 1.2; } 100% { scale: 1; } } @keyframes zoom_3{ 0% { scale: 1; } 50% { scale: 1.1; } 100% { scale: 1; } } @keyframes move_right{ 0% { left:0; } 1% { background-image:url('../images/hand.png'); width:102px;height:84px; top:12px; } 10% { opacity:.8; } 25% { opacity:.5; } 50% { opacity:.3; } 75% { opacity:0; } 100% { opacity:1; top:12px; background-image:url('../images/hand.png'); width:102px;height:84px; left:370px; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* popup */ html.on { height:100%; overflow:hidden; } .pu_bg { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); z-index:98; display:none; } .pu { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); z-index:99; display:none; } .pu .bt_close { position:absolute; top:0; right:-60px; width:48px; height:48px; background:url(../images/bt_pu_close.png?v=1) no-repeat 0 0; text-indent:-9999px; } .pu_event_youtube { width:800px; background:#fff;border-radius:15px;display:none; } .pu_event_youtube .p_con { position:relative; } .pu_event_youtube .p_con iframe {width:800px;height:450px;} .pu_event_info { width:653px; display:none; } .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:block; height:100px; line-height:100px; 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 {background:#2bb178;} .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:28px; line-height:28px; margin:-10px 0 0 10px; text-align:center; vertical-align:middle; background:url(../images/cb.png) no-repeat 0 0; } .pu_event_info .checks input[type="checkbox"]:checked + label:after { background:url(../images/cb_on.png?v=2) 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 { width:640px; overflow:hidden; display:none;} .pu_event_done .btn a { display:block; line-height:96px; text-align:center; font-size:30px; color:#fff; font-weight:800; letter-spacing:10px; } .pu_event_done.e01 {background:#277508;} .pu_event_done.e02 {background:#f18e0d;} .pu_event_done.e03 {background:#1475ae;} .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;}