@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Sans&family=Oswald&family=Quantico:wght@400;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:#000; color:#fff;  line-height: 1; text-align: center; font-weight: 400; font-family: 'Quantico', sans-serif; letter-spacing: 0.02rem;}
h1, h2, h3, h4, h5, h6 {  font-weight: 400; font-family: 'Quantico', 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: 600;}
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: 400; font-family: 'Quantico', sans-serif; text-transform: uppercase;}
button:hover {transition: all 0.4s ease; cursor: pointer;}
button:focus {outline: none;}

.container { position:relative; width:100%; background:url('/images/common/event/quest/quest_dark/bg_quest.jpg') center 0 repeat-y; 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: 400; font-family: 'Quantico', sans-serif; text-transform: uppercase; cursor: pointer; outline: none;}
button:hover { transition: all 0.4s ease; cursor: pointer;}
button:focus { outline: none;}
header { position: relative; }
header .header_wrap {position:relative; padding:4.8rem 2rem 0;}
header .header_wrap .btn_history {display:none;}
header .btn_login { width: 200px; height:64px; position:absolute; top:40px; right:70px; }
header .btn_login > button {transition:none; overflow: visible; position:relative; display:block; width: 100%; height:100%; background:url('/images/common/event/quest/quest_dark/btn_login.png') 0 0 no-repeat; font-size: 16px;  color: #fff; line-height: 64px; text-align: center; letter-spacing:0.05rem;}
header .btn_login > button:hover {background-position:0 -64px;transition:none;  }

footer { width:100%;  padding:6rem 0; letter-spacing: 0.01rem;  background:none; font-family: 'Montserrat', sans-serif;}
footer p {color:#fff; font-size:12px; line-height:1.6; }
footer .cs {margin-top:2rem;}
footer .cs > a {color: #ffe84f;}
footer .cs > a:hover {text-decoration:underline;}

.section01 {padding-top:1.4rem;  position:relative; z-index:2;}
.section01 .title .tit {animation:bounceIn 0.8s;}
.section01 .title .sub_tit {color:#fff; line-height:1.1; margin-top:2.5rem; font-size:26px;}
.section01 .date { margin:1.5rem 0 6rem; color:#00ffff; font-size:18px; text-transform:uppercase;}
.section01 .my_area {font-size:0; overflow:hidden; background:rgba(0, 255, 255, 0.2); border:1px solid #00ffff; padding:3rem 20rem 3rem 2rem; position:relative;}
.section01 .my_area > div {display:inline-block; vertical-align:middle; font-size:20px;}
.section01 .my_area .name {float:left; position:relative; padding-left:3.6rem;}
.section01 .my_area .name:before {left:0; top:50%; transform:translate(0 , -50%); content:''; display:block; position:absolute; width:24px; height:28px; background:url('/images/common/event/quest/quest_dark/icon_user.png') 0 0 no-repeat; background-size:24px auto;}
.section01 .my_area .cash {float:right; text-transform:uppercase;}
.section01 .my_area .btn_history {position:absolute; top:50%; right:1rem; transform:translate(0 , -50%); margin:0;}

.quest .top {font-size:0; position:relative; }
.quest .top > .tit { letter-spacing:0.3rem; color:#fff; font-size:28px; text-transform:uppercase; margin-bottom:1.5rem; }
.quest .top .time { padding:1.5rem 3rem; background:rgba(255, 255, 255, 0.2); position:relative; border:1px solid #fff; border-bottom:1px solid rgba(255, 255, 255, 0.5); color:#f5ffb9; text-align:center; font-size:20px; letter-spacing:0; text-transform: uppercase; }
.quest .top .time span.progress {margin:0 2.5rem; vertical-align:middle; width:372px;   display:inline-block; border:1px solid #4a8bf9; padding:2px; }
.quest .top .time span.progress span.bar {  width:100%; height:14px; display:block; background:linear-gradient(to top, rgba(61,114,217), rgba(255,255,255));}
.quest .top .time span {display:inline; letter-spacing:0.1rem;}
.quest .top .time #leftTime {color:#e4ff00;} 

.btn {font-size:16px; transition:none; background-color: rgba(255, 255, 255, 0); background-position:center 0; text-transform:uppercase; background-repeat:no-repeat; display:block; width:180px; height:100px; color:#000; line-height:1; text-transform:uppercase; text-align:center; font-weight:700; padding-left:3rem;}
.btn_reward {background-image:url('/images/common/event/quest/quest_dark/btn_click_reward.png');}
.btn_start {background-image:url('/images/common/event/quest/quest_dark/btn_start_reward.png');}
.btn:hover {transition:none; background-position:center -100px;}
.quick_clear {text-shadow: 0 0 3px rgb(255, 255, 255, 0.5); letter-spacing:-0.02rem; transition:none; color:#111; font-size:14px; font-weight:700; width:210px; line-height:69px; height:69px; text-align:center; margin-top:-0.5rem; background-color:rgba(255, 255, 255, 0); background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/quest/quest_dark/btn_clear.png');}
.quick_clear .cash {color:#fff; font-weight:400;}
.quick_clear:hover {transition:none; background-position:0 -69px; }
.btn_history {height:76px; background-image:url('/images/common/event/quest/quest_dark/btn_history.png'); padding:0; text-align:center;}
.btn_history:hover {background-position:center -76px;}
.btn_modify {text-shadow: 0 0 3px rgb(255, 255, 255, 0.5); letter-spacing:-0.02rem; transition:none; color:#111; font-size:14px; font-weight:700; width:210px; line-height:69px; height:69px; text-align:center; margin-top:-0.5rem; background-color:rgba(255, 255, 255, 0); background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/quest/quest_dark/btn_clear.png');}
.btn_modify:hover {transition:none; background-position:0 -69px; }

.section02, .section03 {margin-top:4rem; animation:fadeInUp 0.3s;}
.quest_warp {border:1px solid #fff; border-top:0; position:relative; padding:5.4rem 0 7rem;}
.quest_warp:before, .quest_warp:after {content:''; display:block; position:absolute; left:-18px; right:-18px; height:68px; z-index:-1;}
.quest_warp:before {background:url('/images/common/event/quest/quest_dark/box_top.png') 0 0 no-repeat; top:-70px;}
.quest_warp:after {background:url('/images/common/event/quest/quest_dark/box_bottom.png') 0 0 no-repeat; bottom:-17px ;}

.quest_warp > .list {font-size:0;  margin-bottom:6rem;}
.quest_warp > .list > li {display:inline-block; vertical-align:top; width:309px; margin:0 2.2rem; animation:fadeInUp 0.3s;}
.quest_warp > .list > li:nth-child(2) {animation-delay:0.2s;}
.quest_warp > .list > li:nth-child(3) {animation-delay:0.4s;}
.quest_warp .box {padding:0 14px; margin-bottom:2rem; height:227px; background:url('/images/common/event/quest/quest_dark/bg_box.png') 0 0 no-repeat; position:relative;}
.quest_warp .box .btn {position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); margin-top:12px;}
.quest_warp .box > .tit {letter-spacing:0; line-height:24px; text-transform:uppercase; font-size:16px; color:#000; font-weight:700; font-style: oblique; padding-left:96px;}

.quest_warp .reward {padding:0 14px; height:189px; background:url('/images/common/event/quest/quest_dark/bg_reward.png') 0 0 no-repeat; text-align:center;}
.quest_warp .reward .tit {height:24px; line-height:24px;  font-size:14px; color:#000; font-weight:700; letter-spacing:0; text-transform:uppercase; padding-left:96px;}
.quest_warp .reward .tit img {margin-right:6px; vertical-align:middle; position:relative; top:-2px;}
.quest_warp .reward .img {padding:1rem; height:97px;}
.quest_warp .reward .img img {max-width:100%; max-height:77px;}
.quest_warp .reward .name {color:#fff; font-size:15px; word-break:break-all; line-height:1.1; padding:0 1rem 0 2rem; overflow:hidden; height:33px;}
.quest_warp .mission .txt {height:71px; text-align:center; font-size:20px; color:#fff; line-height:1.2; word-break:break-all; padding:0 1.5rem; margin:2rem 0 1rem;  overflow:hidden;}
.quest_warp .mission .count {height:32px; line-height:32px; font-size:36px; color:#e4ff00; font-weight:700;}
.quest_warp .mission .count .bar {color:#fff;}
.quest_warp .mission .count .my_count {color:#fff;}

.quest_warp .box > img {position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); margin-top:12px;}
.quest_warp .reward .lock {position:relative; margin-top:4.4rem;}
.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:-25px; width:85px; height:80px; background:url('/images/common/event/quest/quest_dark/light.png') 0 0 no-repeat;}
.quest_warp .reward .lock:after {animation:down 1s infinite; top:-23px; width:15px; height:24px; background:url('/images/common/event/quest/quest_dark/icon_ques.png') 0 0 no-repeat}
.quest_warp .reward .no_item {margin-top:2.5rem;}

.total_reward {padding:0 8rem; text-align:center; position:relative;}
.total_reward .btn {margin-top: 13px; position:absolute;  top:50%; right:6rem; transform:translate(0 , -50%);}
.total_reward .tit {line-height:27px; margin:0 auto; color:#000; position:relative; font-size:16px; font-weight:700; text-transform:uppercase; display:block; width:277px; background:#fff;}
.total_reward .tit:before, .total_reward .tit:after {content:''; display:block; position:absolute; top:0; bottom:0; width:20px; height:27x;}
.total_reward .tit:before {background:url('/images/common/event/quest/quest_dark/bg_reward_tit_l.png') 0 0 no-repeat; left:-20px;}
.total_reward .tit:after {background:url('/images/common/event/quest/quest_dark/bg_reward_tit_r.png') 0 0 no-repeat; right:-20px;}
.total_reward .tit img {margin-right:6px;}
.total_reward .item {margin:4rem auto 0; max-width:400px; }
.total_reward .item .img {height:117px; margin:0 auto 1rem;}
.total_reward .item .img img {max-width:100%; max-height:117px;}
.total_reward .item .name {font-size:14px; word-break:break-all;}
.total_reward .btn_reward {padding:0; padding-top:16px; width:240px; height:122px; background-image:url('/images/common/event/quest/quest_dark/btn_receive_reward.png');}
.total_reward .btn_reward br {display:none;}
.total_reward .btn_reward:hover {background-position:center -122px;}
.btn_reward.off, .btn_reward.end {width:220px; height:102px; padding-top:21px;}
.btn_reward.off {background-image:url('/images/common/event/quest/quest_dark/btn_off.png'); cursor: default; color:#4a8bf9; font-weight:400; }
.btn_reward.end {background-image:url('/images/common/event/quest/quest_dark/btn_end.png'); cursor: default; color:#fff;}
.btn_reward.off:hover, .btn_reward.end:hover {background-position:0 0;}

.section03 .quest_warp {padding:4.2rem 4rem 7rem;}
ul.progress { position:relative; padding:4rem 3rem; margin-bottom:6rem;}
ul.progress:before, ul.progress:after {content:''; display:block; position:absolute; left:0; right:0; height:23px;}
ul.progress:before {background:url('/images/common/event/quest/quest_dark/box_progress_top.png') 0 0 no-repeat; top:0;}
ul.progress:after {background:url('/images/common/event/quest/quest_dark/box_progress_bottom.png') 0 0 no-repeat; bottom:0;}
ul.progress li { font-size:0; margin-bottom:2.4rem;}
ul.progress li:last-child {margin-bottom:0;}
ul.progress li > div {display:inline-block; vertical-align:middle; font-size:16px;}
ul.progress li div.team_name {width:200px;  word-break: break-all; text-align:left; color:#fff; line-height:1.2;}
ul.progress li div.bar {position:relative; width:calc(100% - 345px);  border-radius: 13px; border:1px solid #4a8bf9; padding:3px; height:20px;}
ul.progress li div.bar .bar_on {display:block; width: 100%; height:100%; padding:0; background:#fff; border-radius: 13px; }
ul.progress li div.team_count {font-family: 'Noto Sans'; width:144px;  text-align:center; padding-left:2.4rem; color:#2fdfff; font-weight:500; font-size:24px;  }
ul.progress li.my div.team_name {position:relative; color:#ffde00;}
ul.progress li.my div.team_name:before { text-align:center; position:absolute; content:'MY'; left:0; top:-25px; display:block; vertical-align:middle; width:45px;  line-height:22px;  font-size:14px; font-weight:700;  background:url('/images/common/event/quest/quest_dark/icon_my.png') 0 0 no-repeat; color:#edce01;}

.btns_box {font-size:0; margin-top:1rem;}
.btns_box button {display:inline-block; vertical-align:top; line-height:1; width:115px; height:39px; background-repeat:no-repeat; background-position:0 0; margin:0 1rem;}
.btns_box .quick_clear {background-image:url('/images/common/event/quest/quest_dark/btn_quick.png');}
.btns_box .btn_modify {background-image:url('/images/common/event/quest/quest_dark/btn_modify.png');}
.btns_box button:hover {background-position:0 -39px;}
.btns_box .quick_clear .cash {font-size:12px; display:block; margin-top: 2px;}


/* popup */
.dimmed01 {display:none; width: 100%; height: 100%; text-indent: -99999px; background: url(/images/common/event/quest/quest_dark/dim_bk50.png) repeat; position: fixed; left: 0; top: 0; z-index: 8;}
.dimmed {width: 100%; height: 100%; text-indent: -99999px; background: url(/images/common/event/quest/quest_dark/dim_bk50.png) repeat; 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;  height:70px; padding-left:1.8rem;  background: url(/images/common/event/quest/quest_dark/bg_popup_tit.jpg) 0 0 no-repeat;  border-bottom:1px #4a8bf9 solid; line-height:70px; text-align:left; color:#ffffff;text-transform:uppercase; }
.popup .pop_title > button {width:70px; top:0; right:0; bottom:0; font-size: 0; text-indent: -99999px; background:#4a8bf9 url(/images/common/event/quest/quest_dark/pop_close.png) center no-repeat; position: absolute; transition:none;}
.popup .pop_title > button:hover {background:#6da3ff url(/images/common/event/quest/quest_dark/pop_close.png) center no-repeat;}
.popup .pop_cont {padding:3rem 2rem 3rem 3rem; }
.popup .pop_layout {left:50%; top:50%; box-shadow:0 20px 80px rgba(0, 0, 0, 0.4); position: absolute;  background: #000; border:1px #4a8bf9 solid; transform:translate(-50% , -50%); z-index: 99;}

.pop_history .pop_layout {width:740px; height:720px; } 
.pop_history .pop_layout .tit {margin:45px 0 25px; text-align:left; color:#000000; font-size:2rem; text-transform:uppercase; }
.pop_history .list { letter-spacing:0; height: 600px; padding-right: 10px; overflow-y: auto ;}
.pop_history .list li { height:60px; line-height:60px; border-bottom:1px solid rgba(0, 255, 255, 0.5); font-size: 0; letter-spacing: -4px;  }
.pop_history .list li > p {padding:0 2rem; letter-spacing: -0.2px; display: inline-block;  vertical-align:middle; text-align:center; font-size:14px; overflow: hidden; text-overflow: ellipsis;-ms-text-overflow: ellipsis;  white-space: nowrap;  word-wrap: normal;}
.pop_history .list li > p.date { width: 20%; color:rgba(0, 255, 255, 0.7); }
.pop_history .list li > p.date span {display:block;}
.pop_history .list li.bottom {font-family: 'Noto Sans';}
.pop_history .list li.bottom > p.date {line-height:1.1;}
.pop_history .list li > p.quest {width: 50%; color:rgba(255, 255, 255, 0.7);}
.pop_history .list li > p.reward {width: 30%; color:rgba(244, 212, 1, 0.7);}
.pop_history .list li.top { overflow:hidden;  text-transform:uppercase; border:1px rgba(0, 255, 255, 0.5) solid; height:50px; line-height:50px;  color:#fffcac;}
.pop_history .list li.top p {font-size:20px; color:rgba(0, 255, 255, 0.7); letter-spacing:0.04rem;}
.pop_history .list li.top .quest {border-left:1px solid rgba(0, 255, 255, 0.5); border-right:1px solid rgba(0, 255, 255, 0.5)}
.pop_history .list li.none { height: 500px; font-size: 20px; color:rgba(0, 255, 255, 0.7);  line-height: 500px; letter-spacing: 0;  text-transform:uppercase; border:none;}

.pop_reward .pop_layout {width:400px; height:400px;}
.pop_reward .pop_layout .pop_cont { font-size:24px; font-weight:500; color:#fff;   }
.pop_reward .pop_layout .pop_cont .item {margin-top:3rem;}
.pop_reward .pop_layout .pop_cont .item img {max-width:100%; max-height:102px;}
.pop_reward .name {margin-top:1rem; line-height:1.4; font-size:16px;}
.pop_reward .name span {color:#c9a0ff;}

.pop_payment .pop_layout, .pop_pay_result .pop_layout  { width:640px; height:400px;}
.pop_payment .pop_layout ul.pop_cont {margin:20px 20px 10px; background:#001539; font-size:0;}
.pop_payment .pop_layout ul.pop_cont li { font-family: 'Oswald';  position:relative; width:33%; display:inline-block; margin:45px 0; font-size:24px; }
.pop_payment .pop_layout ul.pop_cont li.minus { color:#ff716a  }
.pop_payment .pop_layout ul.pop_cont li.minus:before { z-index:1; content:''; display:block; position:absolute; top:10px; left:-11px; background: url(/images/common/event/quest/quest_dark/icon_minus.png) 0 0 no-repeat; width:22px; height:19px; }
.pop_payment .pop_layout ul.pop_cont li.total { color:#bababa }
.pop_payment .pop_layout ul.pop_cont li.total:before { z-index:1; content:''; display:block; position:absolute; top:10px; left:-11px; background: url(/images/common/event/quest/quest_dark/icon_total.png) 0 0 no-repeat; width:22px; height:19px; }
.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 {background-color:rgba(255, 255, 255, 0); margin:0 1rem; font-size:16px; color:#000125; font-weight:700; transition:none; display:inline-block;  width: 160px; height:80px; background-repeat:no-repeat; background-position:0 0;}
.pop_layout button.btn_ok {background-image:url('/images/common/event/quest/quest_dark/btn_ok.png');}
.pop_layout button.btn_cancel {background-image:url('/images/common/event/quest/quest_dark/btn_cancel.png');}
.pop_layout button:hover {background-position:0 -80px; transition:none;   }

.pop_pay_result .pop_cont {font-family: 'Oswald'; background:#001539; font-size:24px;  margin:20px; padding:8rem 0; color:#ff716a }
.pop_pay_result .result {font-size:24px; font-weight:700;  color:#fff; margin-top:3rem; text-transform:uppercase; }
.pop_payment .pop_layout .subject, .pop_pay_result .pop_cont .subject {font-family: 'Quantico'; text-transform:uppercase; font-size:16px;  font-weight:400; padding-bottom:10px; color:#fff;  }


/* 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: 1160px) {
header .header_wrap .btn_history {display:block; top:0; left:0; position:absolute; margin:0; background:rgba(255, 255, 255, 0.2); border-radius:0; box-shadow:none;}	
.section02 .btn_history {display:none;}
header .btn_login {top:0; right:0;  background: url(/images/common/event/quest/quest_dark/btn_login_m.png) 0 0 no-repeat;}	
header .btn_login > button {    background: url(/images/common/event/quest/quest_dark/btn_login_m.png) 0 0 no-repeat;}
header .btn_login > button:hover {background-position:0 0;}	
header .header_wrap .btn_history, header .btn_login {width:100px; height:100px; line-height:100px;}

.section01 {padding-top:4rem;}
.section01 .title .sub_tit {margin-top:3.6rem;}
.section01 .title .tit > img {max-width:100%;}
.section01 .my_area > div {display:block;  margin:0.6rem auto; text-align:left; }
.section01 .my_area .name {float:none;}
.section01 .my_area .name:before {transform:none;}
.section01 .my_area .cash {float:none; color:#e4ff00; padding-left:3.6rem;}

.quest .top .time span.progress {margin:0; width:calc(100% - 266px);}
.quest .top .time span {display:inline-block; width:130px;}

.quest_warp:before, .quest_warp:after {display:none;}
.quest_warp > .list {padding:0 3rem;}
.quest_warp > .list > li {display:block; margin:0 auto; margin-bottom:4rem; }
.quest_warp > .list > li:last-child {margin-bottom:0;}
.quest .top > .tit {float:none; margin-bottom:2rem;}
.quest .top .time {float:none;}
.total_reward .btn {position:static; margin:3rem auto 0; transform:none;}

ul.progress {padding:0;}
ul.progress:before, ul.progress:after {display:none;}
ul.progress li {border-bottom:1px solid rgba(74, 139, 249, 0.5); padding-bottom:2rem; margin-bottom:2rem;}
ul.progress li > div {display:block; }
ul.progress li div.team_name {width:100%; text-align:center; padding:0;}
ul.progress li div.bar {width:100%; margin:2rem 0;}
ul.progress li div.team_count {width:100%; padding:0; font-size:3.3rem;}
ul.progress li.my div.team_name:before {position:static;  display:inline-block; margin-right:1rem;}


.popup .pop_title h2 {    background-size: cover;}
.popup .pop_layout {width:100%; top:0; transform: translate(-50% , 0);}


}


@media screen and (max-width: 640px) {
html {font-size:32%;}
header .header_wrap img {width:175px;}
header .header_wrap .btn_history, header .btn_login {width:58px; height:58px; font-size:2.5rem; line-height:58px; padding:0;}
header .btn_login > button {font-size:2.5rem; line-height:58px;}
footer > img {width:99px;}
footer p {font-size:2.1rem;;}

.section01 {padding-top:6rem;}
.section01 .title .sub_tit {font-size:3.5rem;}
.section01 .date {font-size:2.7rem; margin-bottom:7.2rem;}
.section01 .my_area .name, .section01 .my_area .cash {padding-left:4.6rem;}
.section01 .my_area .name:before {width:15px; height:17px; background-size:15px auto;}
.section01 .my_area > div {font-size:2.9rem;}
.section01 .my_area .btn_history {width:90px; height:40px; background-size:90px auto; padding:0;}

.quest .top > .tit {font-size:3.7rem;}
.quest .top .time {font-size:2.9rem; padding:3rem;}
.quest .top .time span {width:100px;}
.quest .top .time span.progress { width: calc(100% - 204px);}
.quest .top .time span.progress span.bar {height:8px;}
.quest_warp .box > .tit {font-size:2.5rem;}
.quest_warp .box {}
.quest_warp .reward {}
.quest_warp .reward .tit {font-size:2.3rem; height:auto; padding-top:0;}
.quest_warp .mission .txt {font-size:2.7rem; height:82px;}
.quest_warp .mission .count {height:auto; line-height:1; font-size:3.9rem; margin-top: 2rem;}
.quest_warp .reward .name {font-size:2.1rem;}
.quest_warp .reward .lock {margin-top:7.4rem;}
.quest_warp .reward .no_item {margin-top:3.5rem;}
.total_reward .tit {font-size:2.5rem;}
.total_reward {padding:3rem;}
.total_reward .item .name {font-size:2.3rem;}
.total_reward .tit img {width:12px; position:relative; top:-1px;}
.total_reward .item .img {height:80px;}
.total_reward .item .img img {max-height:79px;}
.total_reward .btn_reward {width:210px; height:110px; background-size:210px auto;}
.total_reward .btn_reward:hover {background-position:0 0;}
.btn_reward.off, .btn_reward.end {width:192px; height:98px; background-size:192px auto;}


ul.progress li > div {font-size:2.5rem;} 
ul.progress li div.bar {height:16px; border-width:2px;}

.btn {width:150px; height:85px; background-size:150px auto; font-size:2.5rem; padding-left:7rem;}
.btn:hover {background-position:0 0;}
.quick_clear {font-size:2.3rem;}



.popup .pop_title h2 {height:42px; line-height:42px; font-size:3.3rem; }
.popup .pop_title > button { background-size:20px auto !important; width:40px; }
.pop_history .list li {height:35px; line-height:35px;}
.pop_history .list li.top {height:30px; line-height:30px;}
.pop_history .list li > p {font-size:2.5rem;}
.pop_history .list li.top p {font-size:2.7rem;}
.pop_history .list li.none {font-size:2.5rem;}

.popup.pop_history .pop_layout {height:50%;}
.popup.pop_history .pop_cont {height:100%;}
.pop_history .list {height:80%;}
.pop_reward .pop_layout {height:270px;}
.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:70px; height:35px; line-height:35px; background-size:70px auto;}
.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.9rem;}
.pop_payment .pop_layout ul.pop_cont, .pop_pay_result .pop_cont {margin:2rem;}
.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:300px;}

.btns_box {margin-top:2rem;}
.btns_box button {width:89px; height:30px; background-size:89px auto; font-size:2.3rem;}
.btns_box button:hover {background-position:0 -30px;}
.btns_box .quick_clear .cash {font-size:2.1rem; margin-top:2px;}


}

@media screen and (max-width: 400px) {
.quest_warp > .list > li {width:256px;}
.quest_warp .box {height:188px; background-size:contain;}
.quest_warp .reward {height:157px; background-size:contain;}
.quest_warp .box > .tit, .quest_warp .reward .tit {line-height:20px; padding-left:80px;}
.quest_warp .reward .img {height:80px;}
.quest_warp .reward .img img {max-height:64px;}
.quest_warp .mission .txt {height:50px;}
.quest_warp .box > img {margin-top:10px; width:170px;}
.quest_warp .reward .lock {margin-top:6.4rem;}
.quest_warp .reward .no_item {margin-top:2.5rem;}
.total_reward .tit {width:220px;}
}

@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);}
}