@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*, *::before, *::after {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

@font-face {
    font-family: 'PyeongChangPeace-Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, input, select, textarea, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, header, footer, hgroup, menu, nav, output, 
ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; vertical-align: baseline; border: 0;}
article, aside, hgroup, header, footer, figure, figcaption, nav, section,time, mark, canvas, video, audio, details, summary {display: block;}

html {
/* Prevent font scaling in landscape */
-webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
-moz-text-size-adjust: none; /*Firefox*/
-ms-text-size-adjust: none; /*Ie*/
-o-text-size-adjust: none; /*old versions of Opera*/
}

html {width: 100%; height: 100%; font-size: 62.5%; scroll-behavior: smooth;}
body {width: 100%; height: 100%; font-size: 1.4rem; color: #000; font-weight: 400; line-height: 1.1; text-align: center; font-family: 'Nunito', sans-serif; background:#eeddee;}
menu, ol, ul, li {list-style: none; list-style-image: none; vertical-align: top;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: none;}
table {table-layout: fixed; word-break: break-all; white-space: pre-wr ap; border-collapse: collapse; border-spacing: 0;}
table caption {display: none;}
ul {font-size: 0;}
li {font-size: 1.6rem; letter-spacing: 0;}
img {line-height: inherit; vertical-align: top; -ms-interpolation-mode: bicubic !important; max-width:100%;}
h1, h2, h3, h4, h5, h6 {color: #fff; font-weight: 700;  font-family: 'Nunito';}
a {color: #fff; font-weight: 400; text-decoration: none; font-family: 'Nunito'; display: inline-block; outline: none; cursor: pointer;}
a:focus {outline: none;}

.mobile {display:none;}

.inner {max-width:1296px; margin-left:auto; margin-right:auto; position:relative;}
.dst {display:table; width:100%; height:100%;}
.dstc {display:table-cell; vertical-align: middle;}

.container {overflow:hidden; position:relative; background:url('/images/common/event/2025/invite/bg_ptn.jpg') center 0 repeat; background-repeat: no-repeat; background-position: center 0; background-attachment: fixed;}
.btn {transition:all ease-in-out 0.2s; cursor:pointer; display:flex; width:120px; height:48px; position:relative; align-items:center; justify-content:center; border-radius:24px;  background: linear-gradient(to right, #88ccee, #7799ee, #cc88dd, #ff88bb, #ff9999); box-shadow:inset 0 0.4rem 2rem rgba(221, 221, 221, 0.3), 0 0 1rem rgba(255, 255, 255, 0.3) , 0 0.4rem 3rem rgba(68, 0, 136, 0.4);}
.btn:before {transition:all ease-in-out 0.2s; z-index: 1; width: auto; height: auto; top: 0; bottom: 0; left: 0; right: 0; content: ""; display: block; position: absolute; inset: 0; border-radius: 24px; padding: 0.2rem; background: linear-gradient(to right, #cfffff , #b7ccff , #ffbbff , #ffe4e6); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.btn span {transition: all ease-in-out 0.2s; color:#fff; font-family: 'PyeongChangPeace-Bold'; text-transform:uppercase; letter-spacing:0.08em; text-shadow:0 0 3px rgba(0, 0, 0, 0.3); font-size:14px;}
.btn:hover {background: linear-gradient(to right, #eeff33, #22eebb, #11ccff, #22eebb, #eeff33);}
.btn:hover:before {background: linear-gradient(to right, #ffffd0 , #fff , #4affff , #fff, #ffffd0);}
.btn:hover span {color:#000;}

.sub_tit {position: relative; z-index: 1; font-size:0; margin-bottom:4.2rem;}
.sub_tit span {margin:0 -2px; display:inline-block; vertical-align:top; }
.sub_tit:before, .sub_tit:after {z-index:-1; content:''; display:block; position:absolute; top:50%; margin-top:-2.8rem; height:5.6rem; background:url('/images/common/event/2025/invite/tit_line.png') 0 0 repeat-x; background-size: auto 100%; width:calc((100% - 1014px) / 2);}
.sub_tit:before {left:0;}
.sub_tit:after {right:0; transform:scaleX(-1);}

.obj_l, .obj_r { width:calc((100% - 1014px) / 2); position:absolute; top:50%; transform:translate(0 , -50%);}
.note {position:absolute; top:50%; transform:translate(0 , -50%); animation: float 2.5s ease-in-out infinite;}
.obj_l {left:0;}
.obj_r {right:0;}

.section02 .bg .cube02, .section02 .bg .cube06 {animation-delay:0.5s;}
.section02 .bg .cube03, .section02 .bg .cube04 {animation-delay:1s;}
.section02 .bg .cube07, .section02 .bg .cube08 {animation-delay:1.5s;}

.obj_l .note01 {width:7.8%; right:84.9%; max-width:60px;}
.obj_l .note02 {width:30.3%; right:47.8%; max-width:232px; animation-delay:0.5s;}
.obj_l .note03 {width:8.1%; right:36.2%; max-width:62px; transform: translate(0, -40%); animation-delay:1s;}
.obj_l .note04 {width:13%; right:22.2%; max-width:100px; transform: translate(0, 56%); animation-delay:1.5s;} 
.obj_l .note05 {width:4.9%; right:17.9%; max-width:38px; transform: translate(0, -134%);}
.obj_l .note06 {width:10.7%; right:5.6%; max-width:82px; transform: translate(0, -84%); animation-delay:0.5s;}

.obj_r .note07 {width:6.2%; max-width:48px; left:9.5%; transform: translate(0, -62%); animation-delay:1s;}
.obj_r .note08 {width:27.9%; max-width:214px; left:23.7%; transform: translate(0, -75%); animation-delay:1.5s;}
.obj_r .note09 { width:10.9%; max-width:84px; left:47.5%; transform: translate(0, 35%);}
.obj_r .note10 {width:4.7%; max-width:36px; left:60.6%; transform: translate(0, -106%); animation-delay:0.5s;}
.obj_r .note11 {width:8.8%; max-width:68px; left:83.3%; transform: translate(0, -48%); animation-delay:1s;}

.obj_ll, .obj_rr { width:calc((100% - 1316px) / 2); position:absolute; top:50%; transform:translate(0 , -50%);}
.obj_ll {left:0;}
.obj_rr {right:0;}

.obj_ll .note12 {width:17.9%; max-width:110px; right:76.7%; transform: translate(0, -86%); animation-delay:1.5s;}
.obj_ll .note13 {width:12.7%; max-width:78px; right:60.9%; transform: translate(0, -18%);}
.obj_ll .note14 {width:6.5%; max-width:40px; right:49.8%; transform: translate(0, -84%); animation-delay:0.5s;}
.obj_ll .note15 {width:34.8%; max-width:214px; right:16.6%; transform: translate(0, 23%); animation-delay:1s;}
.obj_ll .note16 {width:5.8%; max-width:36px; right:5.5%; transform: translate(0, -8%); animation-delay:1.5s;}

.obj_rr .note17 {width:13.6%; max-width:84px; left:6.5%; transform:translate(0 , 10%); animation-delay:1.5s;}
.obj_rr .note18 {width:13.6%; max-width:84px; left:24.4%; transform:translate(0 , -80%); }
.obj_rr .note19 {width:37.7%; max-width:232px; left:44.6%; transform:translate(0 , -55%); animation-delay:0.5s;}
.obj_rr .note20 {width:5.2%; max-width:32px; left:88.9%; transform:translate(0 , 6%); animation-delay:1s;}

.cha {position:absolute;}
.cha01 {top:15.6%; right:-5.4rem;}
.cha02 {top:24%; left:0; }

.animated .cha01 {animation: fir 0.5s , sway 2s 0.5s infinite linear;}
.animated .cha02 {animation: fil 0.5s , sway 2s 0.5s infinite linear;}

header { text-align:left; position:absolute; top:0; left:0; right:0;  z-index: 20; padding:3.6rem 3.6rem 0;}
header .util {position:absolute; top:3rem; right:3.6rem; font-size:0;}
header .util .user {display:inline-flex; vertical-align:top; padding:0 2.4rem; margin-right:1.2rem; min-width:19.2rem; height:48px; align-items:center; justify-content:center; border-radius:24px; background:url('/images/common/event/2025/invite/ptn_dot_b.jpg') 0 0 repeat;}
header .util .user span {font-size:17px; font-weight:800; background: linear-gradient(to right, #88ccee, #7799ee, #cc88dd, #ff88bb, #ff9999); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 1px #000);}
header .util .btn_login {display:inline-flex; vertical-align:top;}

footer {width: 100%; position: relative; z-index: 3;  text-transform:uppercase; font-family:'Roboto'; background:#000000; padding:12rem 2.4rem;}
footer > img {margin-bottom: 2.5rem;}
footer .footer {font-size: 14px; color: #999999; position: relative; z-index: 2;}
footer .footer .cs > a {color:#dd2222; font-family:'Roboto';}
footer .footer .cs > a:hover {text-decoration: underline;}
footer .footer .copy {margin-top: 8px}

.fadeInUp {animation-duration:0.5s;}

.section01 {position:relative; padding:15.6rem 0 0; margin-bottom: -24px;}
.section01:before {content:''; display:block; position:absolute; top:7.85%; left:0; background: url('/images/common/event/2025/invite/bg01_bot.png') 50% bottom no-repeat, url('/images/common/event/2025/invite/bg01.jpg') 50% top no-repeat; background-size: contain; transform:scale(1.2, 1.2); animation:bg 15s linear infinite; width: 100%; height: 0; padding-top: 100%;}
.section01 .title_wrap {text-align:center; position:relative; max-width:2000px; margin:0 auto; background:url('/images/common/event/2025/invite/bg_stage.png') center 0 no-repeat; background-size:100% auto;}
.section01 .title_wrap:after {content:''; display:block; padding-bottom: 65%;}
.section01 .title_wrap .title {transition:all ease-in-out 0.3s; display:inline-block; position:absolute; top:-3.05%; left:50%; transform:translate(-50% , 0) rotate(-180deg); width: 59.2%;     transform-origin: bottom;}
.section01 .title_wrap .date {font-family: 'PyeongChangPeace-Bold'; text-transform:uppercase; font-size:0; letter-spacing:0.24em; color:#5599cc; position: absolute; left:50%; transform:translate(-50% , 0); top:13%; width: 17.3%;  height: 4.693%;}
.section01 .title_wrap .date font {color:#aa77cc;}
.section01 .title_wrap .date span {position:absolute;  font-size: 1.2vw; left:0; top:0; transform-origin:top;}
.section01 .title_wrap .date span:nth-child(1) {top: 57.3%; left: -1.4%; transform: rotate(-24deg);}
.section01 .title_wrap .date span:nth-child(2) {top: 34.4%; left: 7.8%; transform: rotate(-24deg);}
.section01 .title_wrap .date span:nth-child(3) {top: 24.5%; left: 14.4%; transform: rotate(-20deg);}
.section01 .title_wrap .date span:nth-child(4) {top: 13.1%; left: 20.8%; transform: rotate(-14deg);}
.section01 .title_wrap .date span:nth-child(5) {top: 3.27%; left: 31.2%; transform: rotate(-8deg);}
.section01 .title_wrap .date span:nth-child(6) {top: -1.6%; left: 40.7%; transform: rotate(-5deg); color:#aa77cc; }
.section01 .title_wrap .date span:nth-child(7) {top: -3.27%; left: 50.8%; transform: rotate(-2deg); color:#aa77cc;}
.section01 .title_wrap .date span:nth-child(8) {top: 0px; left: 58.9%; transform: rotate(5deg); color:#aa77cc;}
.section01 .title_wrap .date span:nth-child(9) {top: 4.9%; left: 66.1%; transform: rotate(8deg); color:#aa77cc;}
.section01 .title_wrap .date span:nth-child(10) {top: 18%; left: 76%; transform: rotate(14deg);}
.section01 .title_wrap .date span:nth-child(11) {top: 29.5%; left: 82.6%; transform: rotate(20deg);}
.section01 .title_wrap .date span:nth-child(12) {top: 42.6%; left: 89.3%; transform: rotate(22deg);}
.section01 .title_wrap .date span:nth-child(13) {top: 57.3%; left: 95.3%; transform: rotate(24deg);}

.section01 .title_wrap > .img {position:absolute; left:50%; top:20%; transform:translate(-50% , 0); width: 79.4%;}
.section01 .title_wrap > .img img {position:absolute; top:0; left:0;}
.section01 .title_wrap > .img .tit_cha01 {position:relative;}
.section01 .title_wrap > .img .tit_cha02 {animation-delay:0.1s;}
.section01 .title_wrap > .img .tit_cha03  {animation-delay:0.2s;}
.section01.animated .title_wrap .title {transform:translate(-50% , 0) rotate(0); opacity:1;}

.section02 {position:relative; padding-bottom:11rem;}
.section02 .my_code {position:relative; height:72px; display:flex; align-items:center; justify-content:space-between; border-radius:36px; overflow:hidden; background:url('/images/common/event/2025/invite/ptn_dot_b.jpg') 0 0 repeat; padding:0 1.8rem 0 4.2rem;}
.section02 .my_code:before, .section02 .my_code:after {content:''; display:block; position:absolute; top:0; bottom:0; background-repeat:no-repeat; width: calc(50% - 2px);}
.section02 .my_code:before {background-image:url('/images/common/event/2025/invite/dot_line_l.png'); background-position:0 center; left:6px;}
.section02 .my_code:after {background-image:url('/images/common/event/2025/invite/dot_line_r.png'); background-position:right center; right:6px;}

.section02 .my_code .tit {text-transform:uppercase; color:#ffaaaa; letter-spacing:0.06em; font-family: 'PyeongChangPeace-Bold'; font-size:17px;}
.section02 .my_code .btn_copy {width:108px; height:36px; padding-left: 4px;}
.section02 .my_code .code {font-size:24px; color:#fff; font-weight:800; letter-spacing:0.01em; position:relative;}
.section02 .my_code .code span {background: linear-gradient(to right, #88ffff, #ccddff, #ee99ff, #ffaacc, #ffdd88); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.section02 .info {font-size:14px; color:#880055; letter-spacing:0.01em; font-family:'Roboto'; text-shadow:0 0 4px #ffbbcc; margin:1.2rem 0 3.6rem;}
.section02 .info:before {content:''; display:inline-block; position:relative; top:-1px; width:24px; height:24px; background:url('/images/common/event/2025/invite/icon_info.png') 0 0 no-repeat; background-size:100% auto; margin-right:1rem; vertical-align:middle;}
.section02 .info span {color:#000000;}
 
.reward_wrap {position:relative; border-radius:3.6rem; background-size: cover; box-shadow:0 1rem 4rem rgba(68, 0, 51, 0.1); border:1px solid #000; z-index:1;}
.reward_wrap:before {content:''; display:block; position:absolute; width:100%; height:100%; border-radius:3.6rem; background:rgba(255, 0, 0, 0.3); transform-origin:center; z-index:-1; transform:rotate(-2deg);}
.reward_wrap:after {content:''; display:block; position:absolute; top:3.6rem; bottom:3.6rem; left:3.6rem; right:3.6rem; clip-path: polygon(2.4rem 0, calc(100% - 2.4rem) 0, 100% 2.4rem, 100% calc(100% - 2.4rem), calc(100% - 2.4rem) 100%, 2.4rem 100%, 0 calc(100% - 2.4rem), 0 2.4rem); border:1px solid #000;}
.reward_wrap .desc {background:url('/images/common/event/2025/invite/bg_reward.jpg') center center no-repeat; border-radius:3.6rem; padding:8.4rem 7.2rem;}
.reward_wrap .desc:before {content:''; display:block; position:absolute; top:2.4rem; bottom:2.4rem; left:2.4rem; right:2.4rem; background:url('/images/common/event/2025/invite/obj_star.png') 0 0 no-repeat , url('/images/common/event/2025/invite/obj_star.png') 0 bottom no-repeat, url('/images/common/event/2025/invite/obj_star.png') right 0 no-repeat, url('/images/common/event/2025/invite/obj_star.png') right bottom no-repeat;}

.reward_wrap .desc > .tit {font-size:18px; color:#000000; text-shadow:0 0 1rem rgba(119, 187, 255, 0.4); letter-spacing:0.06em; font-family: 'PyeongChangPeace-Bold'; text-transform:uppercase; position:absolute; left:50%; top:2.6rem; transform:translate(-50% , 0);background: url(/images/common/event/2025/invite/bg_reward_tit.jpg) center 0 no-repeat; padding: 0 4rem; z-index: 1;}
.reward_wrap .desc > .tit span:before, .reward_wrap .desc > .tit span:after {content:''; display:block; position:absolute; width:4px; height:4px; border-radius:50%; background:#000; top:50%; transform:translate(0 , -50%);}
.reward_wrap .desc > .tit span:before {left:1.8rem;}
.reward_wrap .desc > .tit span:after {right:1.8rem;}
.reward_wrap .reward {position: relative; z-index: 1;}
.reward_wrap .reward ul {margin-left:-1.8rem; display: flex; align-items: stretch; justify-content: flex-start;}
.reward_wrap .reward ul li {padding-left:1.8rem; display:inline-block; vertical-align:top; width:20%;}
.reward_wrap .reward .con {height:100%; background: linear-gradient(to bottom, #ff8888, #9966ff); padding:0.6rem; border-radius:1.2rem; box-shadow:0 1rem 2rem rgba(0, 0, 0, 0.1);}
.reward_wrap .reward .item_wrap {height:100%; border-radius:0.8rem; padding:1.2rem; box-shadow:inset 0 0 0 0.2rem #fff , 0 0.4rem 3rem rgba(0, 0, 0, 0.1); background:url('/images/common/event/2025/invite/ptn_grunge.png') 0 0 repeat;}
.reward_wrap .reward .item {position:relative; margin-bottom:1.2rem;}
.reward_wrap .reward .item:last-child {margin-bottom:0 !important;}
.reward_wrap .reward .name { font-family: 'PyeongChangPeace-Bold'; text-transform:uppercase; padding:0.1rem 1rem 0; justify-content: center; align-items: center; border-radius:0 0 0.6rem 0.6rem; background:url('/images/common/event/2025/invite/bg.jpg') center center repeat; display:flex; color:#000; font-size:12px; letter-spacing:0.03em; line-height:1.16; height:54px; text-transform:uppercase;}
.reward_wrap .reward .item .img {border-radius: 0.6rem 0.6rem 0 0; background:#fff; padding:1.3rem 1.8rem;}
.reward_wrap .reward .item .day {padding:0.2rem 1rem 0; background:#000; position:absolute; top:0.6rem; right:-0.4rem; min-width:3.6rem; height:18px; border-radius:0.9rem 0.4rem 0.4rem 0.9rem; text-align:center; display:flex; align-items:center; justify-content:center; text-transform:uppercase;}
.reward_wrap .reward .item .day span {font-family:'Roboto'; font-size:11px; text-transform:uppercase; font-weight:700; letter-spacing:0.04em; background: linear-gradient(to right, #88ffff, #ccddff, #ee99ff, #ffaacc, #ffdd88); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.reward_wrap .reward .in_three .item {margin-bottom:0.6rem;}
.reward_wrap .reward .in_three .item .img {padding:0 1.3rem;}
.reward_wrap .reward .in_three .name {height:44px;}

.reward_wrap .explan {position: relative; z-index: 1;}
.reward_wrap .explan ul {padding-top:1.8rem; position:relative;}
.reward_wrap .explan li {padding-top:2px; position:relative; height:18px; letter-spacing:0.03em; padding-top:1px; display:flex; align-items:center; justify-content:flex-end; background: linear-gradient(to right, #22bbaa, #aa44ee); border-radius:0.9rem; margin-bottom:6px; text-align:right; padding-right:2.8rem; text-transform:uppercase; font-size:12px; color:#fff;     font-family: 'PyeongChangPeace-Bold';}
.reward_wrap .explan li:before {content:''; display:block; right:-2px; bottom:1px; background:url('/images/common/event/2025/invite/li_obj_t.png') center 0 no-repeat , url('/images/common/event/2025/invite/li_obj_b.png') center bottom no-repeat , url('/images/common/event/2025/invite/li_obj_m.png') center 0 repeat-y; width:2.2rem; position:absolute;}
.reward_wrap .explan li span {color:#ffee00;}
.reward_wrap .explan li:last-child {margin-bottom:0;}
.reward_wrap .explan li:nth-child(1) {width:calc(20% - 1.4rem);}
.reward_wrap .explan li:nth-child(2) {width:calc(40% - 1rem);}
.reward_wrap .explan li:nth-child(3) {width:calc(60% - 0.7rem);}
.reward_wrap .explan li:nth-child(4) {width:calc(80% - 0.4rem);}
.reward_wrap .explan li:nth-child(5) {width:100%;}
.reward_wrap .explan li:nth-child(1):before {height:6rem;}
.reward_wrap .explan li:nth-child(2):before {height:8.4rem;}
.reward_wrap .explan li:nth-child(3):before {height:10.8rem;}
.reward_wrap .explan li:nth-child(4):before {height:13.2rem;}
.reward_wrap .explan li:nth-child(5):before {height:15.6rem;}
.reward_wrap .reward .con + .txt {display:none;}

.mission_wrap {margin-top:4.8rem;}
.mission_wrap > .tit {font-size:28px; color:#7766dd; text-shadow:0 0 1rem rgba(119, 102, 221, 0.2); text-transform:uppercase; letter-spacing:0.06em; font-family: 'PyeongChangPeace-Bold'; text-transform:uppercase; padding: 0 4rem; z-index: 1; width: max-content; margin: 0 auto 3rem; position:relative;}
.mission_wrap > .tit span:before, .mission_wrap > .tit span:after {content:''; display:block; position:absolute; width:2.7rem; height:2.6rem; background:url('/images/common/event/2025/invite/tit_star.png') 0 0 no-repeat; background-size:100% auto; top:50%; margin-top:-1.3rem;}
.mission_wrap > .tit span:before {left:0;}
.mission_wrap > .tit span:after {right:0;}
.mission_wrap .list_wrap {padding:0.6rem; box-shadow:inset 0 0 0 0.4rem #7766dd; border-radius:3.6rem;}
.mission_wrap .list {display: flex; flex-wrap: wrap; background:url('/images/common/event/2025/invite/ptn_ms01.jpg') 0 0 repeat; border-radius:3rem; box-shadow:inset 0 0 0 0.2rem #6666dd; padding:3rem;}
.mission_wrap .list > li {margin: 1.2rem; flex: 1 1 30%;}
.mission_wrap .list .con {min-height:19.2rem; border-radius:1.2rem; padding:3.6rem 36px; box-shadow:0 0 2rem rgba(119, 102, 255, 0.2) , 0 0 2rem rgba(255, 255, 255, 0.1); flex-direction: column; height: 100%; position:relative; justify-content: center; align-items: center; display:flex; background:url('/images/common/event/2025/invite/bg_mission.jpg') center center no-repeat; background-size:cover !important;}
.mission_wrap .list .clear .con:after {z-index:3; position:absolute; content:''; display:block; background: url('/images/common/event/2025/invite/img_clear.png') center center no-repeat; width:23.6rem; height:23.6rem; top:50%; left:50%; margin-top:-11.8rem; margin-left:-11.8rem;}
.mission_wrap .list .mission {width:100%; position: relative; font-size:20px; color:#000000; font-weight:900; line-height:1.3; text-transform:uppercase; }
.mission_wrap .list .mission > font {color:#5555dd;}
.mission_wrap .list .mission > font img {vertical-align: middle; position: relative; top: -2px;}
.mission_wrap .list .state {min-width:12rem; padding:0 2.4rem; margin:1.2rem auto 0; display:flex; height:36px; align-items:center; justify-content:center; text-transform:uppercase; border-radius:18px; background: url(/images/common/event/2025/invite/ptn_dot_b.jpg) 0 0 repeat;}
.mission_wrap .list .state span {background: linear-gradient(to right, #88ffff, #ccddff, #ee99ff, #ffaacc, #ffdd88); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size:24px; font-weight:900; letter-spacing:0.02em;}
.mission_wrap .list .txt {font-size:14px; color:#fff; font-family:'Roboto'; letter-spacing:0.02em; line-height:1.28;  position:absolute; bottom:0; left:0; right:0; background: linear-gradient(to right, #22bbaa, #aa44ee);  border-radius:0 0 1.2rem 1.2rem; justify-content: center; align-items: center; display:flex; height:60px; padding: 0 3rem;}
.mission_wrap .list .txt span {color:#ffff33;}
.mission_wrap .list .num {z-index: 1; font-size:16px; position:absolute; top:-1.2rem; left:-1.2rem; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:50%; text-align:center; text-transform:uppercase; background:url('/images/common/event/2025/invite/bg_num.png') 0 0 no-repeat; background-size:100% auto;}
.mission_wrap .list .num span {font-family: 'PyeongChangPeace-Bold'; background: linear-gradient(to right, #88ffff, #ccddff, #ee99ff, #ffaacc, #ffdd88); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.mission_wrap .btn_facebook {transition:all ease-in-out 0.2s; letter-spacing:0.025em; text-shadow:0 0 3px rgba(0, 0, 0, 0.3); position:relative; margin:0 auto; background: linear-gradient(to right, #88ccee, #55bbff, #88ccdd, #cc88ff, #ffaaaa); border-radius:2rem; padding:2px 4.8rem 0 8.8rem;  text-align:left; font-size:17px; text-transform:uppercase; line-height:1.1; font-weight:900; color:#ffffbb; display:block; width:39.6rem; height:7.2rem; display:flex; align-items: flex-start; justify-content: center; flex-direction: column;}
.mission_wrap .btn_facebook:before, .mission_wrap .btn_facebook:after {content:''; display:block; position:absolute; top:50%; transform:translate(0 , -50%);}
.mission_wrap .btn_facebook:before {width:4.8rem; height:4.8rem; background:url('/images/common/event/2025/invite/img_facebook.png') 0 0 no-repeat; background-size:100% auto; left:2.4rem;}
.mission_wrap .btn_facebook:after {mix-blend-mode: screen; width:1.6rem; height:2.6rem; background:url('/images/common/event/2025/invite/btn_arr.png') 0 0 no-repeat; background-size:100% auto; right:2.6rem;}
.mission_wrap .btn_facebook span {display:block; color:#fff;}
.mission_wrap .btn_facebook:hover {background: linear-gradient(to right, #bb44ff, #1199ff); color:#ddeeff;}
.mission_wrap .count {font-size:0; margin-top:2.4rem; margin-left:-0.9rem;}
.mission_wrap .count li {position:relative; display:inline-block; vertical-align:top; max-width:72px; width:calc((100% - 5.4rem) / 5); height:36px; border:1px solid #000; border-radius:18px; background:url('/images/common/event/2025/invite/bin.png') center center no-repeat, url(/images/common/event/2025/invite/ptn_dot_b.jpg) 0 0 repeat; margin:0 0.4rem;}
.mission_wrap .count li.clear {background:none;}
.mission_wrap .count li.clear:before {content:'CLEAR'; display:flex; align-items:center; justify-content:center; position:absolute; top:0; bottom:0; left:0; right:0; font-size:13px; font-weight:800; color:#000000;}
.mission_wrap .info_wrap {margin-top:3.6rem; padding:0 4.8rem;}
.mission_wrap .info_wrap li {text-shadow:0 0 0.4rem #ffccff; position:relative; margin-bottom:1rem; text-align:left; font-size:14px; font-family:'Roboto'; color:#000000; padding-left:24px; letter-spacing:0.01em;}
.mission_wrap .info_wrap li:last-child {margin-bottom:0;}
.mission_wrap .info_wrap li span {color:#880055;}
.mission_wrap .info_wrap li:before {position:absolute; left:0; top:0; content:''; display:inline-block; vertical-align:middle; width:14px; height:14px; background:url('/images/common/event/2025/invite/dot_star.png') 0 0 no-repeat; } 
 
 .section02 .mission_wrap .count li {width:6rem; height:6rem; border-radius:50%;} 
.section02 .mission_wrap .list > li:nth-child(n+4) .con {padding-bottom:96px;}
 
.section03 { position:relative; padding-bottom:12rem;}
.section03 .sub_tit:before, .section03 .sub_tit:after {width: calc((100% - 1316px) / 2);}
.section03 .binding {position:relative; margin-bottom:2.4rem;}
.section03 .binding:after {mix-blend-mode: overlay; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; border-radius:3.6rem; box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.5);}
.section03 .binding:before {content:''; display:block; position:absolute; top:3.6rem; bottom:3.6rem; left:3.6rem; right:3.6rem; clip-path: polygon(2.4rem 0, calc(100% - 2.4rem) 0, 100% 2.4rem, 100% calc(100% - 2.4rem), calc(100% - 2.4rem) 100%, 2.4rem 100%, 0 calc(100% - 2.4rem), 0 2.4rem); border:1px solid #fff;}
.section03 .binding .desc {background:url('/images/common/event/2025/invite/bg02.jpg') center center no-repeat; background-size:cover; border-radius:3.6rem; padding:8.4rem 5.4rem;}
.section03 .binding .desc:before {content:''; display:block; position:absolute; top:2.4rem; bottom:2.4rem; left:2.4rem; right:2.4rem; background:url('/images/common/event/2025/invite/obj_star_w.png') 0 0 no-repeat , url('/images/common/event/2025/invite/obj_star_w.png') 0 bottom no-repeat, url('/images/common/event/2025/invite/obj_star_w.png') right 0 no-repeat, url('/images/common/event/2025/invite/obj_star_w.png') right bottom no-repeat;}
.section03 .binding .desc > .tit { width: max-content; font-size:18px; color:#fff; text-shadow:0 0 1rem rgba(136, 0, 204, 0.4); letter-spacing:0.06em; font-family: 'PyeongChangPeace-Bold'; text-transform:uppercase; position:absolute; left:50%; top:2.6rem; transform:translate(-50% , 0);background: url(/images/common/event/2025/invite/bg_bind_tit.jpg) center 0 no-repeat; padding: 0 4rem; z-index: 1;}
.section03 .binding .desc > .tit span:before, .section03 .binding .desc > .tit span:after {content:''; display:block; position:absolute; width:4px; height:4px; border-radius:50%; background:#fff; top:50%; transform:translate(0 , -50%);}
.section03 .binding .desc > .tit span:before {left:1.8rem;}
.section03 .binding .desc > .tit span:after {right:1.8rem;}
.section03 .binding .list {position:relative; z-index:1; font-size:0; display: flex; flex-wrap: wrap;}
.section03 .binding .list > li {margin:0 1.8rem; flex: 1 1 20%;}
.section03 .binding .list .con {border-radius:2rem; padding:2.4rem 0 1.2rem 8.4rem; height:100%; background: url(/images/common/event/2025/invite/bg_reward.jpg) center center no-repeat; background-size:100% auto; box-shadow:inset 0 0 0 1px #000; position:relative;}
.section03 .binding .item_wrap {font-size:0; display: flex; flex-wrap: wrap;}
.section03 .binding .item_wrap .item {padding:0 1.9rem; border-right:1px solid #000; width:50%; vertical-align:top; display:inline-block; position:relative;}
.section03 .binding .item_wrap .item:last-child {border-right:0;}
.section03 .binding .item_wrap .item .name {margin:-2px -1rem 0; text-transform:uppercase; font-family: 'PyeongChangPeace-Bold'; justify-content: center; min-height:42px; align-items: flex-end; display:flex; color:#000000; font-size:11px; line-height:1.27; letter-spacing: 0.03rem;}
.section03 .binding .item_wrap .item .day {background:#000; position:absolute; top:-0.4rem; right:1.7rem; min-width:24px; padding:2px 5px 0; height:24px; border-radius:50%; text-align:center; display:flex; align-items:center; justify-content:center; text-transform:uppercase;}
.section03 .binding .item_wrap .item .day span {font-family:'Roboto'; font-size:11px; text-transform:uppercase; font-weight:700; letter-spacing:0.04em; background: linear-gradient(to right, #88ffff, #ccddff, #ee99ff, #ffaacc, #ffdd88); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.section03 .binding .list .con .person {position:absolute; top:1.2rem; left:1.2rem; width:7.2rem; bottom:1.2rem;}
.section03 .binding .list .con .person .tit {background: url(/images/common/event/2025/invite/ptn_dot_b.jpg) 0 0 repeat; border-radius:10px; height:20px; display:flex; align-items:center; justify-content:center; margin-bottom: -2px; padding-left: 0.1rem;}
.section03 .binding .list .con .person .tit span {background: linear-gradient(to right, #88ffff, #ccddff, #ee99ff, #ffaacc, #ffdd88); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size:11.5px; font-weight:1000; letter-spacing:0.01em; text-transform:uppercase;}
.section03 .binding .list .con .person .ps {font-family: 'PyeongChangPeace-Bold'; font-size:42px; display:flex; align-items:center; justify-content:center; height:calc(100% - 20px); border-radius:10px; box-shadow:inset 0 0 0 2px #000; background: linear-gradient(to bottom, #ffdd88, #ffaacc, #ee99ff, #ccddff, #88ffff);}
.section03 .binding .list > li:first-child .item:first-child .name {align-items:center; padding-top:0.5rem;}

.section03 .reward_wrap:before {background:rgba(17, 119, 204, 0.3); transform: rotate(2deg); right: -1rem; top: 2.4rem; height: 94%;}
.section03 .reward_wrap .reward ul {margin-left:-2.4rem;}
.section03 .reward_wrap .reward ul li {padding-left:2.4rem; width:28%;}
.section03 .reward_wrap .reward ul li.in_three {width:44%;}
.section03 .reward_wrap .reward .con {font-size:0; position:relative;     background: linear-gradient(to bottom, #bb77ff, #00bbcc);}
.section03 .reward_wrap .reward .item {margin-bottom:0; display:inline-block; vertical-align:top; width:calc((100% - 1.2rem) / 2); margin-right:1.2rem;}
.section03 .reward_wrap .reward .item .img {padding:0.8rem 0.6rem;}
.section03 .reward_wrap .reward .item:last-child {margin-right:0 !important;}
.section03 .reward_wrap .reward .in_three .item {width:calc((100% - 2.4rem) / 3);}
.section03 .reward_wrap .reward .in_three .item .img {padding:0.7rem 0.3rem;}
.section03 .reward_wrap .explan li {background: linear-gradient(to right, #88cc66, #0088cc);}
.section03 .reward_wrap .explan li:nth-child(1) {width:calc(28% - 1.8rem);}
.section03 .reward_wrap .explan li:nth-child(2) {width:calc(56% - 1.2rem);}
.section03 .reward_wrap .explan li:nth-child(3) {width:100%;}
.section03 .reward_wrap .reward .name {height:54px;}

.section03 .mission_wrap > .tit {color:#1177cc; text-shadow:0 0 1rem rgba(17, 119, 204, 0.2);}
.section03 .mission_wrap > .tit span:before, .section03 .mission_wrap > .tit span:after {    background: url(/images/common/event/2025/invite/tit_star02.png) 0 0 no-repeat; background-size:100% auto;}
.section03 .mission_wrap .list_wrap {box-shadow: inset 0 0 0 0.4rem #1177cc;}
.section03 .mission_wrap .list {background: url(/images/common/event/2025/invite/ptn_ms02.jpg) 0 0 repeat; box-shadow: inset 0 0 0 0.2rem #1177cc;}
.section03 .mission_wrap .list > li {width: calc((100% - 4.8rem) / 2);  flex: none;}
.section03 .mission_wrap .list .con {padding-bottom:84px; min-height:20.8rem; background: url(/images/common/event/2025/invite/bg_mission03.jpg) center center no-repeat;}
.section03 .mission_wrap .count {margin-top:1.3rem;}
.section03 .mission_wrap .list .mission > font {color:#0066bb;}
.section03 .mission_wrap .list .mission > span {color:#008888;}
.section03 .mission_wrap .list > li.ms3 {width: calc(100% - 2.4rem); }
.section03 .mission_wrap .list > li.ms3 .con {padding-bottom:3.6rem; background: url(/images/common/event/2025/invite/bg_mission02.jpg) center center no-repeat;}
.section03 .mission_wrap .list .txt {background: linear-gradient(to right, #88cc66, #0088cc); height:48px;}

.section03 .invite_area {position:relative; width:100%;}
.section03 .invite_area {z-index: 3;}
.section03 .invite_area .invite_input {margin:3.6rem 0 2.4rem;    background: url(/images/common/event/2025/invite/ptn_dot_b.jpg) 0 0 repeat;  height:48px;  border-radius:1.2rem; position:relative; padding:0 120px;}
.section03 .invite_area .invite_input .btn_enter {position:absolute; right:0.5rem; top:4px; height:40px; border-radius:8px; width:112px;}
.section03 .invite_area .invite_input .btn_enter:before {border-radius:8px;}
.section03 .invite_area .invite_input input {caret-color: #fff; width:32rem; max-width:100%; height:100%; font-size:14px; background: linear-gradient(to right, #88ffff, #ccddff, #ee99ff, #ffaacc, #ffdd88); -webkit-background-clip: text; -webkit-text-fill-color: transparent;letter-spacing:0.01em;  text-align:center;}
.section03 .invite_area .invite_input input::placeholder {background: linear-gradient(to right, #88ffff, #ccddff, #ee99ff, #ffaacc, #ffdd88); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.section03 .invite_area .invite_input input:focus {border:none; outline:none;}
.section03 .invite_area .friend {font-size:0; margin-left:-1.2rem;}
.section03 .invite_area .friend li {display:inline-block; vertical-align:top; width:20%; padding-left:1.2rem;}
.section03 .invite_area .friend .box {position:relative; border-radius:1.2rem; height:84px; font-family:'Roboto'; letter-spacing:0.01em; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px #000; flex-direction:column; background:#000; padding: 0 3.6rem 0 3.8rem;}
.section03 .invite_area .friend .user {font-weight: 500; font-size:16px; color:#4cf; overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; word-wrap: normal; white-space: nowrap; max-width:100%;}
.section03 .invite_area .friend .user span {background: linear-gradient(to right, #66ff88, #44ccff); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; letter-spacing: 0; font-weight: 400;}
.section03 .invite_area .friend .date {font-size:14px; margin-top:7px; color:#999999;}
.section03 .invite_area .friend .complete .box {background:none;}
.section03 .invite_area .friend .complete .box:before {content:''; display:block; position:absolute; top:0.8rem; left:0.8rem; width:24px; height:24px; background:url('/images/common/event/2025/invite/img_heart.png') 0 0 no-repeat; background-size:100% auto; border-radius:50%;}
.section03 .invite_area .friend .complete .date {color:#cc0000; }
.section03 .invite_area .friend .complete .user {font-weight:400; color:#000;}
.section03 .invite_area .friend .complete .user span {background: linear-gradient(to right, #000, #000);}
.section03 .invite_area .friend .bin .box {background: linear-gradient(to right, rgba(37, 153, 170, 0.3) , rgba(119, 204, 51, 0.3)); box-shadow:none;}
.section03 .invite_area .friend .bin .user span {background: linear-gradient(to right, #000, #000);}
.section03 .invite_area .friend .bin .date {font-weight:500; color:#000; font-size:16px;}
.section03 .mission_wrap .info_wrap li:before {background: url(/images/common/event/2025/invite/dot_star_b.png) 0 0 no-repeat;}
.section03 .mission_wrap .info_wrap li span {color:#002288;}

.section03  .mission_wrap .ms2 .count {display: flex; flex-wrap: wrap; max-width:404px; margin:1.8rem auto 0;}
.section03  .mission_wrap .ms2 .count li {max-width:none; margin-top:6px; width: calc((100% - 4rem) / 5);}

.section04 {background: url(/images/common/event/2025/invite/bg_caution.jpg) center center no-repeat; background-size:cover; text-align:left; padding:12rem 0; position:relative;}
.section04 .caution {padding:0 3.6rem;}
.section04 .caution li {color:#000000; font-size:14px; font-family:'Roboto'; letter-spacing:0.015em; margin-bottom:1.5rem; padding-left:24px; position:relative; text-shadow:0 0 2px rgba(0, 0, 0, 0.05);}
.section04 .caution li:last-child {margin-bottom:0;}
.section04 .caution li:before {content:''; display:block; position:absolute; top:2px; left:0; width:14px; height:14px; background:url('/images/common/event/2025/invite/dot_heart.png') 0 0 no-repeat;}
.section04 .caution li span {color:#cc0000;}

@keyframes sway {
  0% {
    transform:rotate(0deg) translate(0 , 0);
  }
  25% {
    transform:rotate(0.2deg) translate(0 , 5px);
  }
  50% {
    transform:rotate(0deg) translate(0 , 0);
  }
  75% {
    transform:rotate(-0.2deg) translate(0 , -5px);
  }
  100% {
    transform:rotate(0deg) translate(0 , 0);
  }
}

@keyframes sway02 {
  0% {
    transform:rotate(0deg) translate(0 , 0);
  }
  25% {
    transform:rotate(-0.2deg) translate(0 , -5px);
  }
  50% {
    transform:rotate(0deg) translate(0 , 0);
  }
  75% {
    transform:rotate(0.2deg) translate(0 , 5px);
  }
  100% {
    transform:rotate(0deg) translate(0 , 0);
  }
}

@keyframes fil {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    opacity:0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity:1;
  }
}

@keyframes fir {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    opacity:0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity:1;
  }
}

@keyframes float {

    50% {
        margin-top:-1rem;
    }
}


@keyframes up {
    70% {
        transform: translateY(0%);
    }

    80% {
        transform: translateY(1rem);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes bg {
  50% {
        transform: scale(1.35, 1.35);
  }
}

@media screen and (min-width: 1924px) {
.section01:before {top:-8%; transform:scale(1, 1);}
@keyframes bg {50% {transform: scale(1.15, 1.15);}}
}

@media screen and (max-width: 2400px) {
.cha01 {right:-15rem; width:510px;}
.cha02 {left:-6rem; width:468px;}
}

@media screen and (max-width: 1600px) {
.cha {display:none;}	
.obj_ll, .obj_rr { width:calc((100% - 1210px) / 2);}
.section01:before {top:11%;}
.section03 .sub_tit:before, .section03 .sub_tit:after {width:calc((100% - 1210px) / 2);}
}	

@media screen and (max-width: 1356px) {
.inner {padding-left:3rem; padding-right:3rem;}
.section01:before {top:24%; transform:scale(1.5, 1.5);}
@keyframes bg {50% {transform: scale(1.6, 1.6);}}
.section01 .title_wrap {width: 130%; left: 50%; transform: translate(-50%, 0);}
}

@media screen and (max-width: 1280px) {
.sub_tit:before, .sub_tit:after {display:none;}
.obj_ll, .obj_rr, .obj_l, .obj_r {display:none;}
	
.reward_wrap .desc {background-size:cover;}	
.reward_wrap .desc > .tit {background: linear-gradient(to right, #d4d8fe, #f5c8fd);}
.reward_wrap .reward ul {position:relative; margin-left:0; display:block;}
.reward_wrap .reward ul:before {z-index: 1; content: ''; display:block; position:absolute; top:1rem; bottom:-1.2rem; left:0; width:1.8rem; border-radius:1.8rem; background: url('/images/common/event/2025/invite/li_obj_m.png') center 0 repeat-y;}
.reward_wrap .reward ul:after {content: ''; width: 22px; height: 22px; border-radius: 11px; background:url('/images/common/event/2025/invite/li_obj_t.png') no-repeat; display: block; position: absolute; top: 0; left: -2px; z-index: 2;}
.reward_wrap .reward ul li {width:100%; display:block; margin-bottom:1.8rem; padding-left:0;}
.reward_wrap .reward ul li:last-child {margin-bottom:0;}
.reward_wrap .reward .con {font-size:0; margin-left: 4.8rem; }
.reward_wrap .reward .item {width:calc((100% - 1.2rem) / 2); display:inline-block; margin-bottom:0; vertical-align:top;}
.reward_wrap .reward .in_three .item:last-child {width:100% !important;}
.reward_wrap .reward .item:first-child {margin-right:1.2rem !important;}
.reward_wrap .reward .con + .txt {margin-top:1.8rem; position: relative; height: 18px; letter-spacing: 0.03em; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, #22bbaa, #aa44ee); border-radius: 9px; text-align: center; text-transform: uppercase; font-size: 12px; color: #fff; font-family: 'PyeongChangPeace-Bold'; padding-top: 2px;}
.reward_wrap .reward .con + .txt span {color:#ffee00; padding: 0 0.4rem;}
.reward_wrap .reward .con + .txt:before {content: ''; width: 16px; height: 16px; background: url('/images/common/event/2025/invite/li_obj_b.png') no-repeat; display: block; position: absolute; top: 50%; left: 2px; transform: translate(0, -50%); z-index: 3;}
.reward_wrap .explan {display:none;}
.reward_wrap .reward .name, .section03 .reward_wrap .reward .name {background-size:cover; height: 44px; padding: 0 2rem;}
.reward_wrap .reward .name br {display: none;}

.mission_wrap .count li {min-width:0;}

.section03 .reward_wrap .reward ul li.in_three {width:auto;}
.section03 .reward_wrap .reward .in_three .item {margin-right:0; width:calc((100% - 1.2rem) / 2); margin-bottom: 0.6rem;}
.section03 .reward_wrap .desc > .tit {background: linear-gradient(to right, #cde5ff, #ffc3fe);}
.section03 .reward_wrap .reward ul li {width:100%; display:block; padding:0;}
.section03 .reward_wrap .reward ul {margin-left:0;}
.section03 .reward_wrap .reward .con + .txt {background: linear-gradient(to right, #88cc66, #0088cc);}
.section03 .reward_wrap .reward .con:before {display:none;}
.section03 .reward_wrap .reward .item { width: calc((100% - 2.4rem) / 2);}
.section03 .invite_area .friend .box {height:84px; padding: 0.8rem 2rem 0 2.2rem;}
.section03 .invite_area .friend .user {font-size:14px;}
.section03 .invite_area .friend .complete .date {margin-top: 2px;}
.section03 .invite_area .friend .complete .box:before {top: 0.4rem; left: 0.4rem;}

.section03 .binding .item_wrap .item .name {align-items: center;}
.section03 .binding .item_wrap .item .name br {display: none;}
.section03 .binding .desc > .tit {background: linear-gradient(to right, #814cfe, #d04ef6);}
.section03 .binding .list {display:block;}
.section03 .binding .list > li {margin:0 0 3.6rem;}
.section03 .binding .list > li:last-child {margin:0;}
}

@media screen and (max-width: 1023px) {
.mission_wrap .list {display:block;}
.mission_wrap .list > li {margin:0 0 2.4rem;}

.mission_wrap .info_wrap {padding:0;}

.section01:before {top:24%; transform:scale(1.8, 1.8);}
@keyframes bg {50% {transform: scale(1.9, 1.9);}}

.section03 .mission_wrap .list > li {width:auto;}
.section03 .mission_wrap .list > li.ms3 {width:auto;}
.section03 .invite_area .friend {margin-left:0;}
.section03 .invite_area .friend li {display:block; width:auto; padding-left:0; margin-bottom:1.2rem;}
.section03 .invite_area .invite_input {padding-left:0; text-align:left;}
}

/*** max-width 768 ***/
@media screen and (max-width: 768px) {
html {font-size:32%;}	

.btn {height:36px;}
.btn span {font-size:2rem;}

header {padding:3rem 3rem;}
header .bi img {width:140px;}
header .util {top:2.4rem; right:3rem;}
header .util .user {width: 19rem; height:24px; min-width:0;}
header .util .user span {font-size:2.5rem; overflow: hidden; text-overflow: ellipsis;  -ms-text-overflow: ellipsis;  word-wrap: normal;  white-space: nowrap; max-width:100%;}
header .util .btn_login {width:14rem; height:24px;}

footer > img {width:100px; }
footer .footer {position: relative; z-index: 2; font-size:2.1rem;}

.sub_tit img {height:40px;}

.mission_wrap > .tit {font-size:3.7rem;}
.mission_wrap > .tit span:before, .mission_wrap > .tit span:after {margin-top:-1.5rem;}
.mission_wrap .list .num {font-size:2.5rem; width:36px; height:36px; padding-top: 2px;}
.mission_wrap .list .mission {font-size:2.8rem;}
.mission_wrap .list .state {height:26px;}
.mission_wrap .list .state span {font-size:2.8rem;}
.mission_wrap .btn_facebook {font-size:2.5rem; width:46rem;}
.mission_wrap .count li {height:26px;}
.mission_wrap .count li.clear:before {font-size:1.6rem; padding-top: 2px;}
.mission_wrap .list .txt {font-size:2.2rem; padding: 0 2.4rem; word-break: break-word; height:50px; line-height: 1.2; letter-spacing: 0;}
.mission_wrap .list .clear .con:after {background-size:100% auto;}
.mission_wrap .info_wrap li {font-size:2.2rem; line-height:1.6; letter-spacing: 0;}
.mission_wrap .info_wrap li:before {top:2px;}

.section01:before {top:30%; transform:scale(1.8, 1.8);}
@keyframes bg {50% {transform: scale(1.9, 1.9);}}

.section01 {margin-bottom: -12px;}
.section01 .title_wrap {width:150%;}
.section01 .title_wrap .date {width:25%; height:6.78%;}
.section01 .title_wrap .date span {font-size: 2.5vw;}

.section02 .my_code:before, .section02 .my_code:after {height: 44px; background-size: auto 44px; top: 2px;}
.section02 .my_code:before {left: 2px;}
.section02 .my_code:after {right: 2px;}
.section02 .my_code .tit {font-size:2.3rem}
.section02 .my_code .code {font-size:2.75rem; margin: 0 1.2rem; font-weight: 900;}
.section02 .my_code {padding: 0 14px 0 19px; height: 48px;}
.section02 .my_code .btn_copy {width:60px; height: 30px;}

.section02 .mission_wrap .list > li:nth-child(n+4) .con {padding-bottom: 72px;}

.section02 .info {font-size:2.2rem; letter-spacing: 0;}
.section02 .info:before {width:18px; height:18px; background-size:100% auto;}

.reward_wrap:before {width:96%; left:1rem;}
.reward_wrap:after {left: 2.4rem; right: 2.4rem;}
.reward_wrap .reward ul:before {left: 4px;}
.reward_wrap .reward .item .img {padding: 2px 4px 0 4px;}
.reward_wrap .reward .item .day span {font-size:2rem; font-weight: 900;}
.reward_wrap .reward .name {font-size:1.9rem;}
.reward_wrap .reward .con + .txt {font-size:2.1rem;}
.reward_wrap .desc {padding: 7.8rem 4.8rem;}
.reward_wrap .desc:before {left: 1.6rem; right: 1.6rem; background-size: 2.4rem auto;}
.reward_wrap .desc > .tit {font-size:2.7rem;}

.section03 .mission_wrap .list .con {padding-bottom:60px;}
.section03 .reward_wrap .reward .name {height:44px;}
.section03 .invite_area .friend .box {height:60px;}
.section03 .invite_area .friend .user {font-size:2.5rem;}
.section03 .invite_area .friend .date {font-size:2.3rem;}
.section03 .invite_area .invite_input {padding: 0 70px 0 12px; height: 40px;}
.section03 .invite_area .invite_input input {font-size:2.3rem; padding-left:1.2rem; width:50rem; text-align: left;}
.section03 .invite_area .invite_input .btn_enter {width: 56px; height: 36px; top: 2px; padding-left: 2px;}
.section03 .binding .desc > .tit {font-size:2.7rem; height:2.7rem;}
.section03 .binding .desc:before {background-size:2.5rem auto; left: 1.6rem; right: 1.6rem;}
.section03 .binding .list .con {padding-left:62px;}
.section03 .binding .list .con .person {width:50px;}
.section03 .binding .list .con .person .ps {font-size:5.1rem;}
.section03 .binding .list .con .person .tit span {font-size:2rem; letter-spacing: 0;}
.section03 .binding .item_wrap .item .name {font-size:2rem; min-height:36px;}
.section03 .binding .item_wrap .item .day span {font-size:2rem; font-weight: 900; padding-bottom: 3px;}

.section03 .binding:before {left: 2.4rem; right: 2.4rem;}

.section04 .caution li {font-size:2.2rem; line-height: 1.3; letter-spacing: 0;}
}

@media screen and (max-width: 450px) {
.section01:before {top:38%; transform:scale(1.95, 1.95);}
@keyframes bg {50% {transform: scale(2, 2);}}
.section03 .invite_area {width: calc(100% + 40px);}	
}

@media screen and (max-width: 385px) {
.section03 .invite_area .invite_input input {font-size:2.1rem;}	
}

@media screen and (max-width: 370px) {
.section02 .my_code .code {font-size:2.4rem;}
}