@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto&family=Sarabun:wght@300;400;500;600;700;800&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:#261a31; color:#fff;  line-height: 1; text-align: center; font-weight: 400; font-family: 'Sarabun', sans-serif;}
h1, h2, h3, h4, h5, h6 {  font-weight: 400; font-family: 'Sarabun', 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: 'Sarabun', 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; background-size:cover;}
.inner { width:100%; max-width:1460px; 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;}
.container img {max-width:100%;}




/**/
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: 'Sarabun', sans-serif; text-transform: uppercase; cursor: pointer; outline: none;}
button:hover { transition: all 0.4s ease; cursor: pointer;}
button:focus { outline: none;}
header { position:absolute; top:0; left:0; right:0; z-index:6;}
header .header_wrap {position:relative; padding:5rem 5rem 0; text-align:center;}
header .btn_login { width: 14rem; height:5.2rem; position:absolute; top:5em; right:5rem; }
header .btn_login > button {background-position:0 0; background-color:rgba(255, 255, 255, 0); text-transform:uppercase; background-repeat:no-repeat; background-image:url('/images/id/event/quest/samurai/btn_bg.png');  transition:none; position:relative; display:block; width: 100%; height:100%;  font-size: 14px; color:#ffa8a8; font-weight:700; text-align:center; background-size:100% auto;}
header .btn_login > button:hover {background-position:0 -5.2rem; color:#fff;}
header .header_wrap h1 {display:inline-block; position:absolute; top:4.8rem; left:5rem; }

footer { width:100%;  padding:5rem 0; letter-spacing: -0.01rem;  background:none; font-family: 'Roboto', sans-serif; position:absolute; bottom:0; left:0; right:0; z-index: 2;}
footer p { line-height:1.6; }
footer .cs {color:#f6c7d6; font-size:12px; margin-top:2rem;}
footer .cs > a {color: #fff;}
footer .cs > a:hover {text-decoration:underline;}
footer .copy {color:#f6c7d6; font-size:12px;}

.btn {border-radius:5px; transition:none; width:25rem; height:9rem; margin:0 auto; position:relative; text-transform:uppercase; background-repeat:no-repeat; background-position:0 0; background-color:rgba(255, 255, 255, 0); background-size:100% auto; position:relative;}
.btn:before, .btn:after {content:''; display:block; position:absolute;}
.btn:before {left:0.6rem; bottom:-1rem; width:4.6rem; height:2.3rem; background:url('/images/id/event/quest/samurai/btn_obj01.png') 0 0 no-repeat; background-size:100% auto;}
.btn:after {right:0.6rem; top:-1rem; width:2.6rem; height:4.5rem; background:url('/images/id/event/quest/samurai/btn_obj02.png') 0 0 no-repeat; background-size:100% auto;}
.btn span {text-transform:uppercase; font-size:18px; font-weight:800;}
.btn_start {background-image:url('/images/id/event/quest/samurai/btn_start.png'); color:#ffceaa;     margin-top: -2.4rem;}
.btn_reward {background-image:url('/images/id/event/quest/samurai/btn_reward.png'); color:#ffaffa;     margin-top: -2.4rem;}
.btn_reward.end, .btn_reward.off {background-image:url('/images/id/event/quest/samurai/btn_end.png'); cursor:default; height:8.4rem; color:#ffaffa;}
.quick_clear {vertical-align:middle; width:14rem; height:5.2rem; background-image:url('/images/id/event/quest/samurai/btn_quick.png'); padding:0; color:#ffa8a8; font-weight:800; transition:none;}
.quick_clear .cash {font-size:12px; font-weight:400; position:relative; font-weight:500;}
.quick_clear:before, .quick_clear:after {display:none;}

.btn_modify {vertical-align:middle;  width:14rem; height:5.2rem; background-image:url('/images/id/event/quest/samurai/btn_modify.png'); padding:0; color:#fff; font-weight:800; transition:none;}
.btn_modify:before, .btn_modify:after {display:none;}

.obj {position:absolute;}
.obj01 {top:0; left:0; opacity:0;}
.obj02 {top:0; right:0;  opacity:0;}
.obj03 {top:0; right:0; animation: sway 4s infinite linear;}
.cha {top:132px; right:2.87%;  opacity:0;}

.tit_deco {position:absolute; animation: sway 4s infinite linear;}
.tit_deco01 {left:-4rem; top:-9.4rem;}
.tit_deco02 {right:1rem; top:-2.4rem; animation-delay:0.2s;}

.animated .obj01 {animation: fadeInLeft 0.5s; animation-delay:0.2s; animation-fill-mode: forwards;}
.animated .obj02 {top:0; right:0; animation: fadeInRight 0.5s; animation-delay:0.1s; animation-fill-mode: forwards;}
.animated .cha {animation: fadeInRight 0.5s; animation-delay:0.3s; animation-fill-mode: forwards;}

.btn:hover {background-position:0 -9rem; transition:none;}
.btn_start:hover span {color:#fff;}
.btn_reward.end:hover {background-position:0 0;}
.btn_reward.end:hover span {color:#ffaffa;}
.btn_reward:hover span {color:#fff;}
.quick_clear:hover {background-position:0 -5.2rem; transition:none;}
.quick_clear:hover span {color:#fff;}
.quick_clear:hover .cash {color:#fff;}
.btn_modify:hover {background-position:0 -5.2rem; transition:none;}

.container {background:url('/images/id/event/quest/samurai/bg_v2.jpg') center 0 no-repeat; background-size:cover;}
.section01 {padding:16.3rem 0 0; margin-bottom:5.6rem; position:relative; }

.section01 .sub_title {margin-top:-12.3rem; }
.section01 .date {font-family:'Anton'; font-size:20px; color:#fff; text-transform:uppercase; letter-spacing:0.1rem;     margin-top: -4.3rem; }
.section01 .title {    display: inline-block; position: relative;     z-index: 1;}
.section01 .title .tit_top {animation: slide-in-right 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; }
.section01 .title .tit_bottom {position:absolute; top:0; left:0; }
.section01.animated .title {animation: slide-in-right 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; }
.section01.animated .sb_wrap {animation: flip-in-hor-top 0.5s cubic-bezier(0.380, -0.550, 0.265, 1.550) both; animation-delay:0.3s;}

.animated .title_wrap .fadeInDown {animation-duration:1s;}
.animated .title .tit_top {animation:slash 1.5s;}
.animated .title .tit_bottom {animation:slash02 1.5s;}


.section01 .info_box {position:relative; padding:1rem; border:2px solid #fff; max-width:920px; margin:8rem auto 0;}
.section01 .info_box:before {content:''; display:block; position:absolute; top:-8px; bottom:-8px; right:-8px; left:-8px; background:url('/images/id/event/quest/samurai/frame_obj.png') 0 0 no-repeat, url('/images/id/event/quest/samurai/frame_obj.png') right 0 no-repeat, url('/images/id/event/quest/samurai/frame_obj.png') 0 bottom no-repeat, url('/images/id/event/quest/samurai/frame_obj.png') right bottom no-repeat;}
.section01 .info_box .detail {margin-bottom:16px; background:rgba(255, 255, 255, 0.8); border:0.1rem solid #fff; position:relative; padding:2.5rem 3rem;}
.section01 .info_box .detail:before {content:''; display:block; position:absolute; top:-7px; bottom:-7px; right:-7px; left:-7px; border:2px solid #fff;}
.section01 .info_box .detail .tit {font-size:20px; font-weight:800; color:#b70c0c; position:relative; line-height:normal;}
.section01 .info_box .detail .txt {font-size:16px; color:#000000; line-height:1.6; position:relative; margin-top:4px;}
.section01 .info_box .detail .blood {position:absolute; top:-1px; left:0;}

.section01 .info_box .user_info {background:rgba(0, 0, 0, 0.55); border:0.1rem solid #fff; position:relative;}
.section01 .info_box .user_info:after {content:''; display:block; position:absolute; top:-13px; height:20px; right:-19px; left:-19px; background:url('/images/id/event/quest/samurai/frame_obj.png') 0 0 no-repeat, url('/images/id/event/quest/samurai/frame_obj.png') right 0 no-repeat;}
.section01 .info_box .user_info:before {content:''; display:block; position:absolute; top:-7px; bottom:-7px; right:-7px; left:-7px; border:2px solid #fff;}
.section01 .info_box .user_info .btn_history  {position:absolute; top:50%; right:2rem; transform:translate(0 , -50%);background-position:0 0; background-color:rgba(255, 255, 255, 0); text-transform:uppercase; background-repeat:no-repeat; background-image:url('/images/id/event/quest/samurai/btn_bg.png');  transition:none; display:block;  width: 14rem; height:5.2rem;  font-size: 14px; color:#ffa8a8; font-weight:700; text-align:center; background-size:100% auto; }
.section01 .info_box .user_info .btn_history:hover {background-position:0 -5.2rem; color:#fff;}
.section01 .info_box .my_area {color:#fff; font-size:0;   padding: 3.2rem 0;}
.section01 .info_box .my_area > div {font-size:16px; display:inline-block; width:50%; vertical-align:middle; text-align:left; padding-left:4.5rem;   word-break: break-all;}
.section01 .info_box .my_area span { color:#efb6ff; text-transform:uppercase; font-weight:700;}


.quest_sec {position:relative; }
.quest_sec .quest {position:relative; padding:0 5rem 5.6rem; margin-bottom:5rem; background:#fff url('/images/id/event/quest/samurai/bg_blood.png') center 0 no-repeat;}
.quest_sec .quest .top {font-size:0;  position:relative;}
.quest_sec .quest .top > .tit {padding:5.5rem 0; position:relative; z-index:1; letter-spacing: 0; font-weight:800; color:#fff; font-size:30px; text-transform:uppercase; position:relative;}
.quest_sec .quest .top > .tit:before {content:''; z-index:-1;  display:block; position:absolute; width:280px; height:68px; background:url('/images/id/event/quest/samurai/tit_daily.png') center center no-repeat; top:53%; left:51.5%; transform:translate(-50% , -50%);}
.quest_sec .quest .top .time {font-size:0;}
.quest_sec .quest .top .time span { vertical-align:middle; color:#d57272;  text-align:center; font-size:14px; font-weight:800; text-transform: uppercase; }
.quest_sec .quest .top .time span.progress {border:1px solid #000000; position:relative;  overflow:hidden; background:#4e4e4e; position:relative;  margin:0 2.2rem; vertical-align:middle; width:700px; border-radius:5px;  display:inline-block; height:10px; padding:2px; }
.quest_sec .quest .top .time span.progress span.bar { width:100%; height:100%; display:block; background: linear-gradient(to bottom, #de0000, #7b0000);  position: relative;}
.quest_sec .quest .top .time {position:relative; margin-bottom:5.6rem;}
.quest_sec .quest .top .time span {display:inline; }
.quest_sec .quest .top .time.end {font-size:18px; color:#fff;}
.quest_sec .quest .top .time #leftTime {min-width:80px; display:inline-block; text-align:left;}


.section02 {padding:0 0 16rem;   position:relative; }
.section02, .section03 { z-index:2; position:relative;}
.quest_sec .quest_warp {position:relative; z-index:4;}
.quest_sec .quest_warp > .list {font-size:0; margin-left:-5.2rem; margin-bottom:9rem; letter-spacing:0;}
.quest_sec .quest_warp > .list > li {display:inline-block; vertical-align:top; width:calc(100% / 3); padding-left:5.2rem;}
.quest_sec .quest_warp > .list > li .con {border:2px solid #b50000; background:#fff; padding:4px; position:relative;}
.quest_sec .quest_warp > .list > li .con .bg {border:2px solid #b50000; }
.quest_sec .quest_warp .box {height:230px; position:relative; background:#fff;}
.quest_sec .quest_warp .box .btn {  position:relative; top:50%;  transform:translate(0 , -50%); }
.quest_sec .quest_warp .box .btn.quick_clear, .quest_sec .quest_warp .box .btn.btn_modify {position:static; transform:none; margin:0;}
.quest_sec .quest_warp .box .btn.btn_modify {margin-left:1rem;}
.quest_sec .quest_warp .box .btn.quick_clear span {font-size:12px; display:block;}
.quest_sec .quest_warp .box > .tit {text-transform:uppercase; font-size:22px; color:#b50000; font-weight:800; border-bottom:2px solid #b50000; padding: 1.2rem 0; position:relative;}
.quest_sec .quest_warp .box > .tit font {color:#000000;}
.quest_sec .quest_warp .box > .tit:before {content:''; display:block; position:absolute; bottom:-6px; left:0; right:0; height:2px; background:#b50000;}
.quest_sec .quest_warp .box > .tit:after {content:''; display:block; position:absolute; top:-14px; bottom:-13px; right:-14px; left:-14px; background:url('/images/id/event/quest/samurai/frame_obj02.png') 0 0 no-repeat, url('/images/id/event/quest/samurai/frame_obj02.png') right 0 no-repeat, url('/images/id/event/quest/samurai/frame_obj02.png') 0 bottom no-repeat, url('/images/id/event/quest/samurai/frame_obj02.png') right bottom no-repeat;}
.quest_sec .quest_warp > .list > li .con:after {content:''; display:block; height:20px; position:absolute;  bottom:-13px; right:-14px; left:-14px; background:url('/images/id/event/quest/samurai/frame_obj02.png') 0 0 no-repeat, url('/images/id/event/quest/samurai/frame_obj02.png') right 0 no-repeat;}
.quest_sec .quest_warp .box {background:url('/images/id/event/quest/samurai/bg_mission.png') center bottom no-repeat;}

.quest_sec .quest_warp .reward {height:168px; background:url('/images/id/event/quest/samurai/bg_item.png') center bottom no-repeat; padding:1.5rem 3.6rem; text-align:center; position:relative;}
.quest_sec .quest_warp .reward:after {content:''; display:block; height:20px; position:absolute;  top:-13px; right:-14px; left:-14px; background:url('/images/id/event/quest/samurai/frame_obj02.png') 0 0 no-repeat, url('/images/id/event/quest/samurai/frame_obj02.png') right 0 no-repeat;}
.quest_sec .quest_warp .reward .tit {color:#b50000; font-weight:800; text-align:center; font-size:14px;  text-transform:uppercase; }
.quest_sec .quest_warp .reward .item {position:relative;}
.quest_sec .quest_warp .reward .img {height:90px;}
.quest_sec .quest_warp .reward .img img {max-width:100%; max-height:90px;}
.quest_sec .quest_warp .reward .name {margin-top:0.3rem; color:#000000; font-size:14px; font-weight:500; word-break:break-all; line-height:1.1;  }
.quest_sec .quest_warp .mission .txt { height:80px; text-align:center; font-size:18px; color:#000000; font-weight:800; line-height:normal; word-break:break-all; padding:0 1rem; overflow:hidden;}
.quest_sec .quest_warp .mission .count { font-size:24px; font-weight:800;  color:#b50000; margin-bottom:1rem; }
.quest_sec .quest_warp .mission .count .bar {color:#880000;}
.quest_sec .quest_warp .mission .count .my_count {color:#880000;}
.quest_sec .quest_warp .box > img {margin-top: 25px; position:absolute; top:50%; left:50%; transform:translate(-50% , -50%);}
.quest_sec .quest_warp .reward .lock {position:relative; margin-top:4rem;}
.quest_sec .quest_warp .reward .lock:before, .quest_sec .quest_warp .reward .lock:after {left:50%; transform:translate(-50% , 0); content:''; display:block; position:absolute;}
.quest_sec .quest_warp .reward .lock:before {animation:light01 1s infinite; top:-25px; width:85px; height:80px; background:url('/images/id/event/quest/samurai/light.png') 0 0 no-repeat;}
.quest_sec .quest_warp .reward .lock:after {animation:down 1s infinite; top:-23px; width:16px; height:28px; background:url('/images/id/event/quest/samurai/icon_ques.png') 0 0 no-repeat;}
.quest_sec .quest_warp .reward .no_item {    position: relative; margin-top:1.5rem;}

.quest_sec .quest_warp .box .lock {text-align:center; padding-top:5.8rem; width:100%; height:calc(100% - 48px); }
.quest_sec .quest_warp .box .complete {text-align:center; width:100%; padding-top:5px; height:calc(100% - 48px); }

.quest_sec .quest_warp .box .lock div {text-align:center; display:inline-block; position:relative;}
.quest_sec .quest_warp .box .lock div .ov {position:absolute; top:0; left:0; animation: 1.5s opaque ease-in-out infinite both;}
.quest_sec .quest_warp .box .complete div {text-align:center; display:inline-block; position:relative;}
.quest_sec .quest_warp .box .complete div .ov {position:absolute; top:0; left:0; animation: sway 3s infinite linear;}




.total_reward {border:2px solid #a0a0a0; padding:4px; text-align:center; position:relative;  background:url('/images/id/event/quest/samurai/bg_total.png') center center no-repeat;}
.total_reward:before {content:''; display:block; position:absolute; top:-8px; bottom:-8px;; right:-8px;; left:-8px;; background:url('/images/id/event/quest/samurai/frame_obj03.png') 0 0 no-repeat, url('/images/id/event/quest/samurai/frame_obj03.png') right 0 no-repeat, url('/images/id/event/quest/samurai/frame_obj03.png') 0 bottom no-repeat, url('/images/id/event/quest/samurai/frame_obj03.png') right bottom no-repeat;}
.total_reward:after {content:''; display:block; position:absolute; top:4px; bottom:4px; right:4px; left:4px; border:2px solid #a0a0a0;}
.total_reward .btn { z-index: 1; margin-top: 0; position:absolute; top:50%; transform:translate(0 , -50%); right:4rem;}
.total_reward .tit { z-index: 1; margin:2.5rem auto 0;  position:relative;  font-size:16px; font-weight:800; color:#fff; text-transform:uppercase;}
.total_reward .tit:before {content:''; z-index:-1;  display:block; position:absolute; width:319px; height:50px; background:url('/images/id/event/quest/samurai/tit_complete.png') center center no-repeat; top:50%; left:50%; transform:translate(-50% , -50%);}

.total_reward .item {margin:2.2rem auto 0; max-width:470px;     position: relative;  z-index: 1;}
.total_reward .item .img {height:89px; max-width:396px; margin:0 auto 1.5rem;}
.total_reward .item .img img {max-width:100%; max-height:89px;}
.total_reward .item .name {padding-bottom:1.5rem; font-size:14px; font-weight:500; color:#000000; text-transform:uppercase;  word-break:break-all; line-height:normal; }

.quest_sec .quest.team ul.progress { position:relative;}
.quest_sec .quest.team ul.progress li {position:relative; line-height: 93px; padding:0 1rem; font-size:0;  height:91px; background:url('/images/id/event/quest/samurai/bg_team_li.png') center center no-repeat; letter-spacing:0;}
.quest_sec .quest.team ul.progress li > div {display:inline-block; vertical-align:middle; }
.quest_sec .quest.team ul.progress li div.team_name {background:url('/images/id/event/quest/samurai/bg_team.png') 0 0 no-repeat; padding:0 3rem; position:relative; font-size:16px;   font-weight:500; line-height:60px; overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space: nowrap; word-break:break-all;  word-wrap: normal;  height:100%; width:200px; height:50px; line-height:50px; word-break: break-all; text-align:center; color:#efb6ff; }
.quest_sec .quest.team ul.progress li div.bar {position:relative; width:calc(100% - 450px); margin:0 2.5rem;  }
.quest_sec .quest.team ul.progress li div.bar .bar_on {display:block; width: 100%; height:20px; padding:0; background: linear-gradient(to bottom, #2b0b4c, #dd73f5);}
.quest_sec .quest.team ul.progress li div.team_count {background:url('/images/id/event/quest/samurai/bg_count.png') 0 0 no-repeat; width:200px; height:50px; line-height:50px;  font-size:16px; font-weight:500;  text-align:center;  color:#000000; }
.quest_sec .quest.team ul.progress li.my div.team_name {color:#fff; position:relative; background:url('/images/id/event/quest/samurai/bg_my.png') 0 0 no-repeat;}
.quest_sec .quest.team ul.progress li.my:before {line-height:76px; z-index:1; text-align:center; position:absolute; content:''; display:block;  width:71px; top:-1px; height:76px; left:-25px;   background:url('/images/id/event/quest/samurai/tit_my.png') 0 0 no-repeat;}

.quest_sec .quest.team .bg {margin-bottom:5.6rem; border:2px solid #b50000; padding:4px; text-align:center; position:relative; }
.quest_sec .quest.team .bg:before {content:''; display:block; position:absolute; top:-8px; bottom:-8px;; right:-8px;; left:-8px;; background:url('/images/id/event/quest/samurai/frame_obj02.png') 0 0 no-repeat, url('/images/id/event/quest/samurai/frame_obj02.png') right 0 no-repeat, url('/images/id/event/quest/samurai/frame_obj02.png') 0 bottom no-repeat, url('/images/id/event/quest/samurai/frame_obj02.png') right bottom no-repeat;}
.quest_sec .quest.team .bg:after {content:''; display:block; position:absolute; top:4px; bottom:4px; right:4px; left:4px; border:2px solid #b50000; }
.quest_sec .quest.team .bg .con {padding:3.5rem 4rem; position:relative; z-index:1;}



.btns_box {font-size:0; letter-spacing:0; padding:0 1rem 1.2rem;}
.btns_box button {width:calc((100% - 1.2rem) / 2); height:40px; display:inline-block; vertical-align:top; }
.btns_box .btn_modify {margin-left:1.2rem;}

/* popup */
.dimmed01 {display:none; width: 100%; height: 100%; text-indent: -99999px; background: url(/images/id/event/quest/samurai/dim_bk50.png) repeat; position: fixed; left: 0; top: 0; z-index: 8;}
.dimmed {width: 100%; height: 100%; text-indent: -99999px; background: url(/images/id/event/quest/samurai/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; padding:4px 0; background:#361a4f; }
.popup .pop_title h2 {background:url('/images/id/event/quest/samurai/bg_pop_tit.png') center center no-repeat; border-top:2px solid #e1c0d8; border-bottom:2px solid #e1c0d8; font-weight:700; color:#ffd2f3; text-transform:uppercase; font-size:25px;  padding:1.8rem 0 1.8rem 2.5rem;   text-align:left; }
.popup .pop_title > button {width:34px; height: 30px; font-size: 0; text-indent: -99999px; background-color:rgba(255, 255, 255, 0); background-image:url(/images/id/event/quest/samurai/pop_close.png); background-repeat:no-repeat; background-position:0 0; position: absolute; top:50%; transform:translate(0, -50%); right:2.4rem;  transition:none;}
.popup .pop_title > button:hover {background-position:0 -30px; }
.popup .pop_cont {padding:2.4rem; }
.popup .pop_layout {left:50%; top:50%; border:1px solid #e1c0d8; box-shadow:0 20px 80px rgba(0, 0, 0, 0.4); position: absolute;  background: #000;  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(255, 210, 243, 0.5); font-size: 0;   }
.pop_history .list li > p {padding:0 2rem;  display: inline-block;  vertical-align:middle; text-align:center; font-size:16px; overflow: hidden; text-overflow: ellipsis;-ms-text-overflow: ellipsis;  white-space: nowrap;  word-wrap: normal;}
.pop_history .list li > p.date { width: 20%; color:#ff8a77; letter-spacing:0.02rem;}
.pop_history .list li > p.quest {width:50%;}
.pop_history .list li > p.date span {display:block; color:#e24b33;}
.pop_history .list li.bottom {}
.pop_history .list li.bottom > p.date {line-height:1.1; font-size:14px; text-transform: uppercase;}
.pop_history .list li.bottom > p.quest {color:#fff;}
.pop_history .list li > p.reward {width: 30%; color:#ffd2f3;}
.pop_history .list li.top { overflow:hidden;  text-transform:uppercase; border:1px solid #e1c0d8; height:36px; line-height:32px;  color:#fffcac;}
.pop_history .list li.top p {color:#ffd2f3; font-size:15px;  font-weight:600; }
.pop_history .list li.top > p.quest {border-left:1px solid #e1c0d8; border-right:1px solid #e1c0d8;}
.pop_history .list li.none { height: 500px; font-size: 14px; color:#ffd2f3; 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:#ffff99;}

.pop_payment .pop_layout, .pop_pay_result .pop_layout  { width:640px; height:400px;}
.pop_payment .pop_layout ul.pop_cont {position:relative; background: url(/images/id/event/quest/samurai/bg_mission_ptn.png) 0 0 repeat;  border: 1px solid #fff; margin:2.4rem; background:#fff; color:#fff;  font-weight:700; }

.pop_payment .pop_layout ul.pop_cont li {color:#e24b33; position:relative; width:33%; display:inline-block; margin:45px 0; font-size:24px; font-weight:700;  }
.pop_payment .pop_layout ul.pop_cont li.minus { color:#e24b33;  }
.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/id/event/quest/samurai/icon_minus.png) 0 0 no-repeat; width:22px; height:17px; }
.pop_payment .pop_layout ul.pop_cont li.total { color:#e24b33 }
.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/id/event/quest/samurai/icon_total.png) 0 0 no-repeat; width:22px; height:17px; }
.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 .btn {margin:0 1rem;width:14rem; line-height:5rem; height:5rem; display:inline-block; font-size:14px; color:#ffd7f4; font-weight:700; text-transform:uppercase;}
.pop_layout .btn_cancel {background-image:url('/images/id/event/quest/samurai/btn_cancel.png');}
.pop_layout .btn_ok {background-image:url('/images/id/event/quest/samurai/btn_ok.png');}
.pop_layout .btn:hover {background-position:0 -5rem;}
.pop_layout .btn_cancel:hover span {color:#a5398d;}
.pop_layout .btn_ok:hover span {color:#ff22bf;}
.pop_layout .btn:before, .pop_layout .btn:after {display:none;}



.pop_pay_result .pop_cont {position:relative; background:#fff; border: 1px solid #fff; font-size:24px;  font-weight:500; margin:2.4rem; padding:8rem 0; color:#e24b33;  font-weight:700; }
.pop_pay_result .result { font-weight:700; color:#ffd2f3; font-size:21px; margin-top:3rem;  text-transform:uppercase; }

.pop_payment .pop_layout .subject, .pop_pay_result .pop_cont .subject {text-transform:uppercase; font-size:15px; font-weight:600; padding-bottom:10px; color:#777777; }


/* 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;} 

.fadeInUp {animation-duration: 1s;}


@keyframes slide-in-right {
  0% {
	transform: translateX(300px) skew(-50deg);
	opacity: 0;
  }
  100% {
	transform: translateX(0) skew(0deg);
	opacity: 1;
  }
}




@keyframes flip-in-hor-top {
  0% {
	transform: rotateX(-80deg) scale(2);
	opacity: 0;
  }
  100% {
	transform: rotateX(0) scale(1);
	opacity: 1;
  }
}

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

@media screen and (min-width: 2201px) {
}

@media screen and (max-width: 1921px) {
.cha {right:0; width:638px;}
.obj01 {width:38%;}
.obj02 {width:14%;} 	
}	


@media screen and (max-width: 1300px) {
.cha {right:auto; left:50%; transform:translate(-50% , 0);     margin-left: -319px; top:730px;}
.section01 .info_box {margin-top:48rem;}
.obj03 {width:35%;}

	
header .btn_login {right:3rem;}	
header .header_wrap h1 {left:3rem;}
.quest_sec .quest {padding:0 3rem 3rem;     background-size: contain;}
.quest_sec .quest_warp > .list {margin-left:0;}
.quest_sec .quest_warp > .list > li {display:block; width:100%; padding-left:0; margin-bottom:5rem;}
.quest_sec .quest .top .time {float:none; margin-top:0; padding:0;}
.quest_sec .quest .top .time span.progress {width:660px;}
.total_reward {margin-right:-2.4rem; height:auto; background-size:100% 100%; padding:0 2.4rem;}
.total_reward .item .name {padding-bottom:2.4rem;}
.total_reward .btn {position:relative; transform:none; right: auto; margin:0 auto 2.4rem;}
.btns_box {padding:0;}
.btns_box button {position:absolute; bottom:1.2rem; width:139px;}
.btns_box .quick_clear {left:1rem;}
.btns_box .btn_modify {right:1rem;}
.quest_sec .quest_warp .box > img {height:130px;}
.quest_sec .quest_warp .reward .lock, .quest_sec .quest_warp .reward .no_item {z-index:1;}
.quest_sec .quest_warp .reward .name {position:relative; z-index:1;}

.user_info .my_area {text-align:center; }

.quest_sec .quest_warp .box {height:240px;}

.section03 .bg .con {padding:5rem 3.6rem;}
.section03 .bg .con:before, .section03 .bg .con:after {background-size:100% 100%; width:2.5rem;}
.section03 .bg .con:after {right:-2.5rem;}
.section03 .bg .con:before {left:-2.5rem;}
.section03 .cha_obj {display:none;}

.popup .pop_layout {width:100%; top:0; transform: translate(-50% , 0);}

.section01 .info_box .user_info {padding:1rem 3rem 3rem;}
.section01 .info_box .my_area {padding:0; display:inline-block;}
.section01 .info_box .user_info .btn_history {position:relative; margin:0.5rem auto 0; transform:none; right:auto; top:auto;}
.section01 .info_box .my_area > div {display:block; padding:0; margin:2rem 0; width:100%;}

.section03 .bg {background:none; border:none;}
.section03 .bg .con {margin:0; width:100%; padding:0; background:none;}
.section03 .bg .con:before, .section03 .bg .con:after {display:none;}
.section03 .quest_sec {padding-left:3rem; padding-right:3rem;}
.quest_sec .quest.team ul.progress li {margin-bottom:1rem;}
.total_reward {margin-right:0;}

.quest_sec .quest.team ul.progress li {padding-top:9rem; background-size:100% 100%; padding-bottom:3rem; height:auto; line-height:normal;}
.quest_sec .quest.team ul.progress li div.bar {display:block; margin:0; width:100%;}
.quest_sec .quest.team ul.progress li div.team_name, .quest_sec .quest.team ul.progress li div.team_count {position:absolute; top:3rem;}
.quest_sec .quest.team ul.progress li div.team_name {left:1rem;}
.quest_sec .quest.team ul.progress li div.team_count {right:1rem;}
.quest_sec .quest.team ul.progress li.my div.team_name {position:absolute;}




}

@media screen and (max-width: 1023px) {
.quest_sec .quest .top .time span.tit, .quest_sec .quest .top .time span#dayCount, .quest_sec .quest .top .time span#leftTime {position:absolute; top:-3.6rem;}	
.quest_sec .quest .top .time span.tit {left:0;}
.quest_sec .quest .top .time span#dayCount, .quest_sec .quest .top .time span#leftTime {right:0; min-width:0;}
.quest_sec .quest .top .time span.progress {width:100%; margin:0;}	



}


	
@media screen and (max-width: 768px) {
html {font-size:32%;}
header .header_wrap img {width:130px;}
header .header_wrap h1 img {width:90px;}
footer > img {width:99px;}
footer .cs {font-size:2.1rem;}
footer .copy {font-size:2.1rem}

.animated .title_wrap {margin:0 -3rem;}

.btn span {font-size:2.7rem;}
.quest_sec .quest_warp .box .btn.quick_clear, .quest_sec .quest_warp .box .btn.btn_modify {width:25rem; height:9.3rem; background-size:100% auto;}
.quest_sec .quest_warp .box .btn.quick_clear:hover, .quest_sec .quest_warp .box .btn.btn_modify:hover {background-position:0 -9.3rem;}
.quest_sec .quest_warp .box .btn.quick_clear span {font-size:2.1rem;}

.cha {width:300px; margin-left:-150px; top:365px;}
.section01 .title .tit {width:446px;}
.section01 .sub_title img {width:359px;}

header .btn_login > button {font-size:2.3rem; padding-bottom: 0.5rem;}


.section01 .date {font-size:3.1rem;}
.section01 .info_box .detail .tit {font-size:2.4rem;}
.section01 .info_box .detail .txt {font-size:2.1rem;}
.section01 .info_box .my_area > div {font-size:2.5rem;}
.section01 .info_box .user_info .btn_history {font-size:2.3rem;}
.section02 {padding-bottom:20rem;}

.tit_deco01 {width:37.5rem;}
.tit_deco02 {width:17.5rem;}




.quest_sec .quest .top > .tit {font-size:3.9rem;}
.quest_sec .quest .top > .tit:before {width:36rem; height:8.7rem; background-size:100% auto; left:52%;}
.quest_sec .quest .top .time span {font-size:2.3rem;}
.quest_sec .quest_warp .box > .tit {font-size:3.1rem;}
.quest_sec .quest_warp .reward {height:auto; padding:3rem;}
.quest_sec .quest_warp .reward .tit {font-size:2.3rem;}
.quest_sec .quest_warp .mission .txt {font-size:2.7rem; height:95px;}
.quest_sec .quest_warp .mission .count {font-size:3.3rem; margin-bottom:3rem;}
.quest_sec .quest_warp .reward .name {font-size:2.3rem;}
.quest_sec .quest_warp .box > img {height:103px; margin-top:15px;}
.quest_sec .quest_warp .reward .no_item > img, .quest_sec .quest_warp .reward .lock > img {width:60px;}
.quest_sec .quest_warp .reward .lock:before {width:60px; height:60px; top:-20px; background-size:60px auto;}
.quest_sec .quest_warp .reward .lock:after {width: 11px; height: 19px; background-size: 11px auto; top:-12px;}
.quest_sec .quest_warp .box .lock { height:calc(100% - 30px); padding-top:12.8rem;}
.quest_sec .quest_warp .box .complete {height:calc(100% - 30px); padding-top:4rem;}
.quest_sec .quest:before {background-size:48px auto;}
.quest_sec .quest .top .time.end {font-size:2.7rem;}
.quest_sec .quest_warp > .list > li {margin-bottom:7rem;}


.total_reward .tit {font-size:2.3rem;  line-height:26px;}
.total_reward .item .name {font-size:2.5rem; line-height:1.2;}
.total_reward .tit img {width:12px; position:relative; top:-1px;}
.total_reward .tit:before {height:40px; background-size:auto 100%;}







.quest_sec .quest.team ul.progress li div.team_name {font-size:2.5rem; width:100px; height:25px; line-height:24px; background-size:100% auto;  padding: 0 1rem;}
.quest_sec .quest.team ul.progress li.my:before {width:50px; height:50px; background-size:50px auto;}
.quest_sec .quest.team ul.progress li div.team_count {font-size:2.5rem; width:100px; height:25px; line-height:24px; background-size:100% auto;}
.quest_sec .quest.team ul.progress li.my div.team_name { background-size:100% auto; padding-left:3rem;}
.quest_sec .quest.team ul.progress li div.bar .bar_on {height:12px;}

.quest_sec .quest_warp .box .btn br {display:block;}




.popup .pop_title h2 {font-size:3.3rem; padding-top:2.8rem;}
.popup .pop_title > button { background-size:24px auto !important; width:24px; height:21px;}
.popup .pop_title > button:hover { background-position: 0 -21px;}
.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;     padding: 0 5px;}
.pop_history .list li.top p {font-size:2.7rem;}
.pop_history .list li.none {font-size:2.4rem;}
.pop_history .list li.bottom > p.date {font-size:2.3rem;}

.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_payment .pop_layout .subject, .pop_pay_result .pop_cont .subject {font-size:2.4rem;}
.pop_payment .pop_layout ul.pop_cont li, .pop_pay_result .pop_cont {font-size:2.9rem;}
.pop_payment .pop_layout ul.pop_cont li.minus:before {width:12px; height:7px; background-size:12px auto; top:26px; left:-6px;}
.pop_payment .pop_layout ul.pop_cont li.total:before {width:12px; height:9px; background-size:12px auto; top:26px; left:-6px;}
.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:2.9rem;}
.pop_payment .pop_layout, .pop_pay_result .pop_layout {height:300px;}

.btns_box button {height:30px; width:100px; font-size:2.3rem;}

.pop_layout .btn span {font-size:3rem;}

.pop_layout .btn {font-size:2.3rem;}


}


@media screen and (max-width: 470px) {
.cha {top:340px;}		
}

@media screen and (max-width: 360px) {
.section01 .my_area > div {font-size:2.4rem;}
.section01 .info_box .detail .tit {font-size:2.4rem;}
.section01 .info_box .detail .txt {font-size:2.1rem;}
}

@media screen and (max-width: 321px) {
.cha {top:300px;}	
}
	
@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);}
}




@keyframes sway {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}


@keyframes slash{
  0%{
        transform: translate(0 , 0);
  }
  10%{
        transform: translate(-150px , -50px);
  }
  100%{
    transform: translate(0 , 0);
  }
}

@keyframes slash02{
  0%{
        transform: translate(0 , 0);
  }
  10%{
        transform: translate(150px , 50px);
  }
  100%{
    transform: translate(0 , 0);
  }
}

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

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

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

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