@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://use.typekit.net/lfl3brs.css");
*, *:before, *:after {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;}

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

/* slick */
.slick-slider {position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none;
-ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
.slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus {outline: none;}
.slick-list.dragging{cursor: pointer; cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list {transform: translate3d(0, 0, 0); transition-delay: 10ms;}
.slick-track {position: relative; top: 0; left: 0; display: block;}
.slick-track:before, .slick-track:after {display: table; content: '';}
.slick-track:after {clear: both;}
.slick-loading .slick-track {visibility: hidden;}
.slick-slide {display: none; float: left; height: 100%; min-height: 1px;}
[dir='rtl'] .slick-slide {float: right;}
.slick-slide img {display: block;}
.slick-slide.slick-loading img {display: none;}
.slick-slide.dragging img {pointer-events: none;}
.slick-initialized .slick-slide {display: block;}
.slick-loading .slick-slide {visibility: hidden;}
.slick-vertical .slick-slide {display: block; height: auto; border: 1px solid transparent;}
.slick-arrow.slick-hidden {display: none;}

/* root */
:root {
--gre : 'greycliff-thai-cf', sans-serif;
--man : 'manop-variable', sans-serif;
--regular: 'wdth' 100, "wght" 400;
--light: 'wdth' 100, "wght" 284;
}

.btn_glitch {transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateZ(0); overflow: visible;}
.btn_glitch.btn_glitch_active { -webkit-filter: url("#filter"); filter: url("#filter");}
.btn_glitch.btn_glitch_active:after, .btn_glitch.btn_glitch_active:before {content: ""; width: 1px; position: absolute; top: -1px; bottom: -1px;}
.btn_glitch.btn_glitch_active:after {left: -2px; background-color: #ff536b; animation: colorshift-red 2.6s infinite;animation-timing-function: step-end;}
.btn_glitch.btn_glitch_active:before { right: -2px; background-color: #3ffeff; animation: colorshift-blue 2.6s infinite; animation-timing-function: step-end;}

.btn_login {font-size:25px; color:#000000; font-weight:900; letter-spacing:0; text-shadow:-1px 0 0 #55aaff, 1px 0 0 #ddcc77; min-width:21.6rem; height:7.2rem; text-transform:uppercase; background:#99ffff; box-shadow:inset 0 0 0.8rem #00bbee, inset 0 0 4rem rgba(0, 238, 221, 0.5), 0 0 4rem rgba(0, 238, 221, 0.2);}
.btn_login span {padding:2px 2.8rem 0 4rem; width:100%; height:100%; display:flex; align-items:center; justify-content:flex-start;}
.btn_login span:before , .btn_login span:after {content:''; display:block; position:absolute;}
.btn_login span:before {top:0; bottom:0; left:0; right:0; background:url('/images/common/event/promotion/ptn04.png') center center repeat; opacity:0.5;}
.btn_login span:after {top:0.6rem; bottom:0.6rem; left:0.6rem; right:0.6rem; background:url('/images/common/event/promotion/btn_lt.png') 0 0 no-repeat , url('/images/common/event/promotion/btn_rt.png') right 0 no-repeat , url('/images/common/event/promotion/btn_lb.png') 0 bottom no-repeat, url('/images/common/event/promotion/btn_rb.png') right bottom no-repeat;}
.btn_login span font {position:relative; display: flex; align-items: center; width:100%; justify-content: space-between;}
.btn_login span font:after {margin-left:1rem; content:''; display:inline-block; position:relative; vertical-align:middle; width:1.4rem; height:2.4rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/promotion/btn_arr.png'); background-size:100% auto;}
.btn_login:hover {text-shadow:-1px 0 0 #ff9900, 1px 0 0 #99bbff; background:#ffff88; box-shadow:inset 0 0 0.6rem #ff8800, inset 0 0 3rem rgba(255, 102, 0, 0.4), 0 0 3rem rgba(255, 255, 136, 0.5);}
.btn_login:hover span font:after {background-position:0 100%;}
.btn_login:hover span:before {background:url('/images/common/event/promotion/ptn03.png') center center repeat; opacity:0.3;}
.btn_login:hover span:after {opacity:0;}

.btn_regi {font-size:14px; color:#77ffff; text-transform:uppercase; letter-spacing:0.03em; font-weight:500; box-shadow:inset 0 0 0 1px #44eedd; display:flex; align-items:center; justify-content:center;}
.btn_regi:before {content:''; display:block; position:absolute; top:0.4rem; bottom:0.4rem; left:0.4rem; right:0.4rem; background:url('/images/common/event/promotion/btn_arr_lt.png') 0 0 no-repeat , url('/images/common/event/promotion/btn_arr_rt.png') right 0 no-repeat, url('/images/common/event/promotion/btn_arr_lb.png') 0 bottom no-repeat, url('/images/common/event/promotion/btn_arr_rb.png') right bottom no-repeat;}
.btn_regi:hover {color:#ffff88; box-shadow:inset 0 0 0 1px #ffff88 , inset 0 0 3rem rgba(255, 255, 136, 0.1), 0 0 1rem rgba(255, 255, 136, 0.1);}
.btn_regi:hover:before {background:url('/images/common/event/promotion/btn_arr_lt_y.png') 0 0 no-repeat , url('/images/common/event/promotion/btn_arr_rt_y.png') right 0 no-repeat, url('/images/common/event/promotion/btn_arr_lb_y.png') 0 bottom no-repeat, url('/images/common/event/promotion/btn_arr_rb_y.png') right bottom no-repeat;}

.header {position:fixed; left:0; right:0;}
.header .inner {padding:2.4rem;}
.header .btn_login {position:absolute; top:0; right:0;}

.header_top {top:0; z-index:3; padding-right:1.8rem; right:356px;}
.header_top .inner {padding-bottom:0; display:flex; align-items:center; justify-content:flex-end; padding-right:0;}
.header_top .fix_sns {display:inline-block;}
.header_top .fix_sns li {display:inline-block; vertical-align:top; margin-right:2.4rem;}
.header_top .fix_sns li:last-child {margin-right:0;}
.header_top .fix_sns li a {transition:all ease-in-out 0.2s; display:block; width:36px; height:36px; font-size:0; color:transparent; background-repeat:no-repeat; background-position:0 0; opacity:0.4; background-size:100% auto;}
.header_top .sns_fb a {background-image:url('/images/common/event/promotion/sns_fb.png');}
.header_top .sns_it a {background-image:url('/images/common/event/promotion/sns_it.png');}
.header_top .sns_dc a {background-image:url('/images/common/event/promotion/sns_dc.png');}
.header_top .sns_yt a {background-image:url('/images/common/event/promotion/sns_yt.png');}
.header_top .sns_tt a {background-image:url('/images/common/event/promotion/sns_tt.png');}
.header_top .fix_sns li a:hover {opacity:1;}
.header_top .utils {display:flex; align-items:center; padding-top:6px;}
.header_top .utils .btn_redeem {font-size:17px; font-weight:600; text-transform:uppercase; text-shadow:1px 0 0 #55aaff, -1px 0 0 #ddcc77; border:1px solid #77ffff; padding:3px 31px 3px 3px; color:#000000; position:relative;}
.header_top .utils .btn_redeem span {padding-top:2px; display:flex; background:#77ffff; min-width:14.4rem; padding:0 10px; align-items:center; justify-content:center; height:28px;}
.header_top .utils .btn_redeem span:after {content:''; right:10px; top:50%; margin-top:-8px; display:block; position:absolute; width:10px; height:16px; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/promotion/btn_arr_b.png');}
.header_top .utils .btn_redeem font:after {display:block; position:absolute; content:''; width:36px; height:2px; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/promotion/btn_bar.png'); left:0; bottom:-6px;}
.header_top .utils .btn_redeem:hover {border-color:rgba(255, 255, 255, 0); background:#ffff88; text-shadow:1px 0 0 #99bbff, -1px 0 0 #ff9900; box-shadow:inset 0 0 4px rgba(255, 102, 0, 0.4) , 0 0 2rem rgba(255, 255, 136, 0.3);}
.header_top .utils .btn_redeem:hover span {background:none;}
.header_top .utils .btn_redeem:hover span:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/promotion/ptn03.png') center center no-repeat; opacity:0.3;}
.header_top .utils .btn_redeem:hover span:after {background-position:0 100%;}
.header_top .utils .btn_redeem:hover font:after {background-position:0 100%;}

.header_bottom { z-index:101; height:7.2rem; text-align:left; bottom:0; background:linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(51, 170, 170, 0.3)) , rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);}
.header_bottom:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/promotion/ptn02.png') 0 0 repeat; opacity:0.03;}
.header_bottom .inner {position:relative; padding:2.1rem 2.4rem;}
.header_bottom .down_area {display:inline-block; position: absolute; bottom: 0; left:50%; transform:translate(-50% , 0);}
.header_bottom .down_area:before, .header_bottom .down_area:after {z-index:-1; content:''; display:block; position:absolute; bottom:0; background:url('/images/common/event/promotion/down_line.png') 0 0 no-repeat; background-size:100% auto; width:19.6rem; height:2.4rem;}
.header_bottom .down_area:before {left:-18.4rem;}
.header_bottom .down_area:after {right:-18.4rem; transform:scaleX(-1);}
.header_bottom .down_area > a {cursor: none; line-height:1; text-shadow:-1px 0 0 #559933, 1px 0 0 #ff9955; font-size:28px; font-weight:900; color:#000000; letter-spacing:0.04em; text-transform:uppercase; transition:none; display:flex; align-items:center; justify-content:center; width:43.2rem; height:9.6rem; /* clip-path: polygon(9.6rem 0%, calc(100% - 9.6rem) 0%, 100% 100%, 0% 100%); */ background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/promotion/btn_down.png');}
.header_bottom .down_area > a span {text-align:left; padding-left:7.6rem; position:relative;}
.header_bottom .down_area > a span:before, .header_bottom .down_area > a span:after {content:''; display:inline-block; position:absolute;}
.header_bottom .down_area > a span:before {left:0; top:50%; margin-top:-2.6rem; vertical-align:middle; width:5.6rem; height:5.2rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/promotion/icon_down.png');}
.header_bottom .down_area > a span:after {animation:up 0.7s infinite linear; left:1.2rem; top:0; width:3.8rem; height:3.4rem; background-repeat:no-repeat; background-position:0 100%; background-image:url('/images/common/event/promotion/icon_down_arr.png');}
.header_bottom .down_area > a font {display:block; color:#660000;}
.header_bottom .down_area > a:before {z-index:11; transition:all ease-in-out 0.2s; animation: blink-2 ease 1.5s infinite; content:''; display:block; height:100%; position:absolute; width:100%; transform:translate(-50%, 0); top:0; left:50%; background:url('/images/common/event/promotion/btn_down_shd.png') 0 0 no-repeat; background-size:100% auto;}
.header_bottom .down_area:hover {background:url('/images/common/event/promotion/btn_down_shd.png') 0 0 no-repeat;}
.header_bottom .down_area > a:hover {background-position:0 100%;}
.header_bottom .down_area > a:hover:before {animation:none;}
.header_bottom .down_area > a:hover span:after {background-position:0 0; animation:none;}

.cybr-btn {
--clip: polygon(9.6rem 0%, calc(100% - 9.6rem) 0%, 100% 100%, 0% 100%);
--shimmy-distance: 5;
--clip-one: polygon(9.6rem 0%, calc(100% - 9.6rem) 0%, 100% 100%, 0% 100%);
--clip-two: polygon(9.6rem 0%, calc(100% - 9.6rem) 0%, calc(100% - 9.6rem) 25%, 9.6rem 25%, 0% 25%, 0% 0%);
--clip-three: polygon(9.6rem 35%, calc(100% - 9.6rem) 35%, calc(100% - 9.6rem) 55%, 9.6rem 55%, 0% 55%, 0% 35%);
--clip-four: polygon(9.6rem 70%, calc(100% - 9.6rem) 70%, calc(100% - 9.6rem) 100%, 9.6rem 100%, 0% 100%, 0% 70%);
--clip-five: polygon(9.6rem 0%, calc(100% - 9.6rem) 0%, calc(100% - 9.6rem) 55%, 9.6rem 55%, 0% 55%, 0% 0%);
--clip-six: polygon(9.6rem 35%, calc(100% - 9.6rem) 35%, calc(100% - 9.6rem) 100%, 9.6rem 100%, 0% 100%, 0% 35%);
--clip-seven: var(--clip);
color: #000; display:block; text-align:center; font-size: 20px; position: relative; width: 432px; height: 96px; line-height: 96px; transition: background 0.2s;}
.cybr-btn:after, .cybr-btn:before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1;}
.cybr-btn:after {background: url('/images/common/event/promotion/btn_down.png') 0 0 no-repeat;}
.cybr-btn__glitch { align-items: center; justify-content: center; position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; background: url('/images/common/event/promotion/btn_down.png') 0 0 no-repeat; animation: glitch 2s infinite; display: none;}
.cybr-btn:hover .cybr-btn__glitch {display: flex;}
.cybr-btn:hover:after, .cybr-btn:hover .cybr-btn__glitch:before {background-position:0 100%;}
.cybr-btn__glitch:before {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: inherit; z-index: -1;}

.cursor {mix-blend-mode: screen; pointer-events: none; z-index: 101; display:none; transform: translate(-50%, -50%); top:0; left:0; position:fixed; width:11.6rem; height:11.6rem; background:url('/images/common/event/promotion/bg_cursor.png') 0 0 no-repeat; background-size:100% auto;}
.cursor:before, .cursor:after {content:''; display:block; position:absolute; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; width:100%; height:100%; left:0; top:0;}
.cursor:before {background-image:url('/images/common/event/promotion/bg_cursor_rotate01.png'); animation: aim 10s infinite linear;}
.cursor:after {background-image:url('/images/common/event/promotion/bg_cursor_rotate02.png'); animation: spin1 3s infinite linear;}

.cursor_vod {pointer-events: none; z-index: 101; display:none; transform: translate(-50%, -50%); top:0; left:0; position:absolute; width:15rem; height:16.8rem; background:url('/images/common/event/promotion/pointer_vod.png') 0 0 no-repeat; background-size:100% auto;}

.all_wrap {overflow:hidden;}

.section {height:100vh;}
.section .contents {height:100%; display:flex; align-items:center; justify-content:center;}

.section01 {position:relative;}
.section01 .contents {justify-content: flex-end;}
.bg_vod {width: 100%; position: absolute; top: 0; left: 0; bottom:0; right:0; overflow:hidden;}
.bg_vod video {min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.bg_vod .vod_link {transition:none; width: 100%; height: 100%; position: absolute; top:0; left:0; font-size:0; color:transparent; cursor:none;}
.section01 .bi_area {position:absolute; left:50%; bottom:144px; transform:translate(-50% , 0); z-index:1; width:55.6rem; max-width:80%;}
.section01 .bi_area .scroll {display:block; width:max-content; margin:4.8rem auto 0; font-size:11px; color:#77ffff; letter-spacing:0.03em; text-transform:uppercase;}
.section01 .bi_area .scroll:after {animation: scroll 1.5s steps(4) infinite; content:''; display:block; margin:1rem auto 0; width:3.6rem; height:4.2rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/promotion/img_scroll.png');}
.section01 .bi_area .scroll:hover:after {animation:none; background-position:0 100%;}

.section01.active .bi_area a {animation: fade-in 1s ease forwards;}
.section01.active .bi_area .scroll {animation: fade-in 1s 0.2s ease forwards;}

.section01 .login_wrap {min-width:476px; position:fixed; z-index:101; background:linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(34, 187, 187, 0.2)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding:5.2rem 4.8rem;}
.section01 .login_wrap:before {z-index:-1; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/promotion/ptn02.png') 0 0 repeat; opacity:0.03;}
.section01 .login_wrap:after {content:''; display:block; position:absolute; right:1.2rem; bottom:-2.4rem; width:9.6rem; height:1.2rem; background:url('/images/common/event/promotion/obj_bar_b.png') 0 0 no-repeat; background-size:100% auto;}
.section01 .btn_login_close {cursor:pointer; position:absolute; top:2.4rem; right:2.4rem; width:48px; height:48px; font-size:0; color:transparent; background-color:rgba(255, 255, 255, 0); background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/promotion/btn_close02.png'); background-size:100% auto;}
.section01 .btn_login_close:hover {background-position:0 100%;}

.section01 .login_wrap .con {max-width:384px; width:100%;}
.section01 .login_wrap .con .tit {position:relative; width: max-content; margin:0 auto; font-size:34px; padding-bottom:1.5rem; font-weight:900; text-transform:uppercase; color:#fff; letter-spacing:0; text-shadow:-1px 0 0 #ddcc77, 1px 0 0 #4477ff, 0 1px 3rem rgba(119, 255, 255, 0.4);}
.section01 .login_wrap .con .tit:after {content:''; display:block; position:absolute; left:0; right:0; bottom:0; height:1.2rem; background:url('/images/common/event/promotion/bar_ptn.png') 0 center repeat-x; background-size:auto 100%;}
.section01 .login_wrap .join {padding:10px 150px 10px 18px; text-align:left; position:relative; margin:3.2rem auto 2.4rem; background:linear-gradient(to right, rgba(153, 255, 255, 0.2) , rgba(255, 255, 255, 0)); font-size:14px; color:#fff; font-weight:500; letter-spacing:0; text-transform:uppercase;}
.section01 .login_wrap .join font {color:#99ffff;}
.section01 .login_wrap .join .btn_regi {position:absolute; top:0; right:0; bottom:0; width:144px;}
.section01 .login_wrap .input_list li {position:relative; margin-bottom:1.2rem; padding:0.4rem; background:linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(119, 255, 255, 0.1)); border:0.2rem solid rgba(255, 255, 255, 0); border-top-color: rgba(255, 255, 255, 0.4); border-bottom-color:#77ffff;}
.section01 .login_wrap .input_list li:before, .section01 .login_wrap .input_list li:after {content:''; display:block; width:0.2rem; position:absolute; top:-0.2rem; bottom:-0.2rem; background:url('/images/common/event/promotion/bg_lg_t.png') 0 0.2rem no-repeat , url('/images/common/event/promotion/bg_lg_m.png') 0 center no-repeat, url('/images/common/event/promotion/bg_lg_b.png') 0 bottom no-repeat;}
.section01 .login_wrap .input_list li:before {left:-0.2rem;}
.section01 .login_wrap .input_list li:after {right:-0.2rem;}
.section01 .login_wrap .input_list li input {font-size:19px; width:100%; height:52px; background:rgba(119, 255, 255, 0.2); padding:0 2.4rem; color:#ffff88; font-variation-settings : var(--regular); font-family:var(--man); text-shadow:0 0 2px rgba(0, 0, 0, 0.4);}
.section01 .login_wrap .input_list li input::placeholder {font-size:17px; font-weight:600; color:#fff; font-family:var(--gre); text-transform:uppercase; text-shadow:-1px 0 0 #ddcc77, 1px 0 0 #4477ff, 0 1px 2rem rgba(119, 255, 255, 0.2); letter-spacing: 0.06rem;}
.section01 .login_wrap .input_list li input:focus {outline:none; color:#ffff88;}
.section01 .login_wrap .input_list li:focus-within { background:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(255, 255, 136, 0.2)) , rgba(0, 0, 0, 0.5); border-bottom-color:#ffff88; border-top-color:#fff;}
.section01 .login_wrap .input_list li:focus-within:before, .section01 .login_wrap .input_list li:focus-within:after {background:url('/images/common/event/promotion/bg_lg_tw.jpg') 0 0 no-repeat , url('/images/common/event/promotion/bg_lg_m.png') 0 center no-repeat, url('/images/common/event/promotion/bg_lg_ty.jpg') 0 bottom no-repeat;}
.section01 .login_wrap .input_list li input:-webkit-autofill, .section01 .login_wrap .input_list li input:-webkit-autofill:hover, .section01 .login_wrap .input_list li input:-webkit-autofill:focus, .section01 .login_wrap .input_list li input:-webkit-autofill:active {-webkit-box-shadow: 0 0 0 1000px rgba(119, 255, 255, 0.2) inset; box-shadow: 0 0 0 1000px rgba(119, 255, 255, 0.2) inset; -webkit-text-fill-color: #ffff88; caret-color: #ffff88; color:#ffff88; transition: background-color 9999s ease-out 0s;}
.section01 .login_wrap .input_list li .pw_show {position:absolute; top:50%; right:2.8rem; width:24px; margin-top:-9px; cursor:pointer; height:18px; background-color:rgba(255, 255, 255, 0); background-position:0 0; background-repeat:no-repeat; background-image:url('/images/common/event/promotion/pwd_eye.png');}
.section01 .login_wrap .input_list li .pw_show:hover {background-position:0 100%;}
.section01 .login_wrap .input_list li .pw_show.off {background-position:0 100%;}
.section01 .login_wrap .input_list li .pw_show.off:hover {background-position:0 0;}
.section01 .login_wrap .input_list li input[type=password] {padding-right:56px;}
.captcha > div {text-align:left;}
.captcha > div > div {position: relative; left: 50%; transform: translate(-50% , 0); display: inline-block;}
.section01 .login_wrap .btn_login {margin-top:2.4rem; width:calc(100% - 0.8rem); height:7.2rem;}
.section01 .login_wrap .btn_login span {justify-content:center;}
.section01 .login_wrap .btn_login span:after {display:none;}
.section01 .login_wrap .btn_login span:before {background:none; box-shadow:inset 0 0 0 1px #77ffff; top:-0.4rem; bottom:-0.4rem; left:-0.4rem; right:-0.4rem; opacity:1;}
.section01 .login_wrap .btn_login span font {position:static; justify-content: center;}
.section01 .login_wrap .btn_login span font:after {position:absolute; top:50%; right:17px; margin-top:-12px;}
.section01 .login_wrap .btn_login:hover {width:100%;}
.section01 .login_wrap .btn_login span:hover:before { background: url(/images/common/event/promotion/ptn03.png) center center repeat; opacity:0.3; top:0; bottom:0; left:0; right:0;}
.section01 .login_wrap .forget {margin-top:3rem; background:url('/images/common/event/promotion/obj_arr.png') 0 center no-repeat;}
.section01 .login_wrap .forget a {font-variation-settings : var(--light); font-family:var(--man); font-size:17px; color:#fff; letter-spacing:0.02em; text-shadow:1px 0 0 #4477ff, -1px 0 0 #ddcc77, 0 1px 2rem rgba(119, 255, 255, 0.2);}
.section01 .login_wrap .forget a:hover span {color:#ffff88;}
.section01 .vod_info {font-size:16px; color:#77ffff; font-variation-settings : var(--light); font-family:var(--man); letter-spacing:0.01em; padding-left:18px; position:absolute; left:2.4rem; bottom:9.6rem; text-align:left;}
.section01 .vod_info:before {width:10px; height:12px; content:''; display:block; position:absolute; left:0; top:2px; background:url('/images/common/event/promotion/icon_vod_info.png') no-repeat center / 100% auto;}

.section02 .map_slide {width:100%; height:100%;}
.section02 .map_slide ul {width:100%; height:100%;}
.section02 .map_slide ul li {width:25%; height:100%; display:inline-block;}
.section02 .map_slide ul li a {z-index:1; display:flex; position:relative;width:100%; height:100%; align-items:center; justify-content:center; background-repeat:no-repeat; background-position:center center; background-size:cover; padding-bottom:26.25%;}
.section02 .map_slide ul li a:before, .section02 .map_slide ul li a:after {transition:all ease-in-out 0.2s; z-index:-1; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; opacity:1;}
.section02 .map_slide ul li a:before {background:rgba(0, 0, 0, 0.5);}
.section02 .map_slide ul li a:after {background:url('/images/common/event/promotion/ptn02.png') 0 0 repeat; opacity:0.1;}
.section02 .map_slide ul li.map01 a {background-image:url('/images/common/event/promotion/map_burnignhall.jpg');}
.section02 .map_slide ul li.map02 a {background-image:url('/images/common/event/promotion/map_luxville.jpg');}
.section02 .map_slide ul li.map03 a {background-image:url('/images/common/event/promotion/map_midtown.jpg');}
.section02 .map_slide ul li.map04 a {background-image:url('/images/common/event/promotion/map_downtown.jpg');}
.section02 .map_slide ul li a > span {text-transform:uppercase; font-size:52px; color:#fff; font-weight:700; text-shadow:1px 0 0 #0088ff, -1px 0 0 #ff8888, 0 0 1px rgba(255, 255, 255, 0.2); position:relative; text-align:right;}
.section02 .map_slide ul li a > span:before {content:''; display:block; position:absolute; bottom:0; left:-2.4rem; width:8.4rem; height:1.2rem; background:url('/images/common/event/promotion/bar_ptn.png') 0 0 no-repeat; background-size:auto 100%;}
.section02 .map_slide ul li a > span font {color:#77ffff; font-size:11px; font-weight:500; letter-spacing:0.2em; display:block; text-shadow:none;}
.section02 .map_slide ul li a > span font:before, .section02 .map_slide ul li a > span font:after {content:''; display:inline-block; vertical-align:middle; height:1.2rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.section02 .map_slide ul li a > span font:before {width:3rem; background-image:url('/images/common/event/promotion/obj_click_l.png'); margin-right:0.8rem;}
.section02 .map_slide ul li a > span font:after {width:4.8rem; background-image:url('/images/common/event/promotion/obj_click_r.png'); margin-left:1.2rem;}
.section02 .map_slide ul li a p {transition: all ease-in-out 0.2s; opacity:1; display:block; position:absolute; bottom:22.5%; left:50%; transform:translate(-50% , 0);}
.section02 .map_slide ul li a p font {padding:1rem; position:relative; display:block; min-width:13.2rem; font-size:11px; color:#92ffff; letter-spacing:0.2em; font-weight:500; text-transform:uppercase; margin-top:3rem; border-top:0.2rem solid #77ffff;}
.section02 .map_slide ul li a p font:before, .section02 .map_slide ul li a p font:after {content:''; display:block; position:absolute; top:-0.6rem; width:0.2rem; height:0.6rem; background:#77ffff;}
.section02 .map_slide ul li a p font:before {left:0;}
.section02 .map_slide ul li a p font:after {right:0;}
.section02 .map_slide ul li a:hover:before, .section02 .map_slide ul li a:hover:after {opacity:0;}
.section02 .map_slide ul li a:hover > span {font-size:11px; color:#ffee66; letter-spacing:0.2em; position:absolute; bottom:120px; right:2.4rem; padding-right:3rem;}
.section02 .map_slide ul li a:hover > span:before {width:1.2rem; height:4.8rem; background:url('/images/common/event/promotion/obj_item.png') 0 0 no-repeat; background-size:100% auto; bottom: 2px; right: 0; left: auto;}
.section02 .map_slide ul li a:hover > span font {display:none;}
.section02 .map_slide ul li a:hover p {opacity:0;}
.section .text .dud {opacity: 0.6; border:none !important; text-decoration:none !important;}

.section03 {background:url('/images/common/event/promotion/bg03.jpg') center center no-repeat; background-size:cover; position:relative;}
.section03 .hidden {display:none; width: 100%; height: 100%; background: #000; opacity: 0.4; position: absolute; left: 0; top: 0; right:0; bottom:0; z-index: 2;}
.section03 .weapon_wrap {width:100%; height:100%; position:relative;}
.section03 .weapon_wrap .weapon_thum {position:absolute; z-index:2; padding-left:5.6%; left:0; top:9.8%; bottom:17.6%; width:20%;}
.section03 .weapon_wrap .weapon_thum:before {content:''; display:block; position:absolute; top:0; left:32%; width:0.6rem; height:4.8rem; background:url('/images/common/event/promotion/obj_bar_b03.png') 0 0 no-repeat; background-size:100% auto;}
.section03 .weapon_wrap .weapon_thum ul {overflow:auto; max-height:100%; direction:rtl; padding-left: 21%; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;}
.section03 .weapon_wrap .weapon_thum ul::-webkit-scrollbar {width: 1.2rem;}
.section03 .weapon_wrap .weapon_thum ul::-webkit-scrollbar-track {background:rgba(0, 0, 0, 0.2); border:1px solid #77ffff;}
.section03 .weapon_wrap .weapon_thum ul::-webkit-scrollbar-thumb { background:#77ffff; box-shadow:inset 0 0 0 1px #00ccff, 0 0 2rem rgba(119, 255, 255, 0.5); border: 0.2rem solid transparent; background-clip: content-box;}
.section03 .weapon_wrap .weapon_thum ul li {direction:ltr; margin-bottom:2.4rem;}
.section03 .weapon_wrap .weapon_thum ul li:last-child {margin-bottom:0;}
.section03 .weapon_wrap .weapon_thum li a {display:block; max-width:24rem; position:relative; text-align:left;}
.section03 .weapon_wrap .weapon_thum li a span {height:24px; margin-left:0.8rem; border:1px solid #888c8d; box-shadow:inset 0 0 0 1px #424649 , 0 1px 2px #000; background:url('/images/common/event/promotion/dot_g01.jpg') 3px 3px no-repeat , url('/images/common/event/promotion/dot_g02.jpg') right 3px top 3px no-repeat, url('/images/common/event/promotion/dot_g03.jpg') left 3px bottom 3px no-repeat, url('/images/common/event/promotion/dot_g04.jpg') right 3px bottom 3px no-repeat; background-color:#000000; display:inline-flex; text-transform:uppercase; font-size:14px; color:#77ddff; letter-spacing:0.06em; justify-content:center; align-items:center; padding:2px 1.2rem 0; border-radius:4px; font-weight: 600;}
.section03 .weapon_wrap .weapon_thum li a span:before {bottom:2px; left:0; content:''; display:block; position:absolute; width: 100%; height: 85.72%; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/promotion/wp_line.png');}
.section03 .weapon_wrap .weapon_thum li a:hover span {color:#ffff33; border-color:#ffff33; box-shadow:inset 0 0 0 1px #ffff33, 0 1px 2px #000; background:url('/images/common/event/promotion/dot_y.jpg') 3px 3px no-repeat , url('/images/common/event/promotion/dot_y.jpg') right 3px top 3px no-repeat, url('/images/common/event/promotion/dot_y.jpg') left 3px bottom 3px no-repeat, url('/images/common/event/promotion/dot_y.jpg') right 3px bottom 3px no-repeat;}
.section03 .weapon_wrap .weapon_thum li a:hover span:before {background-image:url('/images/common/event/promotion/wp_line_on.png');}
.section03 .weapon_wrap .weapon_thum li.on a span:before {background-image:url('/images/common/event/promotion/wp_line_on.png');}
.section03 .weapon_wrap .weapon_thum li.on a span {color:#ffff33; border-color:#ffff33; box-shadow:inset 0 0 0 1px #ffff33, 0 1px 2px #000; background:url('/images/common/event/promotion/dot_y.jpg') 3px 3px no-repeat , url('/images/common/event/promotion/dot_y.jpg') right 3px top 3px no-repeat, url('/images/common/event/promotion/dot_y.jpg') left 3px bottom 3px no-repeat, url('/images/common/event/promotion/dot_y.jpg') right 3px bottom 3px no-repeat;}
.active .weapon_wrap .weapon_thum ul li {animation: fade-in 1s ease forwards;}

.section03 .weapon_wrap .list_wrap {max-width:58%; width:100%; margin:0 auto; position:relative; height:100%; left:-4%;}
.section03 .weapon_wrap .list { position:relative; height:100%;}
.section03 .weapon_wrap .list > li {display:none; height:100%; padding-bottom:72px;}
.section03 .weapon_wrap .list > li.on {display:block;}

.section03 .weapon_wrap .wrap {width:100%; margin:0 auto; position:relative; transform: translate(0, -50%); top: 50%; left: 3%;}
.section03 .weapon_wrap .wrap:before {content:''; display:block; position:absolute; width:13.2rem; height:4rem; left:54%; bottom:1.2rem; margin-left:-6.6rem; background:url('/images/common/event/promotion/img360.png') 0 0 no-repeat; background-size:100% auto; z-index: 3;}
.section03 .weapon_wrap .wrap:after {content:''; display:block; padding-bottom:61.158%;}
.section03 .weapon_wrap .box_3d {width:100%; height:100%; position:absolute; top:0; left:0; z-index:1;}
.section03 .weapon_wrap .box_3d canvas {width:100% !important; height:100% !important; cursor: pointer;}
.section03 .weapon_wrap .con {position:absolute; right:0; top:14%; bottom:20.5%; text-align:left; transform:translate(100% , 0); width:40%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding-right: 4.2%;}
.section03 .weapon_wrap .con .desc {flex:1; padding-bottom:8.75%; display:flex; flex-direction:column; justify-content:flex-start;}
.section03 .weapon_wrap .con .stat {flex-shrink:0;}
.section03 .weapon_wrap .con .desc .name {display:inline-block; text-align:left; position:relative; margin:4rem 0 0; font-size:52px; font-weight:800; color:#fff; line-height:1.15; text-shadow:-1px 0 0 #0088ff, 1px 0 0 #ff8888, 0 0 1px rgba(255, 255, 255, 0.2); text-transform:uppercase;}
.section03 .weapon_wrap .con .desc .name:before {content:''; display:block; position:absolute; left:0; right:-2.3rem; top:0; bottom:-3.6rem; background:url('/images/common/event/promotion/obj_stit_b01.png') left 0 bottom 2rem no-repeat , url('/images/common/event/promotion/obj_stit_b02.png') right 0 bottom 0 no-repeat;}
.section03 .weapon_wrap .con .desc .name span {margin-bottom:1rem; position:relative; max-height:4.8rem; display:flex; align-items:center; justify-content:center; width: max-content; color:#000000; padding:5px 1.2rem 0; background: #fff;}
.section03 .weapon_wrap .con .desc .name span:before, .section03 .weapon_wrap .con .desc .name span:after {content:''; display:block; position:absolute;}
.section03 .weapon_wrap .con .desc .name span:before {top:-1.2rem; left:-2.7rem; bottom:0; right:-2rem; background:url('/images/common/event/promotion/obj_stit_l.png') 0 bottom no-repeat , url('/images/common/event/promotion/obj_stit_r.png') right bottom no-repeat;}
.section03 .weapon_wrap .con .desc .name span:after {width:calc(100% + 6px); height: 100%; top:0; left: -3px; background:url('/images/common/event/promotion/bg_stit_l.jpg') 0 center no-repeat , url('/images/common/event/promotion/bg_stit_r.jpg') right center no-repeat;}
.section03 .weapon_wrap .con .desc .txt {text-align:left; margin-top:5.5rem; font-family:var(--man); font-variation-settings : var(--regular); color:#fff; font-size:17px; line-height:1.5;}

.section03 .weapon_wrap .list > li:nth-child(13) .con .desc .name {font-size: 42px;}

.active .weapon_wrap .box_3d {animation: fade-in 1s ease forwards;}

.stat {width:100%; max-width:396px; max-height:300px; /*height:53%;*/ display:flex; align-items:flex-start; justify-content:center; position:relative; z-index: 1; padding:7% 6.56%; border-top:1px solid rgba(119, 255, 255, 0.4); border-left:1px solid #214246; border-right:1px solid #1c3d40; border-bottom:1px solid #1c5f62; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(119, 255, 255, 0.05)) ,rgba(119, 255, 255, 0.05); box-shadow:inset 0 0 20rem rgba(0, 170, 255, 0.1), 0 2rem 2rem rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(2rem); backdrop-filter: blur(2rem);}
.stat:before {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/images/common/event/promotion/ptn04.png') center center no-repeat; opacity:0.15;}
.stat ul {position:relative; width:100%;}
.stat li {position:relative; font-size:0; text-align:left; margin-bottom:1.5rem;}
.stat li:last-child {margin-bottom:0;}
.stat li > div {display:inline-block; vertical-align:middle; text-transform:uppercase; text-align:left;}
.stat .txt {width:120px; padding-right:1.2rem; font-size:14px; color:#77ffff; letter-spacing:0.08em;}
.stat .num {width:70px; padding-left:1.2rem; text-align:right; font-size:14px; color:#ffff33; letter-spacing: 0.08em;}
.stat .num font {color:#77ffff;}
.stat .graph {width:calc(100% - 190px); height:1.2rem; position:relative;}
.stat li .bar {width:100%; height:100%; position:relative;}
.stat li .bar .on {height:100%; display:block; position:relative; font-size:0; opacity:0; background: linear-gradient(to right, #77ffff, #ffee33);}
.stat li.no_graph {display:flex; align-items:center; justify-content:space-between;}
.stat li.no_graph .num {width:auto;}

.active .weapon_wrap .con .desc .name {animation: fade-in 1s ease forwards;}
.active .weapon_wrap .con .desc .txt {animation: fade-in 1s 0.2s ease forwards;}
.active .weapon_wrap .con .stat {animation: fade-in 1s ease forwards;}

.active .stat li .bar .on {animation: animate-width cubic-bezier(0.35, 0.95, 0.67, 0.99) 0.4s forwards;}
.active .stat li:nth-child(2) .bar .on {animation-delay:0.1s;}
.active .stat li:nth-child(3) .bar .on {animation-delay:0.2s;}
.active .stat li:nth-child(4) .bar .on {animation-delay:0.3s;}
.active .stat li:nth-child(5) .bar .on {animation-delay:0.4s;}
.active .stat li:nth-child(6) .bar .on {animation-delay:0.5s;}
.active .stat li:nth-child(7) .bar .on {animation-delay:0.6s;}
.active .stat li:nth-child(8) .bar .on {animation-delay:0.7s;}

.section04 {position:relative;}
.section04 .sort {position:absolute; left:7.2rem; top:50%; transform:translate(0 , -50%);}
.section04 .sort .m_sort {font-size:22px; position:relative; color:#000000; text-shadow:1px 0 0 #55aaaa, -1px 0 0 #ffccff; font-weight:900; letter-spacing:0.04em; width:36rem;}
.section04 .sort .m_sort:after {content:''; display:block; padding-bottom:20%;}
.section04 .sort .m_sort span {text-transform:uppercase; padding-left:4.8rem; position:absolute; top:0; bottom:0; left:0; right:0; display:flex; width:100%; height:100%; align-items:center; justify-content:flex-start;}
.section04 .sort .m_sort span:before {top:0; left:0; content:''; display:block; position:absolute; width:100%; height:100%; background-image:url('/images/common/event/promotion/bg_sort_on.png'); z-index:-1; background-position:0 0; background-size:100% auto; background-repeat:no-repeat;}
.section04 .sort .m_sort:hover:before {transform:scale(1); opacity:0.5;}
.section04 .sort .m_sort {display:none;}

.section04 .sort li {margin-bottom:1.2rem; position:relative; width:36rem; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);}
.section04 .sort li:after {content:''; display:block; padding-bottom:20%;}
.section04 .sort li:last-child {margin-bottom:0;}
.section04 .sort li a {position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; transition:all ease-in-out 0.2s; font-size:22px; background: rgba(255, 255, 255, 0.2); font-weight:700; color:#77ffff; text-transform:uppercase; letter-spacing:0.06em; text-shadow:-1px 0 0 #55aaff, 1px 0 0 #ffbbff, 0 1px 1rem rgba(102, 170, 255, 0.5); display:block; width:100%;}
.section04 .sort li a:after {transition:all ease-in-out 0.2s; content:''; display:block; position:absolute; left:0; top:0; bottom:0; width:0.6rem; background:#99ffff;}
.section04 .sort li a:before {transition:all ease-in-out 0.3s; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background-position:center center; background-size:cover; background-repeat:no-repeat; opacity:0.5;}
.section04 .sort li a span {transition:all ease-in-out 0.2s; z-index:1; position:relative; display:flex; align-items:center; justify-content:flex-start; width:100%; height:100%; padding-left:3.6rem; padding-top: 0.4rem;}
.section04 .sort li a span:before {content:''; display:block; position:absolute; bottom:0; right:0; width:8.4rem; height:6rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/promotion/btn_sort.png'); background-size:100% auto;}

.section04 .sort li a:hover {color:#fff; text-shadow:1px 0 0 #55aaaa, -1px 0 0 #ffccff, 0 1px 1rem rgba(255, 255, 255, 0.3);}
.section04 .sort li a:hover:before {opacity:1; transform:scale(1.1);}
.section04 .sort li a:hover:after {background:#ffff44;}
.section04 .sort li a:hover span:before {background-position:0 100%;}

.section04 .sort li.sort01 a:hover:before {background-image:url('/images/common/event/promotion/sort_normal.png');}
.section04 .sort li.sort02 a:hover:before {background-image:url('/images/common/event/promotion/sort_reinforce.png');}
.section04 .sort li.sort03 a:hover:before {background-image:url('/images/common/event/promotion/sort_idol.png');}
.section04 .sort li.sort04 a:hover:before {background-image:url('/images/common/event/promotion/sort_pass.png');}

.section04 .sort li.on {-webkit-backdrop-filter: none; backdrop-filter: none;}
.section04 .sort li.on a {color:#000000; text-shadow:1px 0 0 #55aaaa, -1px 0 0 #ffccff; font-weight:900; letter-spacing:0.04em; background: none;}
.section04 .sort li.on a span {padding-left:4.8rem;}
.section04 .sort li.on a span:before {width:100%; height:100%; background-image:url('/images/common/event/promotion/bg_sort_on.png'); z-index:-1;}
.section04 .sort li.on a:hover:before {transform:scale(1); opacity:0.5; background-image: none;}

.active .sort li.sort01 {animation: fade-in 1s ease forwards;}
.active .sort li.sort02 {animation: fade-in 1s 0.1s ease forwards;}
.active .sort li.sort03 {animation: fade-in 1s 0.2s ease forwards;}
.active .sort li.sort04 {animation: fade-in 1s 0.3s ease forwards;}

.section04 .tab_box {display:none; width:100%; height:100%; color:#fff;}
.section04 .tab_box .cha_sort {position:absolute; bottom:14.4rem; left:50%; transform:translate(-50% , 0); width: max-content;}
.section04 .tab_box01 {display:block;}

.section04 .cha_sort li {position:relative; display:inline-block; vertical-align:top; margin:0 6px;}
.section04 .cha_sort li:before {content:''; display:block; position:absolute; bottom:0; left:-0.8rem; z-index:3; width:5.6rem; height:0.6rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/promotion/cha_nav_obj.png');}
.section04 .cha_sort li a {transition:none; width:7.2rem; height:7.2rem; font-size:0; color:transparent; position:relative;}
.section04 .cha_sort li a:before {width:100%; height:100%; top:0; left:0; content:''; display:block; position:absolute; clip-path: polygon(2.4rem 0, 100% 0, 100% calc(100% - 2.4rem), calc(100% - 2.4rem) 100%, 0 100%, 0 2.4rem); background:#000000;}
.section04 .cha_sort li a:after {content:''; display:block; top:0; left:0; position:absolute; width:100%; height:100%; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/promotion/bg_cha_nav.png');}
.section04 .cha_sort li a span {clip-path: polygon(2.6rem 0, 100% 0, 100% calc(100% - 2.6rem), calc(100% - 2.6rem) 100%, 0 100%, 0 2.6rem); display:block; width:100%; height:100%; position:relative;}
.section04 .cha_sort li a span img {width: 156%; display: block; max-width: none; margin-left: -32%; margin-top: -18%;}

.section04 .cha_sort li.red a:after {background-image:url('/images/common/event/promotion/bg_cha_nav_red.png');}
.section04 .cha_sort li.red:before {background-position:0 100%; background-image:url('/images/common/event/promotion/cha_nav_obj_red.png');}

.section04 .cha_sort li:hover:before {background-position:0 50%;}
.section04 .cha_sort li:hover a:after {background-position:0 50%;}
.section04 .cha_sort li:hover a span img {margin-left:-26%;}
.section04 .cha_sort li.act a:after {background-position:0 100%;}
.section04 .cha_sort li.act a:before {background:#77aaff;}
.section04 .cha_sort li.red.act a:before {background:#ff8888;}
.section04 .cha_sort li.act a span {clip-path: polygon(100% -16px, 100% calc(100% - 2.6rem), calc(100% - 2.6rem) 100%, -16px 100%, 0 0); z-index:2;}
.section04 .cha_sort li.act a span img {margin-top:-8px; max-width:100%; width:auto; margin-left:2px;}
.section04 .cha_sort > div {height:16px; padding-top:2px; bottom:-24px; border-right:0.2rem solid rgba(204, 119, 255, 0.5); border-left:0.2rem solid rgba(136, 255, 204, 0.5); background:rgba(102, 170, 255, 0.9); display:flex; align-items:center; justify-content:center; position:absolute; width:calc(50% - 12px); font-size:14px; color:#000000; font-weight:500; text-transform:uppercase; letter-spacing:0.04em; text-shadow:1px 0 0 rgba(204, 136, 0, 0.5) , -1px 0 0 rgba(136, 102, 255, 0.5) , 0 0 1px rgba(255, 255, 255, 0.2);}
.section04 .cha_sort > div.sort_blue {left:6px; color:#0022aa;}
.section04 .cha_sort > div.sort_red {color:#aa0000; right:6px; border-left:0.2rem solid rgba(255, 238, 0, 0.5); border-right:0.2rem solid rgba(204, 119, 255, 0.5); background:rgba(255, 136, 136, 0.9);}
.section04 .cha_sort > div span {color:#000000; margin-left:2px;}

.section04 .desc {display:none; width:100%; height:100%; color:#fff; background-position:center center; background-repeat:no-repeat; background-size:cover;}
.section04 .desc .inner {max-width:1992px; margin-left:auto; margin-right:auto; height:100%; padding:0 7rem; display:flex; align-items:center; justify-content:flex-end;}
.section04 .desc .info {min-height:354px; padding-bottom:6rem; background-repeat:no-repeat; background-position:right bottom; background-image:url('/images/common/event/promotion/obj_type_red.png');}
.section04 .desc .info .sort_s {margin-right: 0; margin-left: auto; display:flex; align-items:center; justify-content:center; font-weight:500; text-transform:uppercase; width:max-content; font-size:14px; letter-spacing:0.04em; color:#000000; background:#fff; padding:2px 1.2rem 0 2.4rem; height:18px;}
.section04 .desc .info .name {position:relative; padding-right:3rem; margin:1.2rem 0 2.4rem auto; font-size:86px; border-top:1px solid #000; font-weight:100; color:#000000; text-transform:uppercase; min-width:550px; max-width:100%; min-height:168px; display:flex; align-items:center; justify-content:flex-start;}
.section04 .desc .info .name:before, .section04 .desc .info .name:after {content:''; display:block; position:absolute;}
.section04 .desc .info .name:before {width:7.2rem; height:0.4rem; bottom:4px; left:0; background:#000;}
.section04 .desc .info .name span {text-align:left; line-height:0.93; border-bottom:1px solid #000; padding-right:3rem; position:relative;}
.section04 .desc .info .name span:before {content:''; display:block; position:absolute; bottom:1.2rem; right:0; width:0.6rem; height:1.2rem; background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 1px #000;}
.section04 .desc .info .name font {line-height: inherit;}
.section04 .desc .info .type {padding-left:3rem; line-height: 1; padding-bottom:2.4rem; color:#ffaaaa; font-size:22px; font-weight:300; letter-spacing:0.1em; text-transform:uppercase; width:26.4rem; height:6rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/promotion/bg_type_red.png'); display:flex; align-items:center; justify-content:flex-start;}
.section04 .desc .info .type font {color:#aaaaaa; margin-left:0.5rem;}

.active .desc .info .sort_s {animation: fade-in 1s ease forwards;}
.active .desc .info .name {animation: fade-in 1s 0.1s ease forwards;}
.active .desc .info .type {animation: fade-in 1s 0.2s ease forwards;}

.section04 .desc .info.wh .name {border-color:#fff; color:#fff;}
.section04 .desc .info.wh .name span {border-color:#fff;}
.section04 .desc .info.wh .name:before {background:#fff;}
.section04 .desc .info.wh .name span:before {background:rgba(255, 255, 255, 0.2); box-shadow:inset 0 0 0 1px #fff;}

.section04 .desc .info.blue .type {color:#aaccff; background-image: url(/images/common/event/promotion/bg_type_blue.png);}
.section04 .desc .info.blue {background-image:url('/images/common/event/promotion/obj_type_blue.png');}

.section04 .desc .info.blue.wh .type {background-image:url('/images/common/event/promotion/bg_type_blue_w.png');}
.section04 .desc .info.blue.wh {background-image:url('/images/common/event/promotion/obj_type_blue_w.png');}

.section04 .desc .info.red.wh .type {background-image:url('/images/common/event/promotion/bg_type_red_w.png');}
.section04 .desc .info.red.wh {background-image:url('/images/common/event/promotion/obj_type_red_w.png');}

.section04 .tab_box01 .desc .info .name {font-size:120px; min-height:108px;}
.section04 .tab_box01 .desc .info .name:before {bottom:0;}
.section04 .tab_box01 .desc .info .name span {line-height:0.9;}
.section04 .tab_box01 .desc01 {display:block; background-image:url('/images/common/event/promotion/nm01.jpg');}
.section04 .tab_box01 .desc02 {background-image:url('/images/common/event/promotion/nm02.jpg');}
.section04 .tab_box01 .desc03 {background-image:url('/images/common/event/promotion/nm03.jpg');}
.section04 .tab_box01 .desc04 {background-image:url('/images/common/event/promotion/nm04.jpg');}
.section04 .tab_box01 .desc05 {background-image:url('/images/common/event/promotion/nm05.jpg');}
.section04 .tab_box01 .desc06 {background-image:url('/images/common/event/promotion/nm06.jpg');}

.section04 .tab_box02 .desc01 {background-image:url('/images/common/event/promotion/rf01.jpg');}
.section04 .tab_box02 .desc02 {background-image:url('/images/common/event/promotion/rf02.jpg');}
.section04 .tab_box02 .desc03 {background-image:url('/images/common/event/promotion/rf03.jpg');}
.section04 .tab_box02 .desc04 {background-image:url('/images/common/event/promotion/rf04.jpg');}
.section04 .tab_box02 .desc05 {background-image:url('/images/common/event/promotion/rf05.jpg');}
.section04 .tab_box02 .desc06 {background-image:url('/images/common/event/promotion/rf06.jpg');}

.section04 .tab_box03 .desc01 {background-image:url('/images/common/event/promotion/idol01.jpg');}
.section04 .tab_box03 .desc02 {background-image:url('/images/common/event/promotion/idol02.jpg');}
.section04 .tab_box03 .desc03 {background-image:url('/images/common/event/promotion/idol03.jpg');}
.section04 .tab_box03 .desc04 {background-image:url('/images/common/event/promotion/idol04.jpg');}
.section04 .tab_box03 .desc05 {background-image:url('/images/common/event/promotion/idol05.jpg');}
.section04 .tab_box03 .desc06 {background-image:url('/images/common/event/promotion/idol06.jpg');}

.section04 .tab_box04 .desc01 {background-image:url('/images/common/event/promotion/sp01.jpg');}
.section04 .tab_box04 .desc02 {background-image:url('/images/common/event/promotion/sp02.jpg');}
.section04 .tab_box04 .desc03 {background-image:url('/images/common/event/promotion/sp03.jpg');}
.section04 .tab_box04 .desc04 {background-image:url('/images/common/event/promotion/sp04.jpg');}
.section04 .tab_box04 .desc05 {background-image:url('/images/common/event/promotion/sp05.jpg');}
.section04 .tab_box04 .desc06 {background-image:url('/images/common/event/promotion/sp06.jpg');}
.section04 .tab_box04 .desc06 .info .name:before {bottom:0;}

footer {width: 100%; padding:9rem 0 15rem; z-index: 3;}
footer > img {margin-bottom: 2rem;}
footer .footer {font-size: 16px; font-family:'Roboto'; color:#cccccc; font-weight:400; position: relative; z-index: 2; letter-spacing:0.02em;}
footer .footer .cs {text-transform: uppercase;}
footer .footer .cs > a {color:#ee2222; text-transform: uppercase; font-family:'Roboto';}
footer .footer .cs > a:hover {text-decoration: underline;}
footer .footer .copy {margin-top: 0.8rem; font-size:14px; color:#777777; letter-spacing:0.01em;}
footer .geo_credit {font-size:11px; color:#b7b7b7; letter-spacing:0.01em; font-family: 'Roboto';  text-transform: uppercase; margin-top:2.4rem;}
footer .geo_credit a {color:#fff; text-decoration: underline;}
footer .geo_credit a:hover {text-decoration: none;}

/* pop_up */
html {scrollbar-gutter: stable;}
body.scroll_lock {overflow:hidden;}
.dimmed {display:none; width: 100%; height: 100%; background:rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); position: fixed; left: 0; top: 0; z-index: 103;}
.pop_up {display:none; left:0; top:0; bottom:0; right:0; position: fixed; z-index:100;}
.pop_up .pop-layout {position:relative; height:100%;}
.pop_up .pop-layout > h2 {letter-spacing:0.01rem; position:relative; color:#fff; font-size:20px; font-weight:700; padding:1.7rem; background:#689aff; top: -1px;}
.pop_up .pop_close {z-index:2; font-size:0; color:transparent; position:absolute; border-radius:50%; top:4.8rem; right:4.8rem; width:7.2rem; height:7.2rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/promotion/pop_close.png'); background-size:100% auto;}
.pop_up .pop_close:hover {background-position:0 100%;}

.pop_map {background:rgba(0, 0, 0, 0.7);}
.pop_map .list {width:100%; height:100%;}
.pop_map .list .slick-list {width:100%; height:100%;}
.pop_map .list .slick-list .slick-track {width:100%; height:100%;}
.pop_map .list .slick-list .slick-track > li {width:100%; height:100%;}
.pop_map .pop-layout {width:100%; position:relative;}
.pop_map .pop-layout:before {z-index:1; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('/images/common/event/promotion/shd_map.png') center center no-repeat; background-size:cover;}
.pop_map .pop-con {width:100%; height:100%;}
.pop_map .slick-arrow {position:absolute;}
.pop_map h3 {text-align:left; z-index:2; position:absolute; padding-left:12rem; top:4.8rem; left:4.8rem; font-size:25px; color:#bbffff; letter-spacing:0.06em; text-transform:uppercase; font-weight:800; text-shadow:1px 0 0 #0088ff, -1px 0 0 #ff8888, 0 1px 1rem rgba(102, 170, 255, 0.3);}
.pop_map h3:before {left:0; top:50%; margin-top:-3.6rem; content:''; display:block; position:absolute; width:9.6rem; height:7.2rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.pop_map h3 span:before {content:''; display:block; position:absolute; top:3px; right:-2.6rem; width:0.6rem; height:1.2rem; background:rgba(119, 255, 255, 0.2); box-shadow:inset 0 0 0 1px #77ffff;}
.pop_map h3 span:after {content:''; display:block; position:absolute; bottom:0; right:-12rem; width:8.4rem; height:1.2rem; background:url('/images/common/event/promotion/bar_ptn.png') 0 0 no-repeat; margin-top:1.2rem; background-size: auto 100%;}
.pop_map h3 font {text-align:left; display:block; font-size:11px; font-weight:500; letter-spacing:0.2em; text-shadow:none; margin-top:0.6rem;}
.pop_map .map01 h3:before {background-image:url('/images/common/event/promotion/icon_death_match.png');}
.pop_map .map02 h3:before {background-image:url('/images/common/event/promotion/icon_bomb_mission.png');}
.pop_map .map03 h3:before {background-image:url('/images/common/event/promotion/icon_bomb_mission.png');}
.pop_map .map04 h3:before {background-image:url('/images/common/event/promotion/icon_bomb_mission.png');}

.pop_map .btn_pop_arr {cursor:pointer; position:absolute; top:50%; margin-top:-4.8rem; background:none; display:block; z-index:99; border:none; font-size:0; color:transparent;}
.pop_map .btn_pop_arr:before {content:''; display:inline-block; width:5.6rem; height:9.6rem; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/promotion/pop_arr.png'); background-repeat:no-repeat; background-color:rgba(255, 255, 255, 0); background-position:0 0;}
.pop_map .btn_pop_l {left:4.8rem;}
.pop_map .btn_pop_r {right:4.8rem;}
.pop_map .btn_pop_r:before {transform:scaleX(-1);}
.pop_map .btn_pop_r span {right:auto; left:-6rem; transform:rotate(90deg);}
.pop_map .btn_pop_arr.slick-disabled {display:none !important;}
.pop_map .btn_pop_arr:hover:before {background-position:0 100%;}
.pop_map .btn_pop_arr:hover span {color:#ffee66;}

.pop_map .map_sort {position:absolute; z-index:2; bottom:14.4rem; left:0; right:0;}
.pop_map .map_sort li {position:relative; display:inline-block; vertical-align:top; margin:0 1.2rem;}
.pop_map .map_sort li:before {content:''; display:block; position:absolute; bottom:0.4rem; left:-0.8rem; z-index:3; width:11.2rem; height:0.6rem; background-repeat:no-repeat; background-position:0 0; background-image:url('/images/common/event/promotion/map_nav_obj.png');}
.pop_map .map_sort li a {transition:none; width:12.8rem; height:7.2rem; font-size:0; color:transparent; position:relative;}
.pop_map .map_sort li a:before {width:100%; height:100%; top:0; left:0; content:''; display:block; position:absolute; clip-path: polygon(2.4rem 0, 100% 0, 100% calc(100% - 2.4rem), calc(100% - 2.4rem) 100%, 0 100%, 0 2.4rem); background:#000000;}
.pop_map .map_sort li a:after {content:''; display:block; top:0; left:0; position:absolute; width:100%; height:100%; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; background-image:url('/images/common/event/promotion/bg_map_nav.png');}
.pop_map .map_sort li a span {clip-path: polygon(2.6rem 0, 100% 0, 100% calc(100% - 2.6rem), calc(100% - 2.6rem) 100%, 0 100%, 0 2.6rem); display:block; width:100%; height:100%; position:relative;}
.pop_map .map_sort li a span img {display: block; height: 100%; max-width: none; left: 50%; position: absolute; transform: translate(-50%, 0);}
.pop_map .map_sort li:first-child a span img {height:120%;}

.pop_map .map_sort li:hover:before {background-position:0 50%;}
.pop_map .map_sort li:hover a:after {background-position:0 50%;}
.pop_map .map_sort li.on a:after {background-position:0 100%;}
.pop_map .map_sort li.on:before {background-position:0 100%;}

.pop_map .slick-slide .map_area {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; visibility:hidden; transition:opacity 0.4s ease, visibility 0.4s ease;}
.pop_map .slick-slide.slick-active .map_area.active {opacity:1; visibility:visible;}

.pop_map .map_area {width:100%; height:100%; color:#fff; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; top:0; left:0;}

.pop_map .map01 .map_area01 {background-image:url('/images/common/event/promotion/map_bh01.jpg');}
.pop_map .map01 .map_area02 {background-image:url('/images/common/event/promotion/map_bh02.jpg');}
.pop_map .map01 .map_area03 {background-image:url('/images/common/event/promotion/map_bh03.jpg');}
.pop_map .map01 .map_area04 {background-image:url('/images/common/event/promotion/map_bh04.jpg');}

.pop_map .map02 .map_area01 {background-image:url('/images/common/event/promotion/map_lx01.jpg');}
.pop_map .map02 .map_area02 {background-image:url('/images/common/event/promotion/map_lx02.jpg');}
.pop_map .map02 .map_area03 {background-image:url('/images/common/event/promotion/map_lx03.jpg');}
.pop_map .map02 .map_area04 {background-image:url('/images/common/event/promotion/map_lx04.jpg');}

.pop_map .map03 .map_area01 {background-image:url('/images/common/event/promotion/map_md01.jpg');}
.pop_map .map03 .map_area02 {background-image:url('/images/common/event/promotion/map_md02.jpg');}
.pop_map .map03 .map_area03 {background-image:url('/images/common/event/promotion/map_md03.jpg');}
.pop_map .map03 .map_area04 {background-image:url('/images/common/event/promotion/map_md04.jpg');}

.pop_map .map04 .map_area01 {background-image:url('/images/common/event/promotion/map_dt01.jpg');}
.pop_map .map04 .map_area02 {background-image:url('/images/common/event/promotion/map_dt02.jpg');}
.pop_map .map04 .map_area03 {background-image:url('/images/common/event/promotion/map_dt03.jpg');}
.pop_map .map04 .map_area04 {background-image:url('/images/common/event/promotion/map_dt04.jpg');}

.pop_video {z-index:103;}
.pop_video .pop-layout {height:auto; left:50%; top:50%; width:100%; transform:translate(-50%, -50%); position: fixed; z-index:100; max-width:1224px; padding:1.2rem; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background:url('/images/common/event/promotion/ptn_noise.png') 0 0 repeat, rgba(255, 255, 255, 0.1);}
.pop_video .video_wrap {position:relative; width:100%;}
.pop_video .video_wrap:after {content:''; display:block; padding-bottom:56.25%;}
.pop_video .video_wrap .video {overflow: hidden; position: absolute; top:0; bottom:0; left:0; right:0;}
.pop_video .video_wrap .video iframe {position: absolute; top:0; left: 0; width:100% !important; height:100% !important;}

@media screen and (max-width: 2000px) {
.section03 .weapon_wrap .con {padding-right: 7%;}
.section03 .weapon_wrap .con .desc .name {font-size:40px}
.section03 .weapon_wrap .list > li:nth-child(13) .con .desc .name {font-size: 36px;}
}

@media screen and (max-width: 1700px) {
.section02 .map_slide ul li a > span {font-size:42px;}
.section02 .map_slide ul li a > span:before {display:none;}
.section02 .map_slide ul li a:hover > span:before {display:block;}
.section02 .map_slide ul li a > span {text-align:center;}

.section03 .weapon_wrap .weapon_thum {padding-left:3.6rem;}
.section03 .weapon_wrap .weapon_thum:before {left:5.6rem;}
.section03 .weapon_wrap .weapon_thum ul {padding-left:15%;}
.section03 .weapon_wrap .weapon_thum li a span {font-size:12px; padding-top:2px;}
.section03 .weapon_wrap .con {padding-right:2%;}
.section03 .weapon_wrap .con .desc .name {font-size:32px;}
.section03 .weapon_wrap .con .desc .txt {font-size:15px; margin-top:4.5rem;}
.section03 .weapon_wrap .list > li:nth-child(13) .con .desc .name {font-size: 24px;}

.stat {max-height:265px;}
.stat .txt {width:100px; font-size:13px;}
.stat .num {width:60px; font-size:13px;}
.stat .graph {width: calc(100% - 160px);}
.stat li {margin-bottom: 1.15rem;}

.section04 .desc .inner {padding:0 4.8rem;}
.section04 .sort {left:4.8rem;}
.section04 .desc .info .name {font-size:64px; min-width:420px; min-height: 0;}
.section04 .desc .info .name:before {bottom:0;}
.section04 .tab_box01 .desc .info .name {font-size:86px; min-height: 0;}

.pop_map .btn_pop_l {left:2.4rem;}
.pop_map .btn_pop_r {right:2.4rem;}
}

@media screen and (max-width: 1500px) {
.section03 .weapon_wrap .item span {font-weight:700; font-size:14px; padding-top:8px;}
.section04 .tab_box04 .desc06 .info .name {padding-right:0;}
.section04 .tab_box04 .desc06 .info .name span {padding-right:0;}

.pop_video .pop-layout {width: 60%;}
}

@media screen and (max-width: 1320px) {
.section02 .map_slide ul li a > span {font-size:30px;}
.section02 .map_slide ul li a p img {max-width:6.8rem;}
.section02 .map_slide ul li a p font {margin-top:2rem;}

.section03 .weapon_wrap .con {bottom:20%;}
.section03 .weapon_wrap .con .desc .name {font-size:24px;}
.section03 .weapon_wrap .con .desc .name span {height:3rem;}
.stat {max-height: 240px;}
.stat .txt {width:80px;font-size: 12px;}
.stat .num {width:56px; font-size:12px;}
.stat .graph {width: calc(100% - 136px);}

.section04 .sort {left:2.4rem;}
.section04 .desc .inner {padding:0 2.4rem;}
.section04 .sort li {width:25rem;}
.section04 .sort li a {font-size:18px;}
.section04 .sort li a span {padding-left:2.4rem;}
.section04 .sort li a span:before {width:5.6rem; height:4rem;}
.section04 .sort li.on a span {padding-left:2.4rem;}
.section04 .sort .m_sort {width:25rem;}
.section04 .sort .m_sort span {padding-left:2.4rem; font-size:18px;}
.section04 .desc .info {min-height:240px; background-size:70px auto;}
.section04 .desc .info .name {font-size:64px; min-height:62px; margin: 1.2rem 0 1.2rem auto;}
.section04 .desc .info .type {font-size:20px; width:20rem; height:4.5rem; padding-left: 2.4rem; padding-bottom: 1.8rem;}
.section04 .tab_box04 .desc06 .info .name {min-width:0;}
}

@media screen and (max-width: 1280px) {
.header_bottom .down_area:before {left: -5.4rem;}
.header_bottom .down_area:after {right: -5.4rem;}
.section03 .weapon_wrap .con {padding-right:0;}

.section04 .desc .info .name {min-width:260px; font-size:50px;}
.section04 .desc .info .name:before {height:2px;}
.section04 .tab_box01 .desc .info .name {font-size:60px;}
}

@media screen and (min-width: 1024px) and (min-height: 940px) {
.section03 .weapon_wrap .con {bottom:20%;}
}

@media screen and (min-width: 1024px) and (min-height: 1050px) {
.section03 .weapon_wrap .con {bottom:31%; top: 20%;}
}

@media screen and (min-width: 1024px) {
.section04 .sort ul {display:block !important;}
}

@media screen and (max-width: 1023px) {
.header_bottom .down_area {display:none;}
.header_top {right:0; padding-right:8px;}
.header_top .inner {padding:8px 0;}
.header_top .utils {padding-top:0;}

.bg_vod video {transform: translate(-58%, -50%);}
.bg_vod .vod_link {cursor:pointer;}
.cursor_vod {display:none !important;}

.bg_vod .vod_link {z-index:1; position:absolute; top:50%; left:50%; margin-top:-84px; margin-left:-60px; width:150px; height:168px; background:url('/images/common/event/promotion/pointer_vod.png') 0 0 no-repeat; background-size:100% auto;}

.section01 .bi_area {bottom:12rem;}
.section01 .vod_info {display:none;}

.section02 {height:auto;}
.section02 .map_slide ul {margin-left:-4px;}
.section02 .map_slide ul li {width:50%; padding-left:4px; height:44.2rem; margin-bottom:4px;}
.section02 .map_slide ul li a {padding-bottom:0; align-items:flex-start; padding-top:27%;}
.section02 .map_slide ul li a > span {text-align:right;}
.section02 .map_slide ul li a > span:before {display:none;}
.section02 .map_slide ul li a > span font {text-align:center; margin-top:5px;}
.section02 .map_slide ul li a p {bottom:10%;}
.section02 .map_slide ul li a:hover > span {bottom:2.4rem; right:2.4rem;}

.section03 {height:auto;}
.section03 .contents {padding:4.8rem 3.2rem;}
.section03 .hidden {display:none !important;}
.section03 .weapon_wrap .weapon_thum {position:relative; top:0; left:0; bottom:auto; width:auto; padding-left:0;}
.section03 .weapon_wrap .weapon_thum:before {left: 2rem; transform: rotate(-90deg) scaleY(-1); bottom: -3.5rem; top: auto;}
.section03 .weapon_wrap .weapon_thum ul {padding-left:0; display:flex; direction:ltr; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; -webkit-overflow-scrolling:touch;}
.section03 .weapon_wrap .weapon_thum ul::-webkit-scrollbar {height:1.2rem;}
.section03 .weapon_wrap .weapon_thum li {margin-right:1.8rem;}
.section03 .weapon_wrap .weapon_thum li a {width:18rem; text-align:center;}
.section03 .weapon_wrap .weapon_thum li a span {width:75%;}
.section03 .weapon_wrap .list > li {padding-bottom:0;}
.section03 .weapon_wrap .wrap {top:auto; transform:none; left:0;}
.section03 .weapon_wrap .list_wrap {max-width:none; left:auto;}
.section03 .weapon_wrap .con {position:relative; transform:none; right:auto; top:auto; width:auto; padding: 0 3rem; display:block;}
.section03 .weapon_wrap .con .desc {min-height:0; padding-bottom:4.8rem;}
.section03 .weapon_wrap .wrap:before {left:auto; margin-left:0; right:3.2rem; bottom:4.8rem;}
.section03 .weapon_wrap .con .desc .name {margin-top:0; font-size:52px;}
.section03 .weapon_wrap .con .desc .name span {height:4.8rem;}
.section03 .weapon_wrap .con .desc .txt {font-size:17px;}
.stat {height:auto; max-width: none; padding:3.6rem 3.6rem 1.2rem; max-height:none;}
.stat li {display:inline-block; width:calc((100% - 4.8rem) / 2)}
.stat li:nth-child(2n) {margin-left:4.8rem;}
.stat .txt {font-size:14px; width:120px;}
.stat .num {font-size:14px; width:70px;}
.stat .graph {width: calc(100% - 190px);}

.section04 .sort {top:0; left:50%; transform:translate(-50% , 0); font-size:0; z-index:1;}
.section04 .sort ul {position:absolute; display:none;}
.section04 .sort li {margin-bottom:0; width:60rem;}
.section04 .sort li:after {padding-bottom:12%;}
.section04 .sort li a {background:rgba(0, 0, 0, 0.8); border:0.2rem solid #99ffff; border-top:0;}
.section04 .sort li a:after {display:none;}
.section04 .sort li a:before {display:none;}
.section04 .sort li a span {padding:0; justify-content:center;}
.section04 .sort li a span:before {display:none;}
.section04 .sort li.on a {background:rgba(0, 0, 0, 0.8); border:0.2rem solid #99ffff; border-top:0;}
.section04 .sort li:first-child a {border-top:0.2rem solid #99ffff !important;}
.section04 .sort li.on a {color:#fff;}
.section04 .sort li.on a span {padding:0; justify-content:center;}
.section04 .sort li.on a span:before {display:none;}

.section04 .sort .m_sort {width:60rem; display:block;}
.section04 .sort .m_sort:after {padding-bottom:12%;}
.section04 .sort .m_sort span {justify-content:flex-start; padding-left:4.8rem;}
.section04 .sort .m_sort span:before {display:block; background-image: url(/images/common/event/promotion/bg_sort_on_m.png);}
.section04 .desc .info {min-height:0; background:none !important;}
.section04 .desc .info .name {font-size:52px; min-height:0; padding:1.5rem 2.4rem 1rem; font-weight:700; text-shadow:1px 0 0 #0088ff, -1px 0 0 #ff8888, 0 0 1px rgba(255, 255, 255, 0.2); margin-top:0; margin-bottom:0; border:none; background:rgba(0, 0, 0, 0.5); color:#fff; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);}
.section04 .desc .info .name:before, .section04 .desc .info .name:after {display:none;}
.section04 .tab_box .cha_sort {bottom:8.4rem;}
.section04 .desc .info .type {margin-left:-12px; width: 26.4rem; height: 6rem; padding-left:3rem; padding-bottom: 2.4rem;}
.section04 .desc .info .name span {border-bottom:none; padding-right:0;}
.section04 .desc .info .name span:before {display:none;}
.section04 .tab_box01 .desc .info .name {font-size:52px;}
.section04 .desc .info .name {min-width:0;}
.section04 .tab_box04 .desc06 .info {margin-top:22rem;}
.section04 .tab_box04 .desc06 .info .name {padding-right:2.4rem;}
}

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

.btn_login {font-size:3.4rem;}
.btn_login span {padding: 2px 1.8rem 0 3rem;}
.btn_login span:after {background-size:1.2rem auto;}
.btn_login span font:after {top:-1px;}
.btn_regi {font-size:2.3rem;}

.header_top .fix_sns ul {display: flex; align-items: center; justify-content: space-around;}
.header_top .fix_sns li {margin-right:0;}
.header_top .fix_sns li a {width:30px; height:30px;}
.header_top .utils .btn_redeem {font-size:2.6rem;}
.header_bottom .bi img {max-width:20.2rem;}

.section01 .login_wrap {min-width:0; height:100vh; z-index:12; top:0; left:0; right:0; width:100%; display:none;}
.section01 .login_wrap .con {position: relative; top: 50%; transform: translate(0, -50%); margin:0 auto;}
.section01 .login_wrap .con .tit {font-size:4.3rem;}
.section01 .login_wrap .join {font-size:2.3rem; padding-right:130px;}
.section01 .login_wrap .join .btn_regi {width:120px;}
.section01 .login_wrap .input_list li input {font-size:2.8rem; height:40px;}
.section01 .login_wrap .input_list li input::placeholder {font-size:2.6rem;}
.section01 .login_wrap .btn_login {height:50px;}
.section01 .login_wrap .btn_login span font {justify-content:center;}
.section01 .login_wrap .btn_login span font:after {width:14px; height:24px;}
.section01 .login_wrap .forget a {font-size:2.6rem;}
.section01 .bi_area .scroll {font-size:2rem;}

.section02 .map_slide ul li a > span {font-size:4.1rem; line-height:1;}
.section02 .map_slide ul li a > span font {transform:none; position: relative; top: 2px; font-size:2rem;}
.section02 .map_slide ul li a p font {font-size:1.8rem; padding:1rem 0;}
.section02 .map_slide ul li a:hover > span {font-size:2rem; bottom:4.8rem; right:4.8rem;}

.section03 .weapon_wrap .con .desc .name {font-size:6.1rem;}
.section03 .weapon_wrap .con .desc .name span {height:6.4rem;}
.section03 .weapon_wrap .con .desc .name span:before {background-size:1.2rem auto;}
.section03 .weapon_wrap .weapon_thum li a {width:24rem;}
.section03 .weapon_wrap .weapon_thum li a span {font-size:2rem; height:20px;}
.section03 .weapon_wrap .con .desc .txt {font-size:2.6rem;}
.stat .txt {width:auto; margin-bottom:1rem; font-size:2.3rem;}
.stat li {margin-bottom:2.4rem;}
.stat li > div {display:block;}
.stat .graph {width:100%;}
.stat .num {width:auto; position:absolute; top:0; right:0; font-size:2.3rem;}

.section04 {height: calc(100vh - 44rem);}
.section04 .sort li a {font-size:3.1rem;}
.section04 .desc .info .sort_s {font-size:2.3rem;}
.section04 .desc .info .type {margin-left:-6px;}
.section04 .desc .info .name {font-size:6.1rem;}
.section04 .cha_sort > div {font-size:2.3rem;}
.section04 .desc .info .type {font-size:2.9rem; padding-bottom:2rem;}
.section04 .tab_box01 .desc .info .name {font-size:6.1rem;}

footer > img {max-width:16.8rem;}
footer .footer {font-size:2.5rem;}
footer .footer .copy {font-size:2.3rem;}
footer .geo_credit {font-size:1.9rem;}

.pop_map .btn_pop_arr span {font-size:1.7rem;}
.pop_map h3 {font-size:3.4rem;}
.pop_map h3 font {font-size:2rem;}
.pop_map .map_area {background-size:200% auto;}
.pop_map .map_sort {bottom: 36%;}
.pop_map .btn_pop_l {left:1.2rem;}
.pop_map .btn_pop_r {right:1.2rem;}

.pop_video .pop-layout {width:75%;}
}

@media screen and (max-width: 380px) {
.pop_map .map_sort {bottom: 32%;}
.pop_map h3 {left:2.4rem; font-size:3rem;}
.pop_map h3 span:after {right:-10rem;}
.pop_map h3 font {font-size:1.5rem;}
}

@keyframes colorshift-red {0%, 7% {background-color: #ff536b;} 8%, 18% {background-color: transparent;} 19% {background-color: #ff536b; width: 2px;} 23%, 100% {background-color: transparent;}}
@keyframes colorshift-blue {0%, 7% {background-color: #3ffeff;} 8%, 18% {background-color: transparent;} 19% {background-color: #3ffeff; width: 2px;} 23%, 100% {background-color: transparent;}}
@keyframes aim {0% {transform: rotate(0deg);} 25% {transform: rotate(360deg);} 50% {transform: rotate(0deg);} 75% {transform: rotate(360deg);} 100% {transform: rotate(0deg);}}
@keyframes spin1 {100% {transform:rotate(-360deg);}}
@keyframes glitch {
0% {clip-path: var(--clip-one);}
2%, 8% {clip-path: var(--clip-two); transform: translate(calc(var(--shimmy-distance) * -1%), 0);}
6% {clip-path: var(--clip-two); transform: translate(calc(var(--shimmy-distance) * 1%), 0);}
9% {clip-path: var(--clip-two); transform: translate(0, 0);}
10% {clip-path: var(--clip-three); transform: translate(calc(var(--shimmy-distance) * 1%), 0);}
13% {clip-path: var(--clip-three); transform: translate(0, 0);}
14%, 21% {clip-path: var(--clip-four); transform: translate(calc(var(--shimmy-distance) * 1%), 0);}
25% {clip-path: var(--clip-five); transform: translate(calc(var(--shimmy-distance) * 1%), 0);}
30% {clip-path: var(--clip-five); transform: translate(calc(var(--shimmy-distance) * -1%), 0);}
35%, 45% {clip-path: var(--clip-six); transform: translate(calc(var(--shimmy-distance) * -1%));}
40% {clip-path: var(--clip-six); transform: translate(calc(var(--shimmy-distance) * 1%));}
50% {clip-path: var(--clip-six); transform: translate(0, 0);}
55% {clip-path: var(--clip-seven); transform: translate(calc(var(--shimmy-distance) * 1%), 0);}
60% {clip-path: var(--clip-seven); transform: translate(0, 0);}
31%, 61%, 100% {clip-path: var(--clip-one);}
}
@keyframes blink-2 {0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;}}
@keyframes up {70% {transform: translateY(0%);} 80% {transform: translateY(-2%);} 100% {transform: translateY(0);}}
@keyframes scroll {from {background-position: 0 0;} to {background-position: 0 -16.8rem;}}
@keyframes animate-width {0% {width: 0; opacity: 0;} 100% {visibility: visible; opacity: 1;}}
@keyframes fade-in {from {opacity: 0; transform: translate3d(0, 4rem, 0);} to {transform: translate3d(0, 0, 0); opacity: 1;}}