@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Roboto:wght@400;500;700&display=swap');

/* reset */
*, *::before, *::after {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

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%; background: #110047 url('/images/common/event/quest/anni15th/bg_quest.jpg') 50% 0 no-repeat; color:#fff; line-height: 1; text-align: center; font-weight: 900; font-family: 'Nunito', sans-serif; letter-spacing: 0.04rem; background-size: cover;}
h1, h2, h3, h4, h5, h6 {font-weight: 900; font-family: 'Nunito', sans-serif; text-transform: uppercase;}
ol, ul, li {list-style: none; list-style-image: none; vertical-align: top;}
ul {font-size: 0;}
img {line-height: inherit; vertical-align: top;}
strong {font-weight: 900;}
table {padding: 0; border: 0; border-spacing: 0; border-collapse: collapse; table-layout: fixed;}
table caption {display: none;}
a {text-decoration: none;}
a:hover {transition: all 0.4s ease;}
button {font-weight: 900; font-family: 'Nunito', sans-serif; text-transform: uppercase;}
button:hover {transition: all 0.4s ease; cursor: pointer;}
button:focus {outline: none;}

.container {position:relative; width:100%; margin:0 auto; overflow:hidden;}
.inner {width:100%; max-width:1160px; padding:0 3rem; margin:0 auto; position:relative; z-index: 1;}
.clr:after {clear:both; content:''; display:block;}
.dst {display:table; width:100%; height:100%;}
.dstc {display:table-cell; vertical-align: middle;}

/**/
select {-webkit-appearance: none;-moz-appearance: none; appearance: none;}
select::-ms-expand {display: none;}
select:focus {outline: none;}
a {color: #fff; text-decoration: none; display: inline-block; outline: none; text-decoration: none;}
a:focus {outline: none;}
a:hover {transition: all 0.4s ease;}
button {font-weight: 900; font-family: 'Nunito', sans-serif; text-transform: uppercase; cursor: pointer; outline: none;}
button:hover {transition: all 0.4s ease; cursor: pointer;}
button:focus {outline: none;}

header {width: 100%; position: fixed; top: 0; left: 0; z-index: 20;}
header a, header button {z-index: 21;}
header .header_wrap {width: 100%; position: relative; padding: 1.8rem 2.4rem; background: rgba(102, 51, 255, 0.5); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}
header .btn_login {position:absolute; right:2.4rem; top:1.8rem;}
header .btn_login > button {overflow: visible; position:relative; display:block; background: linear-gradient(#c0a, #c00);}
header .btn_login > button:hover {color: #ff0; background: linear-gradient(#f00, #c0a);}
header .btn_history {left:2.4rem; position:absolute;top:1.8rem;}
header .btn_login > button, header .btn_history {border-radius:60rem; width: 144px; height:36px; font-size: 17px; color: #fff; line-height: 37px; text-align: center; letter-spacing:0.04rem;}
header .my_area {font-size:0; position:absolute; top:50%; right:18rem; transform:translate(0, -50%); font-weight: 400;}
header .my_area > div {display:inline-block; vertical-align:middle; margin:0 2rem; font-size:18px; font-family: 'Roboto'; letter-spacing: -0.01rem; height: 24px; line-height: 26px;}
header .my_area .name {position:relative; }
header .my_area .name:before {content:''; display:inline-block; margin-right:1rem; width:24px; height:24px; vertical-align:middle; background:url('/images/common/event/quest/anni15th/icon_user.png') 0 0 no-repeat; background-size:20px auto;}
header .my_area .cash {color:#ff0; text-transform: capitalize; position:relative;}
header .my_area .cash:before {content:''; display:inline-block; width:2px; height:24px; vertical-align:middle; background:#a8f; position:absolute; top:50%; transform:translate(0, -50%); left:-2rem;}

footer {width:100%; padding: 9.6rem 0; letter-spacing: 0.01rem; background: #105; font-family: 'Roboto'; font-weight: 400; position:relative; z-index: 10;}
footer p {color:#98c; font-size:12px; line-height:1.6; }
footer .cs {margin-top: 2.5rem;}
footer .cs > a {color: #fff;}
footer .cs > a:hover {text-decoration:underline;}

.cha {position:absolute; top:-400px; z-index: -1;}
.cha > div {position:absolute; right: 0; top: 0;}
.chalf {width: 574px; height: 1228px; left:-600px; top:-600px;}
.chalf .bl {z-index: 4; top: -230px; left: -300px;}
.chalf .rd {z-index: 5; top: 120px; left: -40px;}
.chalf .gr {z-index: 3; top: 320px; left: 90px;}
.chart {width: 1048px; height: 2312px; right:-630px; top:-786px;}
.chart .woman {z-index: 10;}
.chart .heart1 {z-index: 9;}
.chart .heart2 {z-index: 11;}
.chart .heart2_line {z-index: 9;}
.chart .yl {z-index: 8;}
.chart .bl {z-index: 7;}
.chart .gr {z-index: 6;}
.chart .vt {z-index: 5;}

.section01 {width: 1120px; margin: 0 auto; padding-top: 15.6rem; margin-bottom: 8.4rem; position: relative; z-index: 2;}
.section01 .title {width: 100%; padding-top: 46.8rem;}
.section01 .title h2 {width: 592px; position: absolute; top: 0; left: 50%; transform: translate(-50% , 0);}
.section01 .title img {position: absolute; top: 0; left: 0;}
.section01 .title .sub_tit {height: 144px; font-size: 0; color:#fff; line-height: 144px; animation: fadeInUp 0.5s; border-radius: 40px; background: url('/images/common/event/quest/anni15th/title.png') no-repeat 50% 0; text-indent: -99999px; box-shadow: 0 0 30px rgba(136, 136, 255, 0.5);}
.section01 .title .sub_tit span {text-shadow: 1px 0 #65f, 0 1px #65f, 1px 0 #65f, 0 -1px #65f, 0px 10px 0px #65f;}
.section01 .date {margin-top: 2.4rem; color:#fff; font-size:20px; text-transform:uppercase; padding: 0.9rem 0 0.7rem; border-radius:60rem; background: rgba(102, 51, 255, 0.6); letter-spacing: 0.05rem; text-shadow: 0 0 10px rgba(255, 0, 204, 0.5);}
.section01 .date font {color: #ff0;}

.quest .top {margin-bottom: 2.4rem; position: relative; text-align: left; height: 24px; line-height: 26px;}
.quest .top > .tit {letter-spacing: 0.04rem; color:#fff; font-size:34px; text-transform:uppercase; text-shadow: 0 0 8px rgba(187, 51, 255, 0.5);}
.quest .top > .tit font {color: #fff;}
.quest .top > .tit font:last-child {color: #ddf;}
.quest .top .time {color:#fff; font-size:28px; letter-spacing: 0.05rem; text-transform: uppercase; /*-webkit-text-stroke: 1px rgba(255, 0, 255, 0.4);*/ text-shadow: 0 1px 0 #f8e, 0 -1px 0 #f8e, 1px 0 0 #f8e, -1px 0 0 #e2e; font-weight: 700; position: absolute; top: 0; right: 0;}
.quest .top .time span {display:inline-block; vertical-align: top;}
.quest .top .time span.progress {padding: 5px; width: 360px; border: 2px solid #fff; background:rgba(68, 17, 68, 0.9); height: 24px; border-radius: 60rem; box-shadow: inset 0 0 20px rgba(255, 119, 255, 0.8), 0 0 20px rgba(255, 119, 255, 0.5);}
.quest .top .time span.progress span.bar {width: 50%; height: 10px; display:block; background: #fff; border: 1px solid #fdf; border-radius: 60rem; box-shadow: 0 0 10px rgba(255, 119, 255, 0.8);}
.quest .top .time #leftTime {margin-right: 1.8rem;} 
.quest .top .time #leftTime:before {vertical-align:top; content:''; display:inline-block; width:24px; height:24px; background:url('/images/common/event/quest/anni15th/icon_time.png') 0 0 no-repeat; margin-right:8px;}
.quest .top .time #dayCount {margin-right: 1.8rem;} 
.quest .top .time #dayCount:before {vertical-align:top; content:''; display:inline-block; width:24px; height:24px; background:url('/images/common/event/quest/anni15th/icon_time.png') 0 0 no-repeat; margin-right:8px;}

.btn {letter-spacing:0.04rem; font-size:20px; width:256px; height:72px; border-radius:60rem; color:#fff; text-transform:uppercase; text-align:center; position:relative; background: #000;}
.btn br {display:none;}
.btn:hover {color: #ff0;}
.btn:before {content:''; display:inline-block; vertical-align:middle; position:relative; width:24px; height:24px; margin-right:1.2rem;}
.btn_reward {width: 288px; background: linear-gradient(#c0a, #c03);}
.btn_reward:hover {background: linear-gradient(#c03, #7c001f);}
.btn_reward:before {background:url('/images/common/event/quest/anni15th/icon_recive.png') 0 0 no-repeat;}
.btn_start {background:linear-gradient(#90e, #30c);}
.btn_start:hover {background:linear-gradient(#3300cc, #1f007c);}
.btn_start:before {background:url('/images/common/event/quest/anni15th/icon_start.png') 0 0 no-repeat;}

.btn_modify {color:#fff; font-size:14px; width: 144px; height: 40px; text-align:center; border-radius: 60rem; letter-spacing: 0.08rem; font-weight: 700; background:linear-gradient(#07f, #30e);}
.btn_modify:hover {background:linear-gradient(#30e, #1f0092); color: #ff0;}

.quick_clear {color:#fff; font-size:14px; width: 144px; height: 40px; text-align:center; border-radius: 60rem; letter-spacing: 0.01rem; font-weight: 700; background:linear-gradient(#90e, #30c); line-height: 14px; padding-top: 2px;}
.quick_clear .cash {font-size:11px; color:#ffa; display: block; font-family: 'Roboto'; font-weight: 500;}
.quick_clear:hover {background:linear-gradient(#3300cc, #1f007c); color: #ff0;}

.btn_history {background: linear-gradient(#90e, #53f);}
.btn_history:hover {color: #ff0; background: linear-gradient(#64f, #90e);}
.btn_history:before {display:none;}

.section02, .section03 {padding: 0 0 8.4rem;}

.quest_warp > .list {font-size:0; animation:zoomIn 0.5s;}
.quest_warp > .list > li {margin-bottom: 1.2rem;}
.quest_warp > .list > li:last-child {margin-bottom: 0;}
.quest_warp > .list > li .con {width: 100%; display: table;}
.quest_warp > .list > li .con > div {display: table-cell; vertical-align: middle; min-height: 18rem; padding: 2.4rem 3rem; border-radius: 10px; position: relative;}

.quest_warp > .list > li .con > .box {width: 75%; background: #fff; padding-left: 14.4rem; padding-right: 3.6rem;}
.quest_warp > .list > li .con > .box.bg1 {background:url('/images/common/event/quest/anni15th/bg_lock.png') center 0 no-repeat; background-size:cover;}
.quest_warp > .list > li .con > .box.bg2 {background:url('/images/common/event/quest/anni15th/bg_complete.png') center center no-repeat; background-size:cover;}
.quest_warp .box .tit {letter-spacing: 0.01rem; text-transform:uppercase; font-size:20px; padding-top:1.5rem; color:#000; position:absolute; top:3rem; left:-1.2rem; width:156px; height:78px; background:url('/images/common/event/quest/anni15th/bg_questtitle.png') 0 0 no-repeat;}
.quest_warp .box .tit span {color: #63f;}
.quest_warp .mission {padding: 1.2rem 0;}
.quest_warp .mission .txt {font-size: 2rem; color: #000; line-height: 2.4rem; word-break: break-word; padding-left: 2.4rem; letter-spacing: -0.01rem; text-transform: uppercase;}
.quest_warp .mission .count {margin: 5px 0 15px; font-size:28px; color:#f00;}
.quest_warp .mission .count .bar {color:#aaa;}
.quest_warp .mission .count .my_count {color:#aaa;}

.quest_warp > .list > li .con > .reward {width: 25%; background:rgba(119, 68, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}
.quest_warp .reward .tit {margin-bottom: 1.2rem; font-size: 17px; color:#ff0; letter-spacing:0.02rem; text-transform:uppercase;}
.quest_warp .reward .img {max-width: 100%; height: 64px;}
.quest_warp .reward .img img {max-width: 100%; max-height: 64px;}
.quest_warp .reward .name {margin-top: 1.2rem; color: #fff; font-size: 14px; word-break:break-all; font-weight: 400; line-height: 1;}
.quest_warp .reward .lock {position:relative; margin-top: 3rem;}
.quest_warp .reward .lock:before, .quest_warp .reward .lock:after {left:50%; transform: translate(-50% , 0); content:''; display:block; position:absolute;}
.quest_warp .reward .lock:before {animation: light01 1s infinite; top: -24px; width:96px; height:96px; background:url('/images/common/event/quest/anni15th/light.png') 0 0 no-repeat;}
.quest_warp .reward .lock:after {animation: down 1s infinite; top: -24px; width: 14px; height:24px; background:url('/images/common/event/quest/anni15th/icon_ques.png') 0 0 no-repeat}
.quest_warp .reward .no_item {margin-top:0;}

.total_reward {animation:zoomIn 0.5s 0.2s; background:rgba(119, 68, 255, 0.5); position:relative; border-radius: 10px; width: 100%; padding-right: 25%; display: table; margin-top: 2.4rem; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}
.total_reward > div {display: table-cell; vertical-align: middle; min-height: 18rem; padding: 2.4rem 4.8rem; position: relative;}
.total_reward .tit {width: 33.4%; line-height: 2.4rem; color: #ff0; font-size: 1.7rem; text-transform: uppercase; font-weight: 800; letter-spacing: 0.08rem;}
.total_reward .tit:before {content:''; display: block; width: 2px; height: calc(100% - 7.2rem); background: #85f; position:absolute; top: 3.6rem; right: 0;}
.total_reward .item {width: 66.6%;}
.total_reward .item .img {max-width: 100%; margin: 0 auto 10px;}
.total_reward .item .img img {max-width: 100%; max-height: 90px;}
.total_reward .item .name {margin-bottom: 4px; font-size: 1.7rem; color:#fff; word-break:break-all; font-weight: 800;}

.btn_reward:hover {background: linear-gradient(#c03, #7c001f);}
.btn_reward:before {background:url('/images/common/event/quest/anni15th/icon_recive.png') 0 0 no-repeat;}
.btn_start {background:linear-gradient(#90e, #30c);}

.total_reward .btn {width: 240px; height: 60px; font-size:17px; padding-left: 3rem; position:absolute; top:50%; right: 3.6rem; transform:translate(0 , -50%);}
.total_reward .btn br {display: none;}
.total_reward .btn:before {position:absolute; top:50%; left: 2.4rem; transform:translate(0, -50%);}

.btn_reward.off, .btn_reward.end, .btn_reward.off:hover, .btn_reward.end:hover {cursor: default; background: #64c; color: #fff; opacity: 0.7;}

ul.progress {position: relative; animation:zoomIn 0.5s;}
ul.progress li {font-size:0; margin-bottom: 2px; height: 60px; background: rgba(255, 255, 255, 1); border-radius: 10px; position:relative; overflow: hidden; padding: 0 20% 0 25%;}
ul.progress li:last-child {margin-bottom: 0;}
ul.progress li > div {width: 25%; line-height: 60px; display: inline-block; vertical-align: middle; font-size:2rem; text-align:center;}
ul.progress li div.team_name {padding: 1px 2.4rem 0; background:#e6f; text-align:left; color:#000; position:absolute; top: 0; left: 0;}
ul.progress li div.bar {background: #e5e5e5; position: relative; width: calc(100% - 3.6rem); height: 20px; border-radius: 60rem; margin: 2rem 0 0 3.6rem;}
ul.progress li div.bar .bar_on {display: block; width: 50%; height: 20px; background:linear-gradient(to right, #e6f, #74f); border-radius: 60rem;}
ul.progress li div.team_count {width: 20%; font-size: 2.4rem; color:#74f; position:absolute; top: 0; right: 0; letter-spacing: -0.04rem; font-weight: 800;}
ul.progress li.my div.team_name:before {text-align: center; position:absolute; content:'MY'; display: block; width: 40px; height:20px; color:#fff; top:50%; transform:translate(0, -50%); right:24px; line-height:22px; font-size:14px; background: #c0a; border-radius: 60rem; font-weight: 700; padding-left: 3px;}

.btns_box button {margin: 0 4px; vertical-align: top;}

/* popup */
.dimmed01 {display:none; width: 100%; height: 100%; text-indent: -99999px; background: rgba(0, 0, 0, 0.8); position: fixed; left: 0; top: 0; z-index: 8;}
.dimmed {width: 100%; height: 100%; text-indent: -99999px; background: rgba(0, 0, 0, 0.8); position: fixed; left: 0; top: 0; z-index: 90;}
.dim_block {width: 100%; height: 100%; text-indent: -99999px; background: none; position: fixed; left: 0; top: 0; z-index: 90;}

.popup {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99; display: none;}
.popup .pop_title {text-align:center; position:relative;}
.popup .pop_title h2 {font-size: 24px; color: #fff; text-transform:uppercase; margin-bottom: 2.4rem; letter-spacing: 0.02rem;}
.popup .pop_title > button {width:24px; height: 24px; font-size: 0; text-indent: -99999px; background: url(/images/common/event/quest/anni15th/pop_close.png) 50% 0 no-repeat; position: absolute; top:50%; transform:translate(0, -50%); right:2rem; transition:none;}
.popup .pop_title > button:hover {background-position: 50% -24px;}
.popup .pop_layout {left:50%; top:50%; padding: 3.6rem; box-shadow:0 20px 80px rgba(0, 0, 0, 0.4); position: absolute; background: rgba(102, 51, 255, 0.6); border: 1px #7df solid; transform:translate(-50% , -50%); z-index: 99; border-radius: 3rem; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 1), inset 0 0 30px rgba(0, 170, 255, 0.5), 0 0 20px rgba(85, 85, 255, 0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}

.pop_history .pop_layout {width:740px; max-height: 600px; height: calc(100% - 7.2rem);} 
.pop_history .pop_layout .tit {margin:45px 0 25px; color:#000000; font-size:2rem; text-transform:uppercase;}
.pop_history .pop_layout .pop_cont {height: calc(100% - 4.5rem);}
.pop_history .list {letter-spacing:0; padding-right: 10px; overflow-y: auto; height: 100%;}
.pop_history .list li {width: 100%; height: 56px; line-height:18px; font-size: 0; letter-spacing: -4px; display: table;}
.pop_history .list li > p {padding:0 2rem; letter-spacing: -0.2px; display: table-cell; vertical-align: middle; text-align: left; font-size: 14px; padding-top: 2px;}
.pop_history .list li > p.date {width: 20%; color:#c03;}
.pop_history .list li > p.date span {color:#666; display:block; font-weight: 400;}
.pop_history .list li > p.quest {width: 50%; padding: 0;}
.pop_history .list li > p.reward {width: 30%;}
.pop_history .list li > p.reward .day {color: #63f;}
.pop_history .list li.top {overflow:hidden; text-transform:uppercase; height:34px; background: #ddf; border-radius: 12px 12px 0 0;}
.pop_history .list li.top p {color:#63f; font-size:14px; letter-spacing:0.04rem; text-align: center;}
.pop_history .list li.bottom {font-family: 'Roboto'; font-size: 1.4rem; color: #000; background: #fff; border-bottom: 1px solid #52a; font-weight: 500;}
.pop_history .list li.bottom > p.date {text-align: center;}
.pop_history .list li:last-child {border-radius: 0 0 12px 12px;}
.pop_history .list li.none {height: 480px; font-size: 14px; color:#63f; line-height: 480px; letter-spacing: 0; border:none; text-transform:uppercase; letter-spacing: 0.04rem; background: #ddf; border-radius: 12px;}

.pop_reward .pop_layout {width: 480px; height:400px;}
.pop_reward .pop_layout .pop_cont {font-size:24px; color:#fff;}
.pop_reward .pop_layout .pop_cont .item {margin-top:3rem; background: #fff; padding: 30px 0; border-radius: 2rem 2rem 0 0; box-shadow: 0 0 30px rgba(85, 85, 255, 0.5);}
.pop_reward .pop_layout .pop_cont .item img {max-width:100%; max-height:102px;}
.pop_reward .name {height: 48px; line-height: 48px; font-size:14px; color: #000; background: #ddf; border-radius: 0 0 2rem 2rem; letter-spacing: -0.01rem;}
.pop_reward .name .day {color: #a00;}

.pop_payment .pop_layout, .pop_pay_result .pop_layout  {width:640px; height:400px;}
.pop_payment .pop_layout ul.pop_cont {padding: 3rem 0; background:#fff; font-size:0; border-radius: 2rem; border: 1px solid #7df; box-shadow: 0 0 30px rgba(85, 85, 255, 0.5);}
.pop_payment .pop_layout ul.pop_cont li {position:relative; width:33%; display:inline-block; margin:45px 0; font-size:25px; color:#666; letter-spacing: -0.02rem;}
.pop_payment .pop_layout ul.pop_cont li.minus {color:#666;}
.pop_payment .pop_layout ul.pop_cont li.minus:before {z-index:1; content:''; display:block; position:absolute; top:8px; left:-10px; background: url(/images/common/event/quest/anni15th/icon_minus.png) 0 0 no-repeat; width:20px; height:16px;}
.pop_payment .pop_layout ul.pop_cont li.total {color:#f00;}
.pop_payment .pop_layout ul.pop_cont li.total:before {z-index:1; content:''; display:block; position:absolute; top:8px; left:-10px; background: url(/images/common/event/quest/anni15th/icon_total.png) 0 0 no-repeat; width:20px; height:16px;}
.pop_payment .pop_layout ul.pop_cont li img, .pop_pay_result .pop_cont img {margin-right:10px; vertical-align:middle; position:relative; top:-1px;}

.pop_layout .btns {position:relative; text-align:center; margin:0 auto; font-size:0;}
.pop_layout button.btn_ok, .pop_layout button.btn_cancel {letter-spacing: 0.04rem; margin: 24px 0.4rem 0; font-size:20px; border-radius:30px; color:#fff; transition:none; display:inline-block; width: 144px; height:48px; background-repeat:no-repeat; background-position:0 0;}
.pop_layout button.btn_ok {background: linear-gradient(#c0a, #c03);}
.pop_layout button.btn_ok:hover {background: linear-gradient(#f00, #c0f); color: #ff0;}
.pop_layout button.btn_cancel {background:linear-gradient(#77f, #55e);}
.pop_layout button.btn_cancel:hover {background:linear-gradient(#57f, #77f); color: #ff0;}

.pop_pay_result .pop_cont {padding: 7.6rem 0; background:#fff; color:#000; font-size:28px; border-radius: 2rem; border: 1px solid #7df; box-shadow: 0 0 30px rgba(85, 85, 255, 0.5);}
.pop_pay_result .result {font-size:17px; padding: 12px 0; color:#ff0; margin-top:3rem; text-transform:uppercase; background: rgba(102, 51, 255, 0.6); border-radius: 10px; letter-spacing: 0.06rem;}
.pop_payment .pop_layout .subject, .pop_pay_result .pop_cont .subject {text-transform:uppercase; font-size:14px; padding-bottom:8px; color:#63f; letter-spacing: -0.02rem;}

/* popup (login) */
#layer_basic_popup {width: 600px; margin: -210px 0 0 -300px; position: fixed; top: 50%; left: 50%; z-index: 98;}
#layer_basic_popup > iframe {width: 100%; border: none; display: block; position: relative; z-index: 99;}
#layer_popup {position:fixed; top:0; left:0; right:0; bottom:0; z-index:99;}
#layer_popup iframe {width:600px;  left:50%; top:100px; margin-left:-300px; position:absolute; z-index:999;} 

/*------------------------------ responsive --------------------------*/

@media screen and (max-width: 2400px) {
	body {background-size: 2400px auto;}
}

@media screen and (max-width: 1600px) {
	header .header_wrap > a {margin-bottom: 1.2rem;}
	header .my_area {position: static; transform: none; text-align: center;}
	header .my_area > div {line-height: 24px;}
	
	.cha {display:none;}
}

@media screen and (max-width: 1140px) {
	header .btn_login {top:0; right:0;}	
	header .btn_history {top:0; left:0;}
	header .btn_login {height: 100%;}
	header .btn_login > button, header .btn_history {width: 100px; height: 100%; line-height: 100%; border-radius:0;}
	
	.section01 .title {padding-top: 236px;}
	.section01 .title h2 {width: 296px;}
	.section01 .title .tit > img {width: 296px; height:266px;}
	.section01 {width: 720px;}
	.section01 .title .sub_tit {height: 72px; background-size: auto 72px; box-shadow: none; border-radius: 0;}
	.section01 .date {margin: 1.6rem auto 0; width: 400px; font-size: 1.8rem;}
	.section01 .my_area > div {display: block; margin: 1rem auto;}
	
	.quest_warp .reward {padding:2rem;}
	.quest_warp .reward .tit {top:3rem; left:2rem; width:auto;}
	.quest_warp .reward:before {display:none;}
	.quest_warp > .list {margin-left:0;}
	.quest_warp > .list > li {display:block; width:100%; padding-left:0; margin-bottom:15px;}

	.popup .pop_layout {width: 80%;}
}

@media screen and (max-width: 960px) {
	.section01 {max-width: 600px; width: 100%;}
	
	.total_reward .tit {width: 30%;}
	.total_reward .item {width: 70%; padding-left: 0;}
	.total_reward .btn {right: 2.4rem;}
	
	.popup .pop_layout {width: calc(100% - 4rem);}
}

@media screen and (max-width: 860px) {
	html {font-size:32%;}
	body {background-size: 1800px auto;}
	
	header .header_wrap {padding: 2.2rem 0 0;}
	header .header_wrap img {width: 144px;}
	header .header_wrap > a {margin-bottom: 2.2rem;}
	header .btn_login > button, header .btn_history {width: 58px; height: calc(100% - 24px); font-size: 2.15rem; letter-spacing: 0;}
	
	footer > img {width: 99px;}
	footer p {font-size: 2.1rem;}
	
	header .my_area {background: #42a;}
	header .my_area > div {font-size: 2.4rem;}
	header .my_area .cash:before {height: 12px; width: 1px;}
	header .my_area .name:before {width: 10px; height: 14px; background-size: 10px auto;}
	
	.section01 {padding-top: 22rem;}
	.section01 .title {padding-top: 160px;}
	.section01 .title h2 {width: 200px;}
	.section01 .title .tit > img {width: 200px; height:180px;}
	.section01 .title .sub_tit {height: 38px; background-size: auto 38px;}
	.section01 .date {font-size: 2.4rem; width: 260px;}

	.quest .top {text-align: center; height: auto; line-height: 16px;}
	.quest .top > .tit {font-size: 4.1rem; margin-bottom: 1.8rem;}
	.quest .top .time {width: 100%; font-size: 2.9rem; position: relative;}
	.quest .top .time #leftTime:before {width: 16px; height: 16px; background-size: 16px auto; margin-right: 6px;}
	.quest .top .time #leftTime {width: 35%; margin-right: 0; text-align: left;}
	.quest .top .time span.progress {width: 60%; height: 16px; padding: 2px; text-align: right;}
	.quest .top .time #dayCount {width: 35%; margin-right: 0; text-align: left;}
	.quest .top .time span.progress {width: 60%; height: 16px; padding: 2px; text-align: right;}
	.quest .top .time span.progress span.bar {height: 8px;}

	.quest_warp > .list > li .con {display: block;}
	.quest_warp > .list > li .con > div {display: block; min-height: 18rem; padding: 3.6rem;}
	.quest_warp > .list > li .con .btn {margin: 20px 0;}
	
	.quest_warp > .list > li .con > .box {width: 100%; padding: 6rem 3rem;}
	.quest_warp .box > .tit {width: 80px; height: 40px; background-size: 80px auto; font-size: 2.2rem; padding-top: 1.3rem; letter-spacing: 0; top: 2rem;}
	.quest_warp .mission .txt {font-size: 2.55rem; padding: 2rem 1rem 0; line-height: 2.8rem;}
	.quest_warp .mission .count {font-size: 3.8rem;}
	
	.quest_warp > .list > li .con > .reward {width: 100%;}
	.quest_warp .reward .tit {font-size: 2.5rem;}
	.quest_warp .reward .name {font-size: 2.4rem;}

	.quest_warp .box > img {height: 46px;}
	.quest_warp .reward .no_item > img, .quest_warp .reward .lock > img {width:40px;}
	.quest_warp .reward .lock:before {width:60px; height:60px; top:-20px; background-size:60px auto;}
	.quest_warp .reward .lock:after {width: 10px; height: 18px; background-size: 10px auto; top:-12px;}

	.total_reward {padding-right: 25%; display: block; margin-top: 2.4rem; padding: 3rem 0 4.8rem;}
	.total_reward > div {display: block; min-height: auto;}
	.total_reward .tit {width: 100%; font-size: 2.5rem; padding-bottom: 1.2rem;}
	.total_reward .tit:before {display: none;}
	.total_reward .item {width: 100%; padding: 0.6rem 0;}
	.total_reward .item .img {margin-bottom: 6px;}
	.total_reward .item .img img {max-height: 60px;}
	.total_reward .item .name {font-size: 2.4rem; margin-bottom: 12px;}
	
	.total_reward .btn {width: 192px; height: 44px; font-size: 2.75rem; padding-left: 3rem; position:relative; top:0; right: auto; transform:none;}
	.total_reward .btn:before {left: 4rem;}
	
	.btn {width: 200px; height: 46px; font-size: 2.75rem;}
	.btn:before, .btn_reward.off:before, .btn_reward.end:before {width: 14px; height: 14px; background-size:14px auto; top: auto; transform: none;}
	
	.quick_clear {padding-top: 0; line-height: 12px;}
	.quick_clear .cash {font-size:2.2rem;}
	
	ul.progress li {height: auto; padding: 0;}
	ul.progress li > div {font-size: 2.7rem; width: 100%; line-height: 1; display: block;}
	ul.progress li div.team_name {text-align: center; position:relative; padding: 2rem 2.4rem;}
	ul.progress li div.bar {width: calc(100% - 4.8rem); height: 12px; margin: 2.4rem 2.4rem 1.6rem;}
	ul.progress li div.bar .bar_on {height: 12px;}
	ul.progress li div.team_count {width: 100%; position:relative; padding-bottom: 2.2rem; font-size:2.5rem;}
	ul.progress li.my div.team_name:before {font-size: 2.2rem; height: 16px; line-height: 18px; width: 30px; padding-left: 0; right: 12px;} 
	
	.btns_box button {width: 120px; font-size: 2.4rem;}
	
	.popup .pop_title h2 {height:32px; line-height:36px; font-size:3.25rem;}
	.popup .pop_title > button { background-size:20px auto !important; width:20px; height:20px;}
	.pop_history .list {padding-right: 0;}
	.pop_history .list li {height:35px;}
	.pop_history .list li.top {height:30px;}
	.pop_history .list li > p {font-size:2.5rem;}
	.pop_history .list li.top p {font-size:2.4rem;}
	.pop_history .list li.none {font-size:2.5rem; height: 100%;}
	.popup.pop_history .pop_cont {height: calc(100% - 9rem);}
	.pop_reward .pop_layout {height:auto;}
	.pop_reward .pop_layout .pop_cont {font-size:3.3rem;}
	.pop_reward .name {font-size:2.5rem;}
	.pop_layout button.btn_ok, .pop_layout button.btn_cancel {font-size:2.7rem; width:94px; height:30px; line-height:30px; margin-left: 4px; margin-right: 4px;}
	.pop_layout button.btn_ok:hover, .pop_layout button.btn_cancel:hover {background-position:0 0;}
	.pop_payment .pop_layout .subject, .pop_pay_result .pop_cont .subject {font-size:2.8rem;}
	.pop_payment .pop_layout ul.pop_cont li, .pop_pay_result .pop_cont {font-size:3.9rem;}
	.pop_payment .pop_layout ul.pop_cont li.minus:before {width:12px; height:3px; background-size:12px auto;}
	.pop_payment .pop_layout ul.pop_cont li.total:before {width:12px; height:9px; background-size:12px auto;}
	.pop_payment .pop_layout ul.pop_cont li img, .pop_pay_result .pop_cont img {width:14px; margin-right:6px;}
	.pop_pay_result .result {font-size:3.3rem;}
	.pop_payment .pop_layout, .pop_pay_result .pop_layout {height: auto; padding: 3.6rem 3.6rem 4.8rem;}
}

@keyframes light {
	0% {transform: scale(0.7);} 
	50% {transform: scale(1);}
	100% {transform: scale(0.7);}
}

@keyframes light01 {
	0% {opacity: 0;} 
	50% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes down {
	0% {transform: translate(-50% , 0px);}
	50% {transform: translate(-50% , 5px);}
	100% {transform: translate(-50% , 0);}
}