@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Khand:wght@400;700&family=Montserrat&family=Noto+Sans&family=Oswald&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: 'Chakra Petch', sans-serif; letter-spacing: 0;}
h1, h2, h3, h4, h5, h6 {  font-weight: 400; font-family: 'Chakra Petch', 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: 'Chakra Petch', 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_gold/bg_quest.jpg') center 0 no-repeat; 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: 'Chakra Petch', 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:4rem 0 0;}
header .btn_login { width: 200px; height:70px; position:absolute; right:3rem; top:3rem;}
header .btn_login > button { overflow: visible; position:relative; display:block; background: linear-gradient(to bottom, rgba(255,255,255), rgba(216,180,118));}
header .btn_login > button:hover {background: linear-gradient(to bottom, rgba(255,255,255), rgba(255,223,167)); }
header .btn_history {left:3rem; position:absolute; top:3rem;}
header .btn_login > button, header .btn_history {border:1px solid #f3dca8; border-radius:35px; width: 200px; height:70px; font-size: 20px;  color: #3d2a0a; line-height: 70px; font-weight:700; text-align: center; }



footer { width:100%;  padding:10rem 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;}

.cha {position:absolute; top:100px;}
.cha01 {left:140px;}
.cha02 {right:160px;}

.section01 {padding-top:6.5rem; position:relative; z-index:2;}
.section01 .title .tit {animation:flash 0.5s;}
.section01 .title .sub_tit { color:#fff; font-weight:700; line-height:1.2; margin-top:4.6rem; font-size:30px;}
.section01 .date {font-weight:700; margin:1.8rem 0 0; color:#ffeebb; font-size:22px; text-transform:uppercase; }
.section01 .my_area {display:inline-block; background:rgba(0, 0, 0, 0.7); padding:2.7rem 10rem; font-size:0; margin:10rem auto 0;  border: 3px solid;  border-image: linear-gradient(to bottom, #ddbc7f, #fcfbfb, #f2dba9); border-image-slice: 1;}
.section01 .my_area > div {display:inline-block; vertical-align:top; margin:0 1.2rem;  font-size:20px;}
.section01 .my_area .name {position:relative;}
.section01 .my_area .name:before {content:''; display:block; position:absolute; width:1px; height:21px; background:#ecd098; top:50%; right:-1.2rem; transform:translate(0 , -50%);}


.section01 + .section03 {margin-top:-4rem; background:none;}

.quest .top {font-size:0;  margin-bottom:6.7rem; position:relative;}
.quest .top:before, .quest .top:after {content:''; display:block; position:absolute; bottom:-17px; width:81px; height:135px;}
.quest .top:before {background:url('/images/common/event/quest/quest_gold/bg_time_left.png') 0 0 no-repeat; left:0;}
.quest .top:after {background:url('/images/common/event/quest/quest_gold/bg_time_right.png') 0 0 no-repeat; right:0;}
.quest .top > .tit {font-weight:700; letter-spacing:0.5rem; color:#fff; font-size:40px; text-transform:uppercase; margin-bottom:1.5rem;}
.quest .top > .tit font {color:#ff0000;}
.quest .top .time {color:#ffff8d;  text-align:center; font-size:26px; letter-spacing:0; text-transform: uppercase;}
.quest .top .time span {vertical-align:middle; display:inline-block; font-weight:500; width:20%; }
.quest .top .time span.progress {margin:0 3rem; width:470px;  background:url('/images/common/event/quest/quest_gold/bg_progress_n.png') 0 0 repeat-x; }
.quest .top .time span.progress span.bar {  width:100%; height:30px; display:block; background:url('/images/common/event/quest/quest_gold/bg_timer_bar.png') 0 0 repeat; }


.btn {letter-spacing:0.04rem; font-size:18px; font-weight:700; display:block; width:300px; height:100px; border-radius:50px; color:#fff;  text-transform:uppercase; text-align:center; position:relative;}
.btn:before {content:''; display:inline-block; vertical-align:middle; position:relative;  width:38px; height:32px; margin-right:1rem;}
.btn br {display:none;}
.btn_reward {background:linear-gradient(rgba(174,255,250, 0.8), rgba(48,139,197, 0.8)); border:1px solid #99d0ff;}
.btn_reward:before {background:url('/images/common/event/quest/quest_gold/icon_recive.png') 0 0 no-repeat;}
.btn_start {background:linear-gradient(rgba(253,255,61, 0.8), rgba(255,60,0, 0.8)); border:1px solid #ffb007;}
.btn_start:before {background:url('/images/common/event/quest/quest_gold/icon_start.png') 0 0 no-repeat;}
.btn_reward:hover { background:linear-gradient(rgba(174,255,250), rgba(48,139,197));  }
.btn_start:hover { background:linear-gradient(rgba(253,255,61), rgba(255,60,0));}
.btn_modify {position:absolute; top:50%; right:2.6rem; transform:translate(0 , -50%); color:#000; font-size:16px; font-weight:700; width:200px;  height:60px; text-align:center; border-radius:30px;  background:linear-gradient(to bottom, rgba(255,251,191), rgba(219,180,0)); }
.btn_modify:hover {background:linear-gradient(rgba(255,253,213), rgba(255,227,96));}

.btn_reward.off, .btn_reward.end { cursor: default; background:rgba(70, 80, 91, 0.9); border:1px solid #99d0ff; color:#7397b3;}
.btn_reward.off:before, .btn_reward.end:before {background:url('/images/common/event/quest/quest_gold/icon_recive_gr.png') 0 0 no-repeat;}
.quick_clear {position:absolute; top:50%; right:2.6rem; transform:translate(0 , -50%); color:#000; font-size:16px; font-weight:700; width:200px;  height:60px; text-align:center; border-radius:30px;  background:linear-gradient(to bottom, rgba(255,251,191), rgba(219,180,0)); }
.quick_clear .cash {display:block; color:#a52828;}
.quick_clear:hover {background:linear-gradient(rgba(255,253,213), rgba(255,227,96));}
.btn_history {background: linear-gradient(to bottom, rgba(255,255,255), rgba(216,180,118));}
.btn_history:hover {background: linear-gradient(to bottom, rgba(255,255,255), rgba(255,223,167)); }
.btn_history:before {display:none;}

.section02, .section03 {padding:10rem 0; border-top:none;}
.section02 {padding-top:13rem; margin-top:-4rem;}
.quest_warp > .list {font-size:0;  animation:zoomIn 0.5s;}
.quest_warp > .list > li {margin-bottom:2rem;}
.quest_warp .box {height:180px; position:relative; padding:0 23rem; border: 1px solid rgba(255, 240, 207, 0.5); background:rgba(255, 240, 207, 0.2); margin-bottom:1.4rem;}
.quest_warp .box:before {content:''; display:block; position:absolute; bottom:-1.5rem; height:1.4rem; left:0; right:0; background:url('/images/common/event/quest/quest_gold/bar03.png') center 0 no-repeat;}
.quest_warp .box .btn {position:absolute; top:50%; left:50%; transform:translate(-50% , -50%);}
.quest_warp .box > .tit {padding-top:7.5rem; text-transform:uppercase; font-size:16px; font-weight:700; color:#0f0d0a; line-height:1; position:absolute; top:1rem; left:4rem; width:166px; height:161px; text-align:center; background:url('/images/common/event/quest/quest_gold/badge_quest.png') 0 0 no-repeat;}
.quest_warp .box > .tit span {display:block;}

.quest_warp .reward {border:1px solid rgba(255, 240, 207, 0.1); margin:0 10rem; padding:2rem 18rem; background:rgba(255, 240, 207, 0.1);  text-align:center; position:relative; }
.quest_warp .reward:before {content:''; display:block; width:1px; top:20px; bottom:20px; background:rgba(255, 240, 207, 0.1); left:18rem; position:absolute;}
.quest_warp .reward .tit { font-size:18px; color:#ff9b9b; font-weight:700; text-transform:uppercase;  position:absolute; top:50%; transform:translate(0, -50%); text-align:center; left:0; width:18rem;}
.quest_warp .reward .tit img {margin-right:6px;}
.quest_warp .reward .img {margin:0 auto 7px; max-width:100%; height:79px;}
.quest_warp .reward .img img {max-width:100%; max-height:79px;}
.quest_warp .reward .name {color:#d2ac76; font-size:14px; word-break:break-all; font-weight:700; margin-top:1rem;}
.quest_warp .mission {padding-top:2rem;}
.quest_warp .mission .txt {padding:0 7rem; height:78px; text-align:center; font-size:24px; color:#fff; font-weight:700; line-height:1.2; word-break:break-all;  overflow:hidden; margin-bottom:2rem;}
.quest_warp .mission .count {height:40px; line-height:40px; font-size:40px; color:#ff9b9b; 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%);}
.quest_warp .reward .lock {position:relative; margin-top:2rem;}
.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_gold/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_gold/icon_ques.png') 0 0 no-repeat}
.quest_warp .reward .no_item {margin-top:0;}

.total_reward { background:rgba(255, 240, 207, 0.1); animation:zoomIn 0.5s 0.2s; border:1px solid rgba(255, 240, 207, 0.1); position:relative; text-align:center; position:relative; padding-left:28rem; padding-right:26rem; padding-top:2rem; padding-bottom:2rem; margin-top:4.5rem;}
.total_reward:before {content:''; display:block; width:1px; top:20px; bottom:20px; background:rgba(255, 240, 207, 0.1); left:28rem; position:absolute;}
.total_reward .btn {position:absolute; top:50%; right:2rem; transform:translate(0 , -50%);}
.total_reward .tit {line-height:1.3; padding:0 6rem; color:#ff9b9b; word-break:keep-all; font-size:18px; font-weight:700; text-transform:uppercase; position:absolute; top:50%; transform:translate(0, -50%); text-align:center; left:0; width:28rem;}
.total_reward .item {margin:0 auto; max-width:396px; }
.total_reward .item .img {height:117px; max-width:100%; margin:0 auto 7px;}
.total_reward .item .img img {max-width:100%; max-height:117px;}
.total_reward .item .name {font-size:14px; color:#d2ac76; word-break:break-all; line-height:1.2;}
.total_reward .btn {width:240px; height:100px; font-size:18px;  line-height:1.2; font-weight:500;  padding-left:4.5rem;}
.total_reward .btn br {display:none;}
.total_reward .btn:before {margin-right:0; position:absolute; top:50%; left:3rem; transform:translate(0, -50%); width:27px; height:24px; background-size:27px auto;}


.section03 {border-bottom :1px solid  rgb(255, 240, 207, 0.3); background: #2b2721;}
ul.progress { position:relative; animation:zoomIn 0.5s;}
ul.progress li {font-size:0;  position:relative; margin-bottom:2rem; padding: 4rem 0 2rem; border-bottom: 1px solid rgba(255, 240, 207, 0.3); }
ul.progress li:last-child {margin-bottom:0; padding-bottom:0; border-bottom:0;}
ul.progress li > div { display:inline-block; vertical-align:middle; font-size:18px; font-weight:700;}
ul.progress li div.team_name { position:absolute; top:0; left:0; word-break: break-all; text-align:left; color:#ffffff; line-height:1.2;}
ul.progress li div.bar {background: #023100; position:relative; width:100%;  border-radius: 13px; border:1px solid #ffe6c5; padding:3px;}
ul.progress li div.bar .bar_on {display:block; width: 100%; height:14px; padding:0; background:linear-gradient(to bottom, rgba(245,223,174), rgba(159,117,56));  border-radius: 13px; }
ul.progress li div.team_count {position:absolute; top:0; right:0;  color:#ff813d;  text-align:right; }
ul.progress li.my div.team_name {padding-left:5rem; color:#ff813d;}
ul.progress li.my div.team_name:before { text-align:center; position:absolute; content:'MY'; display:block; vertical-align:middle; width:40px; color:#ff813d; font-weight:700;  left:0; line-height:25px;  font-size:16px;  background: #fff; text-align:center; ; border-radius:3px;}

.btns_box { position: absolute;   top: 50%;  right: 2.6rem;  transform: translate(0 , -50%);}
.btns_box button {position:static; transform:none; margin:16px 0; display:block;}

/* popup */
.dimmed01 {display:none; width: 100%; height: 100%; text-indent: -99999px; background: url(/images/common/event/quest/quest_gold/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_gold/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; font-family:  'Chakra Petch', sans-serif; letter-spacing:0.04rem;  height:70px; font-weight:700; padding-left:3rem;  background: #15d7be url(/images/common/event/quest/quest_gold/bg_popup_tit.jpg) right 0 no-repeat;  border-bottom:1px solid rgb(255, 231, 200, 0.6); line-height:70px; text-align:left; color:#ffffff;text-transform:uppercase; }
.popup .pop_title > button {width:34px; height: 34px; font-size: 0; text-indent: -99999px; background:url(/images/common/event/quest/quest_gold/pop_close.png) center no-repeat; position: absolute; top:50%; transform:translate(0, -50%); right:2rem;  transition:none;}
.popup .pop_title > button:hover {background:url(/images/common/event/quest/quest_gold/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 solid rgb(255, 231, 200, 0.6); 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 rgb(255, 231, 200, 0.6); 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:#fffcac;}
.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:#ffffff;}
.pop_history .list li > p.reward {width: 30%; color:#ffe850;}
.pop_history .list li.top { overflow:hidden;  text-transform:uppercase; border:1px solid rgb(255, 231, 200, 0.6); height:50px; line-height:50px;  color:#ffe6c5 ;}
.pop_history .list li.top p {font-size:16px; color:#ffe6c5 ; letter-spacing:0.04rem;}
.pop_history .list li.top .quest {border-left:1px solid rgb(255, 231, 200, 0.6); border-right:1px solid rgb(255, 231, 200, 0.6) ;}
.pop_history .list li.none { height: 500px; font-size: 14px; color:#ffe6c5 ; 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; font-family:  'Chakra Petch', sans-serif;}

.pop_payment .pop_layout, .pop_pay_result .pop_layout  { width:640px; height:400px;}
.pop_payment .pop_layout ul.pop_cont {margin:20px; background:#37332c; font-size:0; font-family:  'Chakra Petch', sans-serif;}
.pop_payment .pop_layout ul.pop_cont li { position:relative; width:33%; display:inline-block; margin:45px 0; font-size:28px; font-weight:700;  }
.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_gold/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_gold/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 {letter-spacing: 0.04rem; margin:0 1rem; font-size:16px; font-weight:700; border-radius:30px; color:#000000; transition:none; display:inline-block;  width: 140px; height:60px; background-repeat:no-repeat; background-position:0 0;}
.pop_layout button.btn_ok {background:linear-gradient(rgba(255, 251, 191), rgba(219,180,0));}
.pop_layout button.btn_cancel {background:linear-gradient(rgba(193,193,193), rgba(144,144,144));}
.pop_layout button.btn_ok:hover {background:linear-gradient(rgba(255,253,213), rgba(255,227,96));   }
.pop_layout button.btn_cancel:hover {background:linear-gradient(rgba(229,229,229), rgba(185,185,185));   }



.pop_pay_result .pop_cont { background:#37332c; font-size:28px;  font-weight:700; 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; text-transform:uppercase; }
.pop_payment .pop_layout .subject, .pop_pay_result .pop_cont .subject {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: 1920px) {
.cha01 {left:0;}
.cha02 {right:0;}
}	

@media screen and (max-width: 1600px) {
.cha01 {left:-5%;}
.cha02 {right:-5%;}	
}	

@media screen and (max-width: 1160px) {
header .header_wrap > a {margin-bottom:1.5rem;}	
header .btn_login {top:0; right:0;}	
header .btn_history {top:0; left:0;}
header .btn_login > button, header .btn_history, header .btn_login {width:100px; height:100px; line-height:100px; border-radius:0; background:rgba(241, 208, 135, 0.3); border:none; color:#fff;}
header .btn_login > button:hover, header .btn_history:hover, header .btn_login:hover {background:rgba(241, 208, 135, 0.3); }

.cha {display:none;}

.section01 {padding-top:7.2rem;}
.section01 .title .tit > img {max-width:100%;}
.section01 .my_area {display:block; padding:0; border:none; background:none; margin:6rem 0;}
.section02 {margin-top:0; padding-top:10rem;}

.quest_warp .box:before {display:none;}
.quest_warp .reward {padding:2rem; margin:0;}
.quest_warp .reward .tit {position:static; width:100%; transform:none; margin-bottom:2rem;}
.quest_warp .reward .item {padding:0 9rem;}
.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;}
.quest_warp .mission {padding:0;}
.quest_warp .mission .txt {height:78px; padding:0; margin:4rem 0 2rem;}
.quick_clear {position:static; margin:2rem auto 0; transform:none; }
.quest_warp .con {padding-top:10rem;}
.quest_warp .box > .tit {top:-12rem; left:50%; transform:translate(-50% , 0);}
.quest_warp .box {height:300px; padding:0 3rem; }
.quest_warp .reward .lock {margin-top:3rem;}

.quest .top {margin-bottom:5rem;}
.quest .top:before, .quest .top:after {display:none;}
.quest .top > .tit {float:none; margin-bottom:2rem;}
.quest .top .time #leftTime {width:auto; margin:2rem 0 0; text-align:center;}
.quest .top .time span {display:block;}
.quest .top .time span.progress {width:auto; margin:0 6rem;}
.quest .top .time span.tit {display:none;}

.quest .top .time {float:none;}
.total_reward {padding:2rem 3rem;}
.total_reward .tit {transform:none; position:static; width:100%; margin-bottom:2rem;}
.total_reward .btn {position:relative; margin:2rem auto 0; transform:none; right:auto;}
.total_reward:before {display:none;}



ul.progress li {padding-top:0;}
ul.progress li > div {display:block; }
ul.progress li div.team_name {width:100%; text-align:left; padding:0; position:static; background:none;}
ul.progress li.my div.team_name {padding-left:0;}
ul.progress li div.bar {width:100%; margin:2rem 0;}
ul.progress li div.team_count {width:100%; padding:0; position:static; text-align:left;}
ul.progress li.my div.team_name:before {position:static; display:inline-block; transform:none; margin-right:1rem;}

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

.btns_box {position:static; transform:none; font-size:0; margin-top:2rem;}
.btns_box button {margin:0 1rem; display:inline-block; vertical-align:top; line-height:1;}



}


@media screen and (max-width: 640px) {
html {font-size:32%;}
header .header_wrap img {width:175px;}
header .header_wrap > a {margin-bottmo:3.1rem;}
header .btn_login > button, header .btn_history, header .btn_login {width:58px; height:58px; font-size:2.3rem; line-height:58px; padding:0;}
footer > img {width:99px;}
footer p {font-size:2.1rem;;}
header .my_area > div {font-size:2.9rem;}
header .my_area .cash:before {height:18px; width:1px;}
header .my_area .name:before {width:14px; height:16px; background-size:14px auto;}

.section01 .title {padding:0 1.5rem;}
.section01 .title .sub_tit {font-size:3.9rem;}
.section01 .date {font-size:3.2rem;}
.section01 .my_area > div {font-size:2.9rem;}

.quest .top > .tit {font-size:4.5rem;}
.quest .top .time {font-size:2.9rem;}
.quest .top .time span.progress {background-size:auto 16px;}
.quest .top .time span.progress span.bar {height:16px; background-size:auto 16px;}
.quest_warp .box > .tit {width:90px; height:90px; background-size:90px auto; font-size:2.7rem; padding-top:8rem;}
.quest_warp .box > .tit span {font-size:2.9rem;}
.quest_warp .box {height:178px;}
.quest_warp .reward {height:auto; padding:3rem;}
.quest_warp .reward .tit {font-size:2.7rem; height:auto; padding-top:0; top:4rem; left:3rem;}
.quest_warp .mission .txt {font-size:2.7rem; height:46px; padding:0;}
.quest_warp .mission .count {height:auto; line-height:1; font-size:3.9rem;}
.quest_warp .reward .name {font-size:2.1rem;}
.quest_warp .box > img {height:44px;}
.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: 11px; height: 19px; background-size: 11px auto; top:-12px;}
.total_reward .tit {font-size:2.5rem;}
.total_reward {padding:3rem;}
.total_reward .item .name {font-size:2.1rem;}
.total_reward .tit img {width:12px; position:relative; top:-1px;}

ul.progress li > div {font-size:2.5rem;} 
ul.progress li div.bar .bar_on {height:9px;}
ul.progress li.my div.team_name:before {font-size:2.7rem; height:18px; line-height:18px; width:27px; border-radius:3px;} 

.btn {width:175px; height:58px;  font-size:2.9rem; }
.btn:before, .btn_reward.off:before, .btn_reward.end:before, .total_reward .btn:before {width:16px; height:16px; background-size:16px auto;}
.quick_clear {width:117px; height:35px; font-size:2.5rem;}


.total_reward .btn {width:150px; height:58px; font-size:2.5rem;}

.popup .pop_title h2 {height:42px; line-height:42px; font-size:3.3rem; }
.popup .pop_title > button { background-size:20px auto !important; width:20px; height:20px;}
.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:30px; line-height:30px; 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 button {width:117px; height:35px; font-size:2.5rem;}

}

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