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/sexF_on.png') url('../images/sexM_on.png') url('../images/age01on.png') url('../images/age02on.png') url('../images/age03on.png') url('../images/age04on.png') url('../images/age05on.png') url('../images/age06on.png') url('../images/age07on.png') url('../images/age08on.png'); } .htmlWrapper {width:100%;max-width:1920px;margin:0 auto;min-width:1400px;padding-bottom:100px;position:relative;} .htmlWrapper section {background-position:center;} /* 상단 */ .htmlWrapper section.top_wrapper {position:relative;display:block;width:100%;height:50px;line-height:48px;text-align:center;padding-top:5px;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:706px;height:41px;margin:0 auto;} .htmlWrapper section.top_wrapper > .hx_top .link_daum {position:absolute;width:95px;height:40px;} .htmlWrapper section.top_wrapper > .hx_top .link_comp {position:absolute;width:145px;height:40px;left:130px;} .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:1000px;background-position:center;overflow:hidden;background-image:url('../images/visual.jpg');background-size:cover;background-position:center;} .htmlWrapper section.visual_wrapper > .counter_box{position:absolute;top:77px;left:0;width:100%;} .htmlWrapper section.visual_wrapper > .counter_box > .counter_wrapper{position:relative;width:1300px;margin:0 auto;display:flex;justify-content:end} .htmlWrapper section.visual_wrapper > .counter_box > .counter_wrapper > .counter_wrap{position:relative;display:inline-block;background:#313131;font-size:18px;color:#CCCCCC;padding:10px 28px;border-radius:30px;} .htmlWrapper section.visual_wrapper > .counter_box > .counter_wrapper > .counter_wrap span.num{color:#FFFFFF;font-weight:900;font-size:20px} .htmlWrapper section.visual_wrapper > .counter_box > .counter_wrapper > .counter_wrap span.ttl{color:#478A40;font-weight:400;font-size:18px} .htmlWrapper section.visual_wrapper > .counter_box > .counter_wrapper > .counter_wrap span.sep{padding:0 10px;} /* Daum Typing------------------------------------------------*/ .daum_search {position:relative;height:376px;background-image:url(../images/bg_daum.png);} .daum_search .daumBox {position:absolute;top:95px;left:50%;margin-left:-440px;width:880px;height:64px;background-image:url(../images/bg_search.png);} .daum_search .daumBox .typing-text {position:absolute;left:135px;top:80px;line-height:36px;font-family:'yg-jalnan',sans-serif;font-weight:900;font-size:35px; color:#111111; border-right:2px solid #333; animation: typing 5s steps(22) infinite; white-space: nowrap; overflow: hidden;} .daum_search a {display:block; position:absolute;left:calc(50% - 449px);top:114px; width:894px; height:75px;z-index:2;} @-webkit-keyframes twist{ 0%{ transform: rotateZ(-25deg); opacity:.7; } 50%{ transform: rotateZ(0deg); opacity:1; } 100%{ transform: rotateZ(25deg); opacity:.7; } } /* 결과 */ section.event01_result {position:relative;width:100%;height:1668px;background-image:url('../images/result/result_bg.jpg');} section.event01_result .content_wrapper {display:block;position:absolute;left:0;top:370px;width:100%;} section.event01_result .content_wrapper > .content_wrap{display:block;position:relative;width:1500px;margin: 0 auto;} section.event01_result .content_wrapper > .content_wrap > .search_wrapper{position:relative;display:flex;justify-content:center;} section.event01_result .content_wrapper > .content_wrap > .search_wrapper > .sttl{position:relative;background-image:url('../images/result/o_t.png');width:138px;height:138px;} section.event01_result .content_wrapper > .content_wrap > .search_wrapper > .s_wrap{position:relative;display:flex;align-items:center;font-size:28px;color:#FFFFFF;font-weight:700;padding:0 55px;} section.event01_result .content_wrapper > .content_wrap > .search_wrapper > .s_wrap > .sbox_sch{position:relative;margin:0 28px 0 40px;background-color:#FFFFFF;} section.event01_result .content_wrapper > .content_wrap > .search_wrapper > .s_wrap > .sbox_sch select{ border:0;width:100%;height:100%;background:transparent; padding:0 20px;box-sizing:border-box; font-size:33px; color:#000000; -webkit-appearance:none; -moz-appearance:none; appearance:none } section.event01_result .content_wrapper > .content_wrap > .search_wrapper > .s_wrap > .sbox_sch select:focus{outline:none;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper {position:relative;width:100%;margin-top:85px;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul{display:flex;flex-wrap:wrap;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li{position:relative;padding:0 30px;width:290px;box-sizing:border-box;margin-bottom:100px;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li .card_wrapper{} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li .card_wrapper .pic_wrappper{position:relative;width:225px;height:299px;overflow:hidden;border-radius:110px;box-sizing:border-box;border:3px solid #d1d1d0;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li .card_wrapper .pic_wrappper .cover{position:absolute;width:100%;height:100%;background-image:url('../images/result/rpic_cover.png');background-position:center bottom;background-repeat:no-repeat;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li:nth-child(1)::before{position:absolute;content:'';background-image:url('../images/result/onum1.png');width:53px;height:91px;left:0;top:0;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li:nth-child(1)::after{position:absolute;content:'';background-image:url('../images/result/o01.png');width:87px;height:109px;right:0;bottom:80px;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li:nth-child(2)::before{position:absolute;content:'';background-image:url('../images/result/onum2.png');width:73px;height:91px;left:-5px;top:0;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li:nth-child(2)::after{position:absolute;content:'';background-image:url('../images/result/o02.png');width:87px;height:109px;right:0;bottom:80px;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li:nth-child(3)::before{position:absolute;content:'';background-image:url('../images/result/onum3.png');width:74px;height:92px;left:-5px;top:0;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li:nth-child(3)::after{position:absolute;content:'';background-image:url('../images/result/o03.png');width:87px;height:106px;right:0;bottom:80px;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li:nth-child(4)::before{position:absolute;content:'';background-image:url('../images/result/onum4.png');width:75px;height:91px;left:-5px;top:0;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li:nth-child(5)::before{position:absolute;content:'';background-image:url('../images/result/onum5.png');width:73px;height:92px;left:-5px;top:0;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li:nth-child(6)::before{position:absolute;content:'';background-image:url('../images/result/onum6.png');width:71px;height:93px;left:-5px;top:0;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li:nth-child(7)::before{position:absolute;content:'';background-image:url('../images/result/onum7.png');width:66px;height:90px;left:0;top:0;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li:nth-child(8)::before{position:absolute;content:'';background-image:url('../images/result/onum8.png');width:74px;height:93px;left:-5px;top:0;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li:nth-child(9)::before{position:absolute;content:'';background-image:url('../images/result/onum9.png');width:70px;height:93px;left:-5px;top:0;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li:nth-child(10)::before{position:absolute;content:'';background-image:url('../images/result/onum10.png');width:112px;height:93px;left:-30px;top:0;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li:nth-child(1) .card_wrapper .pic_wrappper{border:3px solid #f4eabe;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li:nth-child(2) .card_wrapper .pic_wrappper{border:3px solid #ffffff;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li:nth-child(3) .card_wrapper .pic_wrappper{border:3px solid #fbc3b3;} section.event01_result .content_wrapper > .content_wrap > .result_wrapper ul li .card_wrapper .ttl_wrappper{position:relative;font-size:28px;color:#FFFFFF;font-weight:500;width:100%;text-align:center;padding:30px 0 0 0;} /* 결과 */ /* 이벤트 01 */ section.event01 {position:relative;width:100%;height:4350px;background-image:url('../images/bg_event01.jpg');} section.event01 .content_wrapper {display:block;position:absolute;left:0;top:987px;width:100%;} section.event01 .content_wrapper > .content_wrap{display:block;position:relative;width:1400px;height:3197px;background-image:url('../images/bg_event01_back.png');margin: 0 auto;} section.event01 .content_wrapper > .content_wrap > .text_wrap{position:absolute;left:0;top:0;width:100%;z-index:0;padding:60px 66px;box-sizing:border-box;display:flex;} section.event01 .content_wrapper > .content_wrap > .text_wrap > div:nth-child(1){margin-right:27px;} section.event01 .content_wrapper > .content_wrap > .text_wrap > div:nth-child(2){font-size:35px;font-weight:900;padding:15px 0;color:#393295;font-family:'yg-jalnan'} section.event01 .content_wrapper > .content_wrap > .text_wrap > div:nth-child(2) > div:nth-child(1){margin-bottom:410px;} section.event01 .content_wrapper > .content_wrap > .text_wrap > div:nth-child(2) > div span{position:relative;font-size:27px;color:#44416b;margin-left:10px;} section.event01 .content_wrapper > .content_wrap > .text_wrap > div:nth-child(2) > div span::before{position:absolute;content:'';width:110px;height:2px;background:#44416b;bottom:-10px;left:25px;} section.event01 .content_wrapper > .content_wrap > .text_wrap .icons{position:relative;width:94px;height:94px;border-radius:50%;background:#e9dae1;display:flex;justify-content:center;align-items:center;text-align:center;border:3px solid #904082;box-sizing:border-box;font-size:25px;font-weight:700;line-height:1;} section.event01 .content_wrapper > .content_wrap > .text_wrap .icons.basic{background:#904082;color:#e9dae1;} section.event01 .content_wrapper > .content_wrap > .text_wrap .icons:nth-child(1){margin-bottom:23px;} section.event01 .content_wrapper > .content_wrap > .text_wrap .icons:nth-child(2){margin-bottom:29px;} section.event01 .content_wrapper > .content_wrap > .text_wrap .icons:nth-child(3){margin-bottom:136px;} section.event01 .content_wrapper > .content_wrap > .text_wrap .icons:nth-child(1)::after{content:'';display:block;background:#904082;position:absolute;width:2px;height:30px;top:91px;} section.event01 .content_wrapper > .content_wrap > .text_wrap .icons:nth-child(2)::after{content:'';display:block;background:#904082;position:absolute;width:2px;height:30px;top:91px;} section.event01 .content_wrapper > .content_wrap > .text_wrap .icons:nth-child(3)::after{content:'';display:block;background:#904082;position:absolute;width:2px;height:97px;top:91px;} section.event01 .content_wrapper > .content_wrap > .text_wrap .icons:nth-child(3)::before{content:'';display:block;background:#904082;position:absolute;width:17px;height:17px;top:175px;border-radius:50%;} section.event01 .content_wrapper > .content_wrap > .sex_wrap{position:relative;padding:180px 0 0 183px;box-sizing:border-box;} section.event01 .content_wrapper > .content_wrap > .sex_wrap > ul{position:relative;display:flex;} section.event01 .content_wrapper > .content_wrap > .sex_wrap > ul > li{width:553px;height:82px;cursor:pointer;} section.event01 .content_wrapper > .content_wrap > .sex_wrap > ul > li:nth-child(1){margin-right:30px;} section.event01 .content_wrapper > .content_wrap > .age_wrap{position:relative;padding:40px 0 0 183px;box-sizing:border-box;} section.event01 .content_wrapper > .content_wrap > .age_wrap > ul{position:relative;display:flex;flex-wrap:wrap;} section.event01 .content_wrapper > .content_wrap > .age_wrap > ul > li{width:262px;height:82px;cursor:pointer;margin-right:30px;margin-bottom:20px} section.event01 .content_wrapper > .content_wrap ul > li .rdo_btn{position:relative;width:100%;height:100%;background:#f3e9ed;border:3px solid #8c3c7e;border-radius:14px;color:#904082;font-size:35px;display:flex;justify-content:center;align-items:center;} section.event01 .content_wrapper > .content_wrap ul > li.on .rdo_btn{border:5px solid #701f62;background:#701f62;color:#FFFFFF;font-weight:700;} section.event01 .content_wrapper > .content_wrap > .card_wrap{position:relative;padding:140px 0 0 40px;box-sizing:border-box;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul{position:relative;display:flex;flex-wrap:wrap;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li{position:relative;width:251px;height:360px;margin-right:14px;margin-bottom:25px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:0 0 10px 0;;box-sizing:border-box;text-align:center;border-radius:15px; transition: transform 0.8s; transform-style: preserve-3d; } section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(odd){background: #fadbe0;color:#F0CFBB;border:1px solid #ed8aa1;box-sizing:border-box;box-shadow:7px 9px 12px -5px #ed8aa1;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(even){background:#94d8ec;color:#A8E3CF;border:1px solid #53a2ba;box-sizing:border-box;box-shadow:7px 9px 12px -5px #53a2ba;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .card_front{position:absolute;width:100%;height:100%;-webkit-backface-visibility: hidden; backface-visibility: hidden;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li.on{transform: rotateY(180deg);border-box;box-shadow:-7px 9px 12px -5px #ed8aa1;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(odd) .category{border:0px solid #F0CFBB;border-radius:35px;box-sizing:border-box;background:#e9527d;color:#FFFFFF;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(odd) .logo{background:#f4b2bc;border-radius:50%;box-sizing:border-box;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(odd) .mark{background-image:url('../images/card_txt.png');} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(odd) .exp{color:#ea5c84;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(odd) .title{color:#e9527d;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(even) .category{border:0px solid #A8E3CF;border-radius:35px;box-sizing:border-box;background:#007a9f;color:#FFFFFF;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(even) .logo{background:#53b8d7;border-radius:50%;box-sizing:border-box;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(even) .mark{background-image:url('../images/card_txt2.png');} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(even) .exp{color:#007a9f;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(even) .title{color:#007a9f;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .info{display:flex;flex-direction:column;width:251px;justify-content:center;align-items:center;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .info > .category{width:137px;height:31px;margin:15px 0 0 0;display:flex;justify-content:center;align-items:center;font-size:20px;font-weight:700;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .info > .exp{margin:13px 0 0 0;font-size:16px;font-weight:500;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .info > .title{margin:9px 0 0 0;font-size:25px;font-weight:800;text-align:center;line-height:1.2;height:64px;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .info > .logo{width:120px;height:120px;overflow:hidden;margin:0 auto;background-position:center;background-repeat:no-repeat;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .info > .mark{width:126px;height:21px;margin:10px auto;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .btns{position:relative;width:100%;display:flex;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .btns > div{position:relative;width:50%;height:48px;cursor:pointer;display:flex;justify-content:center;align-items:center;font-size:20px;font-weight:700;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(odd) .btns > .btn_detial{border:1px solid #ed8aa1;background:#FFFFFF;color:#4f3828;border-bottom-left-radius:15px;border-left:0;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(odd) .btns > .btn_select{border:1px solid #ed8aa1;background:#FFFFFF;color:#4f3828;border-bottom-right-radius:15px;border-right:0;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(odd) .btns > .btn_select .heart::before{content:'♡';padding-left:4px;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(odd) .btns > .btn_select .heart.on::before{content:'♥';padding-left:4px;color:#e9527d} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(even) .btns > .btn_detial{border:1px solid #2c91b0;background:#FFFFFF;color:#4f3828;border-bottom-left-radius:15px;border-left:0;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(even) .btns > .btn_select{border:1px solid #2c91b0;background:#FFFFFF;color:#4f3828;border-bottom-right-radius:15px;border-right:0;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(even) .btns > .btn_select .heart::before{content:'♡';padding-left:4px;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li:nth-child(even) .btns > .btn_select .heart.on::before{content:'♥';padding-left:4px;color:#007a9f} section.event01 .content_wrapper > .content_wrap > .btn_wrap {position:absolute;left:0;bottom:105px;width:100%;} section.event01 .content_wrapper > .content_wrap > .btn_wrap > .btn_join{position:relative;width:450px;height:110px;margin:0 auto;background:#af2d6a;border-radius:300px;font-weight:900;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 10px 10px 0 #d5aabd;cursor:pointer;} section.event01 .content_wrapper > .content_wrap > .btn_wrap > .btn_join > .ttl{color:#ececeb;font-size:30px;color:#fefed5;} section.event01 .content_wrapper > .content_wrap > .btn_wrap > .btn_join > .txt{color:#ececeb;font-size:36px;color:#ececeb;} section.event01 .content_wrapper > .content_wrap > .btn_wrap > .caution {padding:10px 0; font-weight:700;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li > .card_back{ border-radius:15px; overflow:hidden; position:absolute; width:100%;height:100%;left:0;top:0;z-index:9; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; background-position:top center; background-repeat:no-repeat; transform: rotateY(180deg); } section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .card_back .info{display:flex;flex-direction:column;width:251px;justify-content:center;align-items:start;padding:0 17px 10px 17px;box-sizing:border-box;height:310px;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .card_back .info > .hinfo{display:flex;justify-content:space-between;width:100%;align-items:center;padding:20px 0 0 0;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .card_back .info > .hinfo > .heart{position:relative;width:30px;height:30px;background:#FFFFFF;border-radius:50%;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .card_back .info > .hinfo > .heart:before{position:absolute;content:'♥';left:4px;top:1.5px;font-size:24px;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .card_back .info > .hinfo.bc > .heart:before{color:#007a9f} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .card_back .info > .hinfo.pc > .heart:before{color:#e9527d} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .card_back .info > .hinfo > .blogo{} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .card_back .info > .category{position:relative;margin:15px auto 0;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .card_back .info > .category::after{position:absolute;content:'♥';right:25px;} #section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .card_back .info > .category::after{position:absolute;content:'♥';right:25px;color:#007a9f} #section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .card_back .info > .category.pc::after{position:absolute;content:'♥';right:25px;color:#e9527d} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .card_back .info > .title{margin:160px 0 0 0; color:#FFFFFF;text-align:left;z-index:2;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .card_back .info > .exp{color:#FFFFFF;text-align:left;z-index:2;margin:0;} section.event01 .content_wrapper > .content_wrap > .card_wrap > ul > li .card_back .bg {position:absolute;bottom:48px;width:100%;z-index:0;background: linear-gradient(transparent, #000000 110%);;height:100px;} section.event01 .join_info_wrapper {position:absolute;left:0;bottom:60px;width:100%;color:#ffffff;} section.event01 .join_info_wrapper > .join_info {position:relative;width:1000px;height:70px;line-height:70px;margin:0 auto;background:#4e497b;border-radius:35px;font-size:26px;} section.event01 .join_info_wrapper > .join_info > span{font-weight:700;} section.event01 .join_info_wrapper > .join_info > span.num{font-size:34px;color:#2DAF83;} section.event01 .join_info_wrapper > .join_info > span.event{font-size:34px;color:#fff;} .card_popup {position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;display:flex;align-items:center;background-color:rgba(0,0,0,.7);} .card_popup > .card_popup_wrapper{position:relative;width:1000px;height:919px;margin:0 auto;overflow:auto;} .card_popup > .card_popup_wrapper > .card_pop_close{position:absolute;background-image:url('../images/btn_close_pop.png');width:51px;height:51px;right:70px;cursor:pointer;} .card_popup > .card_popup_wrapper > .card_popup_wrap{position:relative;width:680px;height:100%;margin:0 auto;background:#F3F1E9;border-radius:10px;display:flex;flex-direction:column;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .top_wrap{position:relative;width:100%;height:86px;display:flex;align-items:center;justify-content:space-between;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .top_wrap > .category{position:relative;border-radius:25px;width:181px;height:46px;line-height:46px;text-align:center;font-size:24px;font-weight:700;color:#FFFFFF;margin-left:20px;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .top_wrap > .category.bc{background:#007a9f;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .top_wrap > .category.pc{background:#e9527d} .card_popup > .card_popup_wrapper > .card_popup_wrap > .top_wrap > .logo{background-image:url('../images/pop_logo.png');width:268px;height:44px;margin-right:37px;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .gallery_wrap{position:relative;width:100%;height:328px;background:#4B4B4B;background-size:contain;background-position:center;background-repeat:no-repeat;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .info_wrap{position:relative;width:100%;margin-top:50px;margin-bottom:30px;color:#2F4B43;padding:0 30px;box-sizing:border-box;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .info_wrap > .exp{font-weight:700;font-size:20px;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .info_wrap > .title{font-weight:900;font-size:30px;padding:15px 0 28px 0;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .info_wrap > .memo{font-size:18px;color:#4F3828;line-height:1.5;font-weight:500;height:100px;overflow:auto;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .homepage_wrap{position:relative;width:640px;background:#FFFFFF;margin:0 auto;border-radius:10px;padding:23px 20px;box-sizing:border-box;font-size:18px;font-weight:700;line-height:25px;height:125px;overflow:auto;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .homepage_wrap > .items {height:30px;display:flex;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .homepage_wrap > .items > .ttl{width:100px;text-align:justify;padding-left:20px;position:relative;padding-right:5px;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .homepage_wrap > .items > .ttl:before{content:'●';display:inline-block;font-size:8px;position:absolute;left:0;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .homepage_wrap > .items > .ttl::after{content:'';display:inline-block;width:100%;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .homepage_wrap > .items > .txt {display:flex;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .homepage_wrap > .items > .txt > .homepage{max-width:400px;text-overflow:ellipsis;overflow:hidden;word-break:break-all;white-space:nowrap;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .homepage_wrap > .items > .txt > .go a {color:#1C92E7;border-bottom:1px solid #1C92E7;height:25px;margin-left:10px;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .btns_wrap{position:absolute;width:100%;bottom:12px;display:flex;justify-content:center;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .btns_wrap > div{display:flex;justify-content:center;align-items:center;color:#F3F1E9;font-size:30px;border-radius:35px;font-weight:500;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .btns_wrap > .btn_sel{width:210px;height:70px;background:#ff4370;margin-right:12px;cursor:pointer;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .btns_wrap > .btn_sel .heart{background-image:url('../images/pop_heart.png');width:37px;height:34px;margin-left:10px;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .btns_wrap > .btn_sel .heart.on{background-image:url('../images/pop_heart_on.png');} .card_popup > .card_popup_wrapper > .card_popup_wrap > .btns_wrap > .btn_view{width:280px;height:70px;background:#027da7;font-size:20px;cursor:pointer;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .btns_wrap > .btn_view > div{display:flex;justify-content:center;align-items:center;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .btns_wrap > .btn_view > div > span{display:block;text-align:center;margin-right:14px;} .card_popup > .card_popup_wrapper > .card_popup_wrap > .btns_wrap > .btn_view > div > img:nth-child(1){} .rst_tbl {width:914px;height:112px;margin:0 auto;} .rst_tbl th{height:51px;font-size:33px;color:#f9fbfb;background:#2ba9e0;} .rst_tbl th:nth-child(1){width:306px;} .rst_tbl th:nth-child(2){width:305px;} .rst_tbl th:nth-child(3){width:306px;} .rst_tbl td{font-size:30px;color:#1a1a1a;height:61px;border:2px solid #2ba9e0;box-sizing:border-box;background:#FFFFFF;} .rst_tbl td.ok{color:#143aa7;font-weight:700;} .rst_tbl td.wrong{color:#ff880b;font-weight:700;} /* 이벤트 01 */ /* 결과 */ section.card_order {position:relative;width:100%;height:1180px;background-image:url('../images/bg_lanking.jpg');} section.card_order .content_wrapper {display:block;position:absolute;left:0;top:384px;width:100%;} section.card_order .content_wrapper > .content_wrap{position:relative;width:1100px;margin:0 auto;} section.card_order .content_wrapper > .content_wrap > .sch_wrap{display:flex;align-items:center;justify-content:center;} section.card_order .content_wrapper > .content_wrap > .sch_wrap > .ttl{width:130px;height:130px;background:#2DAF83;font-size:30px;font-weight:900;font-family:'yg-jalnan',sans-serif;line-height:1.1;color:#DFDBCD;border-radius:50%;display:flex;justify-content:center;align-items:center;} section.card_order .content_wrapper > .content_wrap > .sch_wrap .hd{font-size:35px;color:#434437;font-weight:500;margin-left:40px;margin-right:26px;} section.card_order .content_wrapper > .content_wrap > .order_wrap{position:relative;width:1270px;height:566px;margin:50px auto 0 0;} section.card_order .content_wrapper > .content_wrap > .order_wrap .owrap{display:flex;width:313px;margin-top:45px;} section.card_order .content_wrapper > .content_wrap > .order_wrap .owrap > .num{padding-top:30px;box-sizing:border-box;} section.card_order .content_wrapper > .content_wrap > .order_wrap .owrap > .pic_wrap{width:229px;} section.card_order .content_wrapper > .content_wrap > .order_wrap .owrap > .pic_wrap > .pic{width:229px;height:300px;overflow:hidden;z-index:2;border-radius:120px;} section.card_order .content_wrapper > .content_wrap > .order_wrap .owrap > .pic_wrap > .pic > .img{width:229px;height:300px;overflow:hidden;z-index:1;background-image:url('../images/pic_cover.png');overflow:hidden;} section.card_order .content_wrapper > .content_wrap > .order_wrap .owrap > .pic_wrap > .ttl{margin-top:20px;color:#434437;font-size:24px;font-weight:500;letter-spacing:-1px;} section.card_order .content_wrapper > .content_wrap > .order_wrap .slide_txt {position:absolute;width:100%;text-align:center;bottom:40px;} /* 결과 */ /* 카드뉴스 */ section.cardnews {position:relative;width:100%;height:1287px;background-image:url('../images/bg_cardnews.jpg');} section.cardnews .content_wrapper {display:block;position:absolute;left:0;top:384px;width:100%;} section.cardnews .content_wrapper > .content_wrap{position:relative;width:1100px;margin:0 auto;} section.cardnews .content_wrapper > .content_wrap > .cardnews_wrap{position:relative;width:750px;height:750px;margin:0 auto;background-image:url('../images/card_news_bg.png');border:7px solid #08239a;box-sizing:border-box;} .card-swiper-button-next {position:absolute;background-image:url('../images/btn_cardnews_next.png');width:50px;height:50px;top:140px;right:30px;cursor:pointer;z-index:9;background-size:100%;} .card-swiper-button-prev {position:absolute;background-image:url('../images/btn_cardnews_prev.png');width:50px;height:50px;top:140px;left:30px;cursor:pointer;z-index:9;background-size:100%;} /* 카드뉴스 */ /* 유투브 */ section.youtube {position:relative;width:100%;height:1156px;background-image:url('../images/bg_movie.jpg');} section.youtube .present_wrapper {display:block;position:absolute;left:0;top:360px;width:100%;} section.youtube .present_wrapper > .present_wrap {position:relative;width:1100px;margin:0 auto;display:flex;flex-direction:column;align-items:end;justify-content:end;} section.youtube .present_wrapper > .present_wrap > .present{width:382px;height:216px;} section.youtube .present_wrapper > .present_wrap > .txt{width:575px;text-align:right;margin-top:10px;} section.youtube .content_wrapper {display:block;position:absolute;left:0;top:645px;width:100%;} section.youtube .content_wrapper > .content_wrap{position:relative;width:1145px;margin:0 auto;display:flex;flex-direction:column;align-items:center;} section.youtube .content_wrapper > .content_wrap > .youtube_box{width:1078px;height:559px;border:5px solid #ff0101;border-radius:24px;box-sizing:border-box;overflow:hidden;} section.youtube .content_wrapper > .content_wrap > .youtube_box iframe{width:100%;height:100%;border-radius:20px;} section.youtube .content_wrapper > .content_wrap > .youtube_btns{width:100%;display:flex;justify-content:space-between;margin-top:40px;} section.youtube .content_wrapper > .content_wrap > .youtube_btns > div{position:relative;width:368px;height:107px;} section.youtube .content_wrapper > .content_wrap > .youtube_btns > div a{display:block;width:100%;height:100%;} section.youtube .content_wrapper > .content_wrap > .youtube_btns > .btn01{background-image:url('../images/ybtn1.png');} section.youtube .content_wrapper > .content_wrap > .youtube_btns > .btn02{background-image:url('../images/ybtn2.png');} section.youtube .content_wrapper > .content_wrap > .youtube_btns > .btn03{background-image:url('../images/ybtn3.png');} /* 유투브 */ /* KAKAOFRIEND */ section.kakaofriend {position:relative;width:100%;height:920px;background-image:url('../images/bg_kakaofriend.jpg');} section.kakaofriend .content_wrapper {display:block;position:absolute;left:0;top:585px;width:100%;} section.kakaofriend .content_wrapper > .content_wrap{position:relative;width:1035px;margin:0 auto;display:flex;flex-direction:column;align-items:center;} section.kakaofriend .content_wrapper > .content_wrap > .btns_wrap{position:absolute;width:100%;display:flex;justify-content:end;} section.kakaofriend .content_wrapper > .content_wrap > .btns_wrap > .btn{position:relative;width:550px;height:155px;cursor:pointer;} section.kakaofriend .content_wrapper > .content_wrap > .btns_wrap > .btn a{display:block;width:100%;height:100%;} /* KAKAOFRIEND */ /* SNS SHARE */ section.snsshare {position:relative;width:100%;height:480px;background:#365a45;} section.snsshare .content_wrapper {display:block;position:absolute;left:0;width:100%;height:100%;} section.snsshare .content_wrapper > .content_wrap{position:relative;width:967px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;} section.snsshare .content_wrapper > .content_wrap > .title{margin-bottom:55px;} section.snsshare .content_wrapper > .content_wrap > .sns_wrapper{position:relative;width:751px;height:94px;background-image:url('../images/icon_shsshare.png');margin:0 auto;} section.snsshare .content_wrapper > .content_wrap > .sns_wrapper > ul{padding:0 54px;box-sizing:border-box;} section.snsshare .content_wrapper > .content_wrap > .sns_wrapper > ul > li{float:left;width:94px;height:94px;margin-right:15px;box-sizing:border-box;} section.snsshare .content_wrapper > .content_wrap > .sns_wrapper > ul > li:last-child{margin-right:0;} section.snsshare .content_wrapper > .content_wrap > .sns_wrapper > ul > li > a{display:block;width:100%;height:100%;text-indent:-9999px;} /* SNS */ #section.event01 .event_wrapper .event_wrapper .title {width:526px;height:44px;background-image:url('../images/txt_age.png');margin-top:40px;} /* 참여 정보 */ section.sec-join-info {position:relative;width:100%;height:165px;display:flex;justify-content:center;align-items:center;background:#FFFFFF;color:#222222;font-weight:900;font-family:'yg-jalnan',sans-serif;font-size:30px;} section.sec-join-info > span {font-size:46px;} section.sec-join-info > span.j_visitor {color:#2DAF83} section.sec-join-info > span.j_join {color:#2DAF83} /* 참여 정보 */ /* 참여 정보 */ section.sec-copyright {position:relative;width:100%;height:162px;display:flex;justify-content:center;align-items:center;background:#eeeeee;color:#000000;font-size:15px;} section.sec-copyright > .copyright {width:1300px;} section.sec-copyright > .copyright ul{} section.sec-copyright > .copyright ul li{float:left;width:70%;margin-bottom:10px;} section.sec-copyright > .copyright ul li:nth-child(2n+2){text-align:right;width:30%;} /* 고정 메뉴 */ .navigator_wrapper {position:fixed;left:0;bottom:0;width:100%;height:110px;z-index:9;} .navigator_wrapper .cont_wrap {width:1300px;margin:0 auto;background:#313131;height:100%;border-top-left-radius:25px;overflow:hidden;border-top-right-radius:25px;overflow:hidden;} .navigator_wrapper .cont_wrap .navi_wrap {width:1300px;margin:0 auto;background:#313131;height:100%;} .navigator_wrapper .cont_wrap .navi_wrap > li{position:relative;float:left;box-sizing:border-box;height:110px;display:flex;justify-content:center;align-items:center;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_menu{position:relative;width:78px;height:42px;cursor:pointer;z-index:3;background-image:url('../images/allmenu.png');background-repeat:no-repeat;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_menu.on{background-image:url('../images/allmenu.png');} .n_menu_list {position:fixed;bottom:-800px;z-index:99;background:#313131;width:500px;box-sizing:border-box;} .n_menu_list.on {bottom:0;} .n_menu_list > .n_menu.close {float:right;background-image:url('../images/gnb_close.png');width:46px;height:46px;display:inline-block;margin-top:13px;margin-right:20px;cursor:pointer;} .n_menu_list > .m_list {width:100%;display:flex;flex-wrap:wrap;padding:0 0 0 0;box-sizing:border-box;text-align:center;display:flex;flex-direction:column;} .n_menu_list > .m_list a {color:#FFFFFF;} .n_menu_list > .m_list div {border-bottom:2px solid #D9D9D9;width:433px;margin:0 auto;padding:15px 0;} .n_menu_list > .m_list a:last-child div{border-bottom:0;} .n_menu_list > .m_list div > span {display:flex;cursor:pointer;position:relative;width:433px;height:80px;align-items:center;justify-content:start;text-align:left;padding-left:20px;box-sizing:border-box;padding-left:120px;} .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 > span.menu01::after {background-image:url('../images/icon01.png');} .n_menu_list > .m_list div > span.menu02::after {background-image:url('../images/icon02.png');} .n_menu_list > .m_list div > span.menu03::after {background-image:url('../images/icon03.png');} .n_menu_list > .m_list div > span.menu04::after {background-image:url('../images/icon04.png');} .n_menu_list > .m_list div > span.menu05::after {background-image:url('../images/icon05.png');} .n_menu_list > .m_list div > span.menu06::after {background-image:url('../images/icon06.png');} .n_menu_list > .m_list div.on {background-color:rgba(255,255,255,.1);} .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(1) {width:234px;} .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(2) {width:420px;cursor:pointer;margin-right:20px;} .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(3) {width:420px;cursor:pointer;} .navigator_wrapper .cont_wrap .navi_wrap > li:nth-child(4) {width:200px;cursor:pointer;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab01{background-image:url('../images/nav01.png');height:85px;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab02{background-image:url('../images/nav02.png');height:85px;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_top{background-image:url('../images/top.png');} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab01.on{background-image:url('../images/nav01ov.png');} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab02.on{background-image:url('../images/nav02ov.png');} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_top.on{background-image:url('../images/top.png');} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab01.result{background-image:url('../images/nav01_result.png');height:85px;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab02.result{background-image:url('../images/nav02_result.png');height:85px;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab01.on.result{background-image:url('../images/nav01ov_result.png');} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_tab02.on.result{background-image:url('../images/nav02ov_result.png');} .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/top.png');width:80px;height:80px;cursor:pointer;background-repeat:no-repeat;right:20px;} .navigator_wrapper .cont_wrap .navi_wrap > li > .n_top:hover{background-image:url('../images/top.png');} .navigator_wrapper .cont_wrap .navi_wrap > li:last-child {margin-right:0;} /* 고정 메뉴 */ /* 기타 */ .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:-38px;right:-20px;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);} .hand1 {position:absolute;bottom:-65px;left:35px;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);} .mhand1 {position:absolute;bottom:-38px;right:-20px;z-index:5;animation:move_down1 2s ease-in-out infinite;animation-delay:0.5s;animation-duration:1s;width:96px;height:91px;background-image:url(../images/hand.png);} .mhand2 {position:absolute;bottom:-38px;right:-20px;z-index:5;animation:move_down2 1s ease-in-out infinite;animation-delay:0.5s;animation-duration:1s;width:96px;height:91px;background-image:url(../images/hand.png);} .mhand3 {position:absolute;bottom:-38px;right:-20px;z-index:5;animation:move_down3 1s ease-in-out infinite;animation-delay:0.5s;animation-duration:1s;width:96px;height:91px;background-image:url(../images/hand.png);} .mhand4 {position:absolute;bottom:-38px;right:-20px;z-index:5;animation:move_down4 3s ease-in-out infinite;animation-delay:0.5s;animation-duration:1s;width:96px;height:91px;background-image:url(../images/hand.png);} .mhand5 {position:absolute;bottom:-38px;right:-20px;z-index:5;animation:move_down5 3s ease-in-out infinite;animation-delay:0.5s;animation-duration:1s;width:96px;height:91px;background-image:url(../images/hand.png);} .rhand {position:absolute;bottom:-38px;right:-20px;z-index:5;animation:move_right 2s ease-in-out infinite;animation-delay:0.5s;animation-duration:1s;width:96px;height:91px;background-image:url(../images/hand.png);} .hand.s01 {bottom:-90px;right:-60px;} .hand.s02 {bottom:-90px;right:-60px;} .hand.s03 {bottom:-85px;right:-45px;opacity:1;zoom:.7;} .hand.on {opacity:1;} .result_wrap {position:absolute;width:100%;text-align:center;bottom:100px;} .result_wrap > .btn.event_result2{width:463px;height:122px;display:inline-block;background-image:url('../images/event2_done.png');} .result_wrap > .btn.event_result2 > a {display:block;width:100%;height:100%;} /* 슬라이드 */ .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: transparent; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide img {width:100%;} .orderSwiper swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .orderSwiper 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;} .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%;} .pop_paging {bottom:-30px !important;} .pop_paging .swiper-pagination-bullet-active {background:#4F3828 !important;} .order_paging {top:450px !important;background:#703D1F !important;height:10px !important;border-radius:30px;} .swiper-pagination-bullet {width:14px !important;height:14px !important;} .swiper-pagination-bullet-active {background:#2DAF83 !important;} .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#2DAF83 !important;border-radius:30px;} @keyframes zoom{ 0% { scale: 1; } 100% { scale: 1.1; } } @keyframes blink{ 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes move_down1{ 0% { top: 115px; opacity:1; } 100% { top: 420px; right:-180px; opacity:0; } } @keyframes move_down2{ 0% { top: 115px; opacity:1; } 100% { top: 250px; right:200px; opacity:0; } } @keyframes move_down3{ 0% { top: 115px; opacity:1; } 100% { top: 250px; right:-60px; opacity:0; } } @keyframes move_down4{ 0% { top: 115px; opacity:1; } 100% { top: 650px; right:550px; opacity:0; } } @keyframes move_down5{ 0% { top: 115px; opacity:1; } 100% { top: 650px; right:60px; opacity:0; } } @keyframes move_right{ 0% { top: 37px; opacity:1; } 100% { top: 200px; right:-560px; opacity:0; } } @keyframes vmove{ 0% { top: 0px; opacity:0; } 100% { top: 620px; opacity:1; } } @keyframes typing{ 0% { width: 0%; } 50% { width: 480px; } 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 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_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) 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; background:#000000} .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;} .sbox_sch{ position:relative; width: 264px; height:79px; border: 4px solid #c6a149; box-sizing: border-box; background-image: url("../images/result/arrow2.png"); background-size: 28px 24px; background-repeat:no-repeat; background-position:220px center; border-radius: 10px; padding: 0 13px; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 35px; color:#1C476E; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .sbox{ position:relative; width: 264px; height:79px; border: 4px solid #2DAF83; box-sizing: border-box; background-image: url("../images/arrow.png"); background-size: 28px 24px; background-repeat:no-repeat; background-position:220px center; border-radius: 10px; padding: 0 13px; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 35px; color:#1C476E; -webkit-appearance: none; -moz-appearance: none; appearance: none; }