/* BDO Class Hub - class page layout (rebuilt from the original template; only rules the site uses) */
/* --- from font.css --- */
@font-face{font-family:"StrongSword_New";font-weight:400;font-style:normal;src:url(../assets/vendor/static/global/font/web/web_pearl_original_new.woff2) format("woff2")}
@font-face{font-family:"StrongSword_New";font-weight:600;font-style:normal;src:url(../assets/vendor/static/global/font/web/web_pearl_original_new_bold.woff2) format("woff2")}
a,body,button,div,html,input,select,span,textarea{font-family:custom,sans-serif}
:lang(de-de),:lang(de-de) a,:lang(de-de) article,:lang(de-de) blockquote,:lang(de-de) body,:lang(de-de) button,:lang(de-de) cite,:lang(de-de) dd,:lang(de-de) div,:lang(de-de) dt,:lang(de-de) em,:lang(de-de) input,:lang(de-de) li,:lang(de-de) p,:lang(de-de) pre,:lang(de-de) select,:lang(de-de) span,:lang(de-de) strong,:lang(de-de) sub,:lang(de-de) sup,:lang(de-de) td,:lang(de-de) textarea,:lang(de-de) th,:lang(en-us),:lang(en-us) a,:lang(en-us) article,:lang(en-us) blockquote,:lang(en-us) body,:lang(en-us) button,:lang(en-us) cite,:lang(en-us) dd,:lang(en-us) div,:lang(en-us) dt,:lang(en-us) em,:lang(en-us) input,:lang(en-us) li,:lang(en-us) p,:lang(en-us) pre,:lang(en-us) select,:lang(en-us) span,:lang(en-us) strong,:lang(en-us) sub,:lang(en-us) sup,:lang(en-us) td,:lang(en-us) textarea,:lang(en-us) th,:lang(es-es),:lang(es-es) a,:lang(es-es) article,:lang(es-es) blockquote,:lang(es-es) body,:lang(es-es) button,:lang(es-es) cite,:lang(es-es) dd,:lang(es-es) div,:lang(es-es) dt,:lang(es-es) em,:lang(es-es) input,:lang(es-es) li,:lang(es-es) p,:lang(es-es) pre,:lang(es-es) select,:lang(es-es) span,:lang(es-es) strong,:lang(es-es) sub,:lang(es-es) sup,:lang(es-es) td,:lang(es-es) textarea,:lang(es-es) th,:lang(es-mx),:lang(es-mx) a,:lang(es-mx) article,:lang(es-mx) blockquote,:lang(es-mx) body,:lang(es-mx) button,:lang(es-mx) cite,:lang(es-mx) dd,:lang(es-mx) div,:lang(es-mx) dt,:lang(es-mx) em,:lang(es-mx) input,:lang(es-mx) li,:lang(es-mx) p,:lang(es-mx) pre,:lang(es-mx) select,:lang(es-mx) span,:lang(es-mx) strong,:lang(es-mx) sub,:lang(es-mx) sup,:lang(es-mx) td,:lang(es-mx) textarea,:lang(es-mx) th,:lang(fr-fr),:lang(fr-fr) a,:lang(fr-fr) article,:lang(fr-fr) blockquote,:lang(fr-fr) body,:lang(fr-fr) button,:lang(fr-fr) cite,:lang(fr-fr) dd,:lang(fr-fr) div,:lang(fr-fr) dt,:lang(fr-fr) em,:lang(fr-fr) input,:lang(fr-fr) li,:lang(fr-fr) p,:lang(fr-fr) pre,:lang(fr-fr) select,:lang(fr-fr) span,:lang(fr-fr) strong,:lang(fr-fr) sub,:lang(fr-fr) sup,:lang(fr-fr) td,:lang(fr-fr) textarea,:lang(fr-fr) th,:lang(id-id),:lang(id-id) a,:lang(id-id) article,:lang(id-id) blockquote,:lang(id-id) body,:lang(id-id) button,:lang(id-id) cite,:lang(id-id) dd,:lang(id-id) div,:lang(id-id) dt,:lang(id-id) em,:lang(id-id) input,:lang(id-id) li,:lang(id-id) p,:lang(id-id) pre,:lang(id-id) select,:lang(id-id) span,:lang(id-id) strong,:lang(id-id) sub,:lang(id-id) sup,:lang(id-id) td,:lang(id-id) textarea,:lang(id-id) th,:lang(ko-kr),:lang(ko-kr) a,:lang(ko-kr) article,:lang(ko-kr) blockquote,:lang(ko-kr) body,:lang(ko-kr) button,:lang(ko-kr) cite,:lang(ko-kr) dd,:lang(ko-kr) div,:lang(ko-kr) dt,:lang(ko-kr) em,:lang(ko-kr) input,:lang(ko-kr) li,:lang(ko-kr) p,:lang(ko-kr) pre,:lang(ko-kr) select,:lang(ko-kr) span,:lang(ko-kr) strong,:lang(ko-kr) sub,:lang(ko-kr) sup,:lang(ko-kr) td,:lang(ko-kr) textarea,:lang(ko-kr) th,:lang(pt-br),:lang(pt-br) a,:lang(pt-br) article,:lang(pt-br) blockquote,:lang(pt-br) body,:lang(pt-br) button,:lang(pt-br) cite,:lang(pt-br) dd,:lang(pt-br) div,:lang(pt-br) dt,:lang(pt-br) em,:lang(pt-br) input,:lang(pt-br) li,:lang(pt-br) p,:lang(pt-br) pre,:lang(pt-br) select,:lang(pt-br) span,:lang(pt-br) strong,:lang(pt-br) sub,:lang(pt-br) sup,:lang(pt-br) td,:lang(pt-br) textarea,:lang(pt-br) th,:lang(tr-tr),:lang(tr-tr) a,:lang(tr-tr) article,:lang(tr-tr) blockquote,:lang(tr-tr) body,:lang(tr-tr) button,:lang(tr-tr) cite,:lang(tr-tr) dd,:lang(tr-tr) div,:lang(tr-tr) dt,:lang(tr-tr) em,:lang(tr-tr) input,:lang(tr-tr) li,:lang(tr-tr) p,:lang(tr-tr) pre,:lang(tr-tr) select,:lang(tr-tr) span,:lang(tr-tr) strong,:lang(tr-tr) sub,:lang(tr-tr) sup,:lang(tr-tr) td,:lang(tr-tr) textarea,:lang(tr-tr) th{font-family:"StrongSword_New",sans-serif}
/* --- from utils.css --- */
/* --- from icons.css --- */
:root{--bg-apple:#000;--bg-apple-hover:#262626;--color-apple:#fff;--bg-bahamut:#20a0b8;--bg-bahamut-hover:#24b4cf;--color-bahamut:#fff;--bg-chzzk:#000;--bg-chzzk-hover:#262626;--color-chzzk:#00ffa3;--bg-discord:#5865f2;--bg-discord-hover:#6a77f5;--color-discord:#fff;--bg-facebook:#0866ff;--bg-facebook-hover:#2175ff;--color-facebook:#fff;--bg-google:#fff;--bg-google-hover:#f8f9fa;--color-google:#3c4043;--border-color-google:#747775;--bg-google-neutral:#f2f2f2;--bg-google-neutral-hover:#dfdfdf;--border-color-google-neutral:transparent;--bg-google-dark:#131314;--bg-google-dark-hover:#252526;--border-color-google-dark:#8e918f;--bg-instagram:linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);--bg-instagram-hover:linear-gradient(45deg, #f2a34d 0%, #e97a52 25%, #e14059 50%, #d43d7a 75%, #c72f9a 100%);--color-instagram:#fff;--bg-kakao:#fee500;--bg-kakao-hover:#ffeb33;--color-kakao:#000;--bg-line:#06c755;--bg-line-hover:#07e060;--color-line:#fff;--bg-naver:#03a94d;--bg-naver-hover:#03c75a;--color-naver:#fff;--bg-ps:#003791;--bg-ps-hover:#0043b0;--color-ps:#fff;--bg-tiktok:#000;--bg-tiktok-hover:#262626;--color-tiktok:#fff;--bg-twitch:#9146ff;--bg-twitch-hover:#a166ff;--color-twitch:#fff;--bg-vk:#07f;--bg-vk-hover:#1a85ff;--color-vk:#fff;--bg-x:#000;--bg-x-hover:#262626;--color-x:#fff;--bg-xbox:#107c10;--bg-xbox-hover:#139613;--color-xbox:#fff;--bg-yahoo:#430297;--bg-yahoo-hover:#5202ba;--color-yahoo:#fff;--bg-youtube:#f00;--bg-youtube-hover:#ff1a1a;--color-youtube:#fff;--bg-epicgames:#18181c;--bg-epicgames-hover:#34343d;--color-epicgames:#fff;--bg-steam:#154263;--bg-steam-hover:#1a527a;--color-steam:#fff;--bg-pearlapp:#161616;--bg-pearlapp-hover:#fff;--color-pearlapp:#e7e7e7;--bg-gamewith:#34b792;--bg-gamewith-hover:#58ddb7;--color-gamewith:#e7e7e7;--bg-bilibili:#00aeec;--bg-bilibili-hover:#34c5f9;--color-bilibili:#ffffff;--bg-heybox:#393c3f;--bg-heybox-hover:#5e6265;--color-heybox:#f1f2f3;--bg-weibo:#ea0f1f;--bg-weibo-hover:#f83e4a;--color-weibo:#ffffff}
/* --- from global.css --- */
/* --- from reset.css --- */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,button,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,input,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,select,small,span,strike,strong,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}
body,table{word-break:break-word;word-wrap:break-word}
html{text-size-adjust:100%;text-size-adjust:none}
body{position:relative;min-width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:0;-webkit-overflow-scrolling:touch}
a{-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
button{background:none;border:0;outline:0;cursor:pointer}
button span{position:relative}
select{background:transparent}
img{height:auto;border:0;vertical-align:top}
a,button,input,label,select,textarea{-webkit-appearance:none;appearance:none;border-radius:0;vertical-align:top}
input{vertical-align:middle}
em{font-style:normal}
iframe{max-width:100%}
p{line-height:normal;line-height:initial}
::-ms-clear,::-ms-reveal{display:none}
button:focus,input:focus,select:focus,textarea:focus{outline:none}
.blind{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
input[type="search"]{-webkit-appearance:textfield;appearance:textfield;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}
ol,ul{list-style:none}
@media (min-width: 1025px){html{font-size:16px}}
@media (max-width: 1024px){html{font-size:14px}}
@media (max-width: 430px){html{font-size:13.71px}}
@media (max-width: 420px){html{font-size:13.38px}}
@media (max-width: 410px){html{font-size:13.07px}}
@media (max-width: 400px){html{font-size:12.75px}}
@media (max-width: 390px){html{font-size:12.43px}}
@media (max-width: 380px){html{font-size:12.11px}}
@media (max-width: 370px){html{font-size:11.79px}}
@media (max-width: 360px){html{font-size:11.47px}}
@media (max-width: 350px){html{font-size:11.16px}}
@media (max-width: 340px){html{font-size:10.83px}}
@media (max-width: 330px){html{font-size:10.52px}}
@media (max-width: 320px){html{font-size:10.2px}}
/* --- from notice_template.css --- */
/* --- from common.css --- */
h1,h2,h3,h4,h5,h6{font-size:1.4rem;font-weight:normal}
body{color:#2b2b2b;line-height:1.2}
input{outline:0;color:#626262;font-weight:normal}
button,input,select,textarea{font-size:1.4rem}
a{color:#2b2b2b}
.hide{position:fixed;top:-9999px;left:-9999px;display:none!important;width:0!important;height:0!important;font-size:0;visibility:hidden;opacity:0;overflow:hidden;z-index:-999}
body.hidden,body.lock{height:100%;overflow:hidden}
#wrap{position:relative;height:100%;margin:0 auto;background-color:#000}
.page_wrap{background-color:#fff}
.header_wrap .util_wrap > ul > .hide + li::before{display:none}
.mark_exclamation::after,.mark_exclamation::before{content:"";position:absolute;left:50%;display:block;width:2px;margin-left:-1px;background-color:#fff}
.mark_exclamation::before{top:3px;height:6px}
.mark_exclamation::after{bottom:3px;height:2px}
.path_opa_on{opacity:0;-webkit-transform:translateY(0.2rem);transform:translateY(0.2rem);transition:opacity 0.5s,-webkit-transform 0.5s;transition:opacity 0.5s,transform 0.5s;transition:opacity 0.5s,transform 0.5s,-webkit-transform 0.5s}
.path_scale_on{opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:80% 80%;transform-origin:80% 80%;transition:opacity 1s,-webkit-transform 0.3s;transition:transform 0.3s,opacity 1s;transition:transform 0.3s,opacity 1s,-webkit-transform 0.3s;transition-timing-function:cubic-bezier(0, 0.58, 0.29, 1);transition-delay:0.5s}
.svg_wrap{width:124px;margin-top:10px}
.path_blackspirit{fill:transparent;stroke:#3140af;stroke-width:0.3px;stroke-dasharray:38.2;stroke-dashoffset:38.2;-webkit-animation:stroke-blackspirit 3s 1.2s infinite forwards cubic-bezier(0.59, 0.4, 0.19, 0.75);animation:stroke-blackspirit 3s 1.2s infinite forwards cubic-bezier(0.59, 0.4, 0.19, 0.75)}
.path_monitor_bg{transition-delay:0.5s}
.path_monitor_line{transition-delay:0.3s}
.path_joystick_wrap{transition-delay:0.4s}
.path_joystick_bg{transition-delay:0.5s}
.path_joystick_line{transition-delay:0.3s}
.path_joystick_waveline{transition-delay:0.3s}
.path_joystick_plus{transition-delay:0.3s}
.path_joystick_dots{transition-delay:0.5s}
.game_start_modal_wrap{position:fixed;top:0;left:0;display:none;justify-content:center;align-items:center;width:100%;height:100%;z-index:1010}
.game_start_modal_wrap.active{display:flex}
.game_start_dimmed{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.7)}
.game_start_wrap{position:relative;width:770px;max-width:90%;height:auto;border-radius:10px}
.game_start_box{display:none;width:100%;height:100%;background-color:#fff;border-radius:0.5rem}
.game_start_box.active{display:block}
.game_start_contents{display:flex;flex-direction:column;align-items:center;padding:60px 3% 40px}
.btn_game_start_close{position:absolute;top:10px;right:12px;width:25px;height:25px}
.btn_game_start_close span{position:absolute;top:50%;left:50%;display:block;width:25px;height:1px;background-color:#2b2f5a;opacity:0.4;transition:opacity 0.3s ease}
.btn_game_start_close span:first-of-type{-webkit-transform:translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 45deg);transform:translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 45deg)}
.btn_game_start_close span:last-of-type{-webkit-transform:translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 135deg);transform:translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 135deg)}
.game_start_wrap .game_start_title{display:block;max-width:85%;padding:1.5rem 0 2.8rem;font-size:22px;font-weight:normal;line-height:1.4;text-align:center}
.game_start_wrap .game_start_text{margin-top:2.5rem;line-height:1.4;text-align:center}
.game_start_wrap .game_start_title_stroke{color:#2b2f5a;font-weight:bold}
.game_start_warning{padding:20px 5% 25px;border-top:1px solid #e4e4e4}
.game_start_warning .game_start_warning_title{display:block;margin-bottom:10px;font-size:14px}
.game_start_warning .game_start_warning_list{display:flex;justify-content:center}
.game_start_warning .game_start_warning_list ~ .game_start_warning_list{margin-top:7px;margin-bottom:7px}
.game_start_warning .game_start_warning_list.align_left{justify-content:flex-start}
.game_start_warning .game_start_mark{position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;margin-top:0.14rem;background-color:#d0d0d0;border-radius:50%;color:#fff;font-size:12px}
.game_start_warning .game_start_desc{display:inline-block;max-width:95%;padding-left:5px;color:#646464;font-size:14px}
.game_start_warning .game_start_desc .link{display:inline-block;color:#2b2f5a;font-weight:bold;transition:color 0.3s}
.game_start_wrap .btn_wrap{display:flex;flex-direction:column;justify-content:center;align-items:center}
.game_start_wrap .btn_download{display:inline-flex;justify-content:center;align-items:center;min-width:320px;height:80px;padding:0 30px;border-radius:3px;color:#fff;font-size:18px;font-weight:normal;-webkit-filter:brightness(1);filter:brightness(1);box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.3);transition:-webkit-filter 0.4s;transition:filter 0.4s;transition:filter 0.4s,-webkit-filter 0.4s;box-sizing:border-box}
.game_start_wrap .btn_download .icn_down{display:flex;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;margin:0 0 0 30px;background-color:rgba(51, 51, 51, 0.3);border-radius:50%;vertical-align:middle;box-shadow:inset 0 3px 4px 2px rgba(0, 0, 0, 0.2),0 0 4px 2px rgba(255, 255, 255, 0.03);transition:background-color 0.4s,box-shadow 0.4s;box-sizing:border-box}
.game_start_wrap .btn_download .icn_down::before{position:relative;top:auto;left:auto;background:url(../assets/vendor/site/img/portal/data/spr_data.png) no-repeat;-webkit-transform:scale(0.7) translateZ(0);transform:scale(0.7) translateZ(0);transition:-webkit-transform 0.4s;transition:transform 0.4s;transition:transform 0.4s,-webkit-transform 0.4s;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.game_start_wrap .btn_download .icn_down::before{width:19px;height:25px;margin:2px 0 0 1px;background-position:-440px -68px}
input:focus{box-shadow:0 0 0 1px #2b305a}
.btn_wrap{position:relative;display:flex;justify-content:center;align-items:center;text-align:center}
.btn{position:relative;display:inline-block;text-align:center;vertical-align:middle;opacity:1;transition:opacity 0.3s;box-sizing:border-box}
.btn span{position:relative}
.btn::before{content:"";position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:rgba(0, 0, 0, 0.1);opacity:0;transition:opacity 0.3s,background 0.3s;box-sizing:border-box;overflow:hidden}
.btn_blue{background-color:#2b305a;color:#fff}
.btn.disabled{background:none;background:#f6f6f6;border:0;color:#aaa;cursor:default}
.btn.disabled::before{display:none}
.btn .icon{position:relative}
.btn .icon::before{content:"";position:absolute;top:50%;left:0;display:block;background:url(../assets/vendor/site/img/common/icn_cm_spr.png) no-repeat;background-size:1600px 1600px;-webkit-transform:translate(0, -50%);transform:translate(0, -50%);overflow:hidden}
.btn_site_top{position:fixed;right:15px;bottom:15px;display:flex;width:42px;height:42px;background:#fff;border:1px solid #ddd;visibility:hidden;opacity:0;transition:opacity 0.2s,visibility 0.2s;cursor:pointer;box-sizing:border-box;z-index:20}
.btn_site_top.active{visibility:visible;opacity:0.85}
.btn_site_top:active,.btn_site_top:hover{opacity:1}
.btn_site_top::after,.btn_site_top::before{content:"";position:absolute;top:50%;width:2px;height:13px;background-color:#707070;border-radius:1px;-webkit-transform-origin:top;transform-origin:top}
.btn_site_top::before{left:15px;-webkit-transform:rotate(45deg) translate(0, -50%);transform:rotate(45deg) translate(0, -50%)}
.btn_site_top::after{right:15px;-webkit-transform:rotate(-45deg) translate(0, -50%);transform:rotate(-45deg) translate(0, -50%)}
.hover{position:relative}
.hover::before{content:"";position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:rgba(0, 0, 0, 0.1);opacity:0;box-sizing:border-box}
@media screen and (max-width: 1024px){#wrap{min-width:inherit}.btn .icon::before{background-size:66.666rem 66.666rem}.mark_exclamation::before{height:5px}.mark_exclamation::after{height:2px}.svg_wrap{width:100px}.game_start_contents{padding:30px 5%}.game_start_wrap .game_start_title{font-size:1.4rem}.game_start_warning{padding:20px 5%}.game_start_warning .game_start_mark{width:14px;height:14px;font-size:0.6rem}.game_start_warning .game_start_desc{font-size:0.8rem}.game_start_wrap .btn_download{display:flex;min-width:20rem;max-width:20rem;height:4.2rem;padding:0 1.2rem;font-size:1.2rem}.game_start_wrap .btn_download .icn_down{margin:0 0 0 1rem}.game_start_wrap .btn_download .icn_down::before{width:1.1667rem;height:1.4444rem;margin:0.1429rem 0 0 0.0714rem;background-position:-26.6667rem -3.7778rem;background-size:44.4444rem 44.4444rem}}
@media only screen and (max-height: 415px) and (min-width: 415px) and (orientation: landscape){html{font-size:12px}}
@media screen and (min-width: 1025px){.hover:hover::before{opacity:1}.btn:hover{opacity:0.9}.btn:hover::before{opacity:1}.btn_game_start_close:hover span{opacity:1}.game_start_wrap .btn_download:hover{opacity:1;-webkit-filter:brightness(1.4);filter:brightness(1.4)}.game_start_wrap .btn_download:hover .icn_down{background-color:rgba(65, 92, 141, 0.3);box-shadow:inset 0 -2px 4px 2px rgba(0, 0, 0, 0.4),0 3px 4px 2px rgba(0, 0, 0, 0)}.game_start_wrap .btn_download:hover .icn_down::before{-webkit-transform:scale(0.8) rotate(0.001deg) translateZ(0);transform:scale(0.8) rotate(0.001deg) translateZ(0)}}
@media screen and (max-width: 767px){.game_start_contents{padding:30px 5%}.game_start_wrap .btn_download{min-width:0;min-width:initial}}
@media screen and (min-width: 2560px){body{min-width:inherit;max-width:2560px;margin:0 auto;background-color:#101115;background-image:url(../assets/vendor/site/img/common/common_pattern_bg.jpg),url(../assets/vendor/site/img/common/common_pattern_bg.jpg);background-position:0 0,100% 0;background-size:calc((100% - 2560px) / 2),calc((100% - 2560px) / 2);background-repeat:repeat-y}}
@media print{body,html{margin:1mm}#top_network,footer,header{display:none!important}@page{margin:1mm;size:a4}}
@-webkit-keyframes stroke-blackspirit{35%{opacity:1;fill:transparent;stroke-dashoffset:0}50%{opacity:1;fill:#3140af;stroke-dashoffset:0}100%{opacity:0;fill:#3140af;stroke-dashoffset:0}}
@keyframes stroke-blackspirit{35%{opacity:1;fill:transparent;stroke-dashoffset:0}50%{opacity:1;fill:#3140af;stroke-dashoffset:0}100%{opacity:0;fill:#3140af;stroke-dashoffset:0}}
/* --- from owl.carousel.min.css --- */
/* --- from gameinfo.css --- */
.content{position:relative;margin:0 auto;box-sizing:border-box}
.classes_wrap{position:relative;background-color:#000}
.classes_wrap .classes_top{position:relative;height:850px;box-sizing:border-box;overflow:hidden}
.classes_wrap .classes_top::before{content:"";position:absolute;top:0;left:0;display:block;width:100%;height:100%;box-sizing:border-box}
.classes_wrap .classes_top .classes_back_wrap{position:relative;width:100%;height:100%}
.classes_wrap .classes_top .classes_title{position:absolute;bottom:90px;width:100%;color:#fff;font-size:80px;text-align:center;z-index:16}
.classes_wrap .classes_back_image{position:relative;width:100%;height:100%;object-fit:cover;object-position:center 0}
.classes_wrap .classes_top_symbol{position:relative;height:144px;margin-top:-44px;overflow:hidden}
.classes_wrap .classes_top_symbol .img_character_symbol{position:absolute;left:50%;display:block;width:2560px;height:100%;margin-left:-1280px}
.classes_wrap .awaken_on{display:block!important}
.classes_wrap .ascension_on,.classes_wrap .layer_tab ul li a.talent_on,.classes_wrap .talent_on{display:none!important}
.classes_wrap .characteristic .feature li.awaken_on,.classes_wrap .layer_tab ul li a.awaken_on{display:flex!important}
.classes_wrap.character_17 .awaken_on,.classes_wrap.character_17 .layer_tab ul li a.awaken_on{display:none!important}
.classes_wrap.character_17 .talent_on{display:block!important}
.classes_wrap.character_17 .feature .talent_on,.classes_wrap.character_17 .layer_tab ul li a.talent_on{display:flex!important}
.classes_wrap.character_29 .awaken_on,.classes_wrap.character_29 .layer_tab ul li a.awaken_on,.classes_wrap.character_3 .awaken_on,.classes_wrap.character_3 .layer_tab ul li a.awaken_on,.classes_wrap.character_32 .awaken_on,.classes_wrap.character_32 .layer_tab ul li a.awaken_on,.classes_wrap.character_34 .awaken_on,.classes_wrap.character_34 .layer_tab ul li a.awaken_on,.classes_wrap.character_6 .awaken_on,.classes_wrap.character_6 .layer_tab ul li a.awaken_on{display:none!important}
.classes_wrap.character_29 .ascension_on,.classes_wrap.character_29 .layer_tab_content ul li .title.awaken_on,.classes_wrap.character_3 .ascension_on,.classes_wrap.character_3 .layer_tab_content ul li .title.awaken_on,.classes_wrap.character_32 .ascension_on,.classes_wrap.character_32 .layer_tab_content ul li .title.awaken_on,.classes_wrap.character_34 .ascension_on,.classes_wrap.character_34 .layer_tab_content ul li .title.awaken_on,.classes_wrap.character_6 .ascension_on,.classes_wrap.character_6 .layer_tab_content ul li .title.awaken_on{display:block!important}
.classes_wrap.character_29 .feature .ascension_on,.classes_wrap.character_29 .layer_tab ul li a.ascension_on,.classes_wrap.character_3 .feature .ascension_on,.classes_wrap.character_3 .layer_tab ul li a.ascension_on,.classes_wrap.character_32 .feature .ascension_on,.classes_wrap.character_32 .layer_tab ul li a.ascension_on,.classes_wrap.character_34 .feature .ascension_on,.classes_wrap.character_34 .layer_tab ul li a.ascension_on,.classes_wrap.character_6 .feature .ascension_on,.classes_wrap.character_6 .layer_tab ul li a.ascension_on{display:flex!important}
.select_classes_wrap{--padding-select_character:8px;position:relative;padding:120px 0 190px;background-image:url(../assets/vendor/site/img/portal/gameinfo/select_classes_bg.jpg);background-position:50% 0;background-size:cover;background-repeat:no-repeat}
.select_classes_wrap .title_wrap{text-align:center}
.select_classes_wrap .select_title{color:#fff;font-size:48px}
.select_classes_wrap .select_title_desc{display:block;margin-top:15px;color:rgba(255, 255, 255, 0.5);font-size:16px}
.select_classes_wrap .select_classes_list{display:grid;justify-content:center;grid-template-columns:repeat(7, calc(160px + var(--padding-select_character) * 2));width:93.5%;margin:60px auto 0;transition:display 0.8s,grid-template-columns 0.8s}
.select_classes_wrap .select_character{position:relative;padding:0 var(--padding-select_character) 14px;box-sizing:border-box}
.select_classes_wrap .select_character .class_wrap{position:relative;display:flex;width:100%;height:auto;aspect-ratio:237/329;border-radius:6px;outline:none;-webkit-filter:grayscale(1) brightness(0.8);filter:grayscale(1) brightness(0.8);-webkit-transform:scale3d(1, 1, 1) translate3d(0, 0, 0);transform:scale3d(1, 1, 1) translate3d(0, 0, 0);transition:box-shadow 0.3s ease-out,-webkit-filter 0.2s ease,-webkit-transform 0.3s ease-out;transition:filter 0.2s ease,transform 0.3s ease-out,box-shadow 0.3s ease-out;transition:filter 0.2s ease,transform 0.3s ease-out,box-shadow 0.3s ease-out,-webkit-filter 0.2s ease,-webkit-transform 0.3s ease-out;will-change:transform;box-sizing:border-box;overflow:hidden}
.select_classes_wrap .select_character .class_wrap:active,.select_classes_wrap .select_character .class_wrap:focus{-webkit-filter:none;filter:none;-webkit-transform:scale(1.12);transform:scale(1.12);z-index:1}
.select_classes_wrap .select_character.active .class_wrap{-webkit-filter:none;filter:none}
.select_classes_wrap .select_character .class_wrap::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:3px solid transparent;border-radius:6px;-webkit-transform:translate3d(0, 0, 2px);transform:translate3d(0, 0, 2px);transition:border-color 0.2s ease;box-sizing:border-box;z-index:1}
.select_classes_wrap .select_character .class_wrap:active::before,.select_classes_wrap .select_character .class_wrap:focus::before{border-color:#e7bc5c}
.select_classes_wrap .select_character .class_name{position:absolute;bottom:14px;left:0;width:100%;min-height:22px;padding:0 10px;color:#fff;font-size:18px;text-align:center;-webkit-transform:translate3d(0, 0, 1px);transform:translate3d(0, 0, 1px);transition:color 0.2s ease;box-sizing:border-box}
.select_classes_wrap .select_character.active .class_name{color:#e7bc5c}
.select_classes_wrap .select_character .class_wrap:active .class_name,.select_classes_wrap .select_character .class_wrap:focus .class_name{color:#e7bc5c}
.select_classes_wrap .select_character .class_icon{position:absolute;bottom:48px;left:50%;width:38px;height:38px;margin:0 auto;background:linear-gradient(0deg, #beb8ac 0, #f5f5f5 70%);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-transform:translate3d(-50%, 0, 1px);transform:translate3d(-50%, 0, 1px)}
.select_classes_wrap .select_character .class_icon::after{content:"";display:block;width:100%;height:100%;background:#e7bc5c;opacity:0;transition:opacity 0.2s ease}
.select_classes_wrap .select_character.active .class_icon:not(.does-not-exist)::after{opacity:1}
.select_classes_wrap .select_character .class_wrap:focus .class_icon::after{opacity:1}
.select_classes_wrap .select_character .class_wrap:active .class_icon::after{opacity:1}
.select_classes_wrap .select_character .class_img{position:relative;width:100%;height:100%;object-fit:cover;will-change:transform}
.layer_class_detail{display:none}
.menu_wrap .icn_list_arrow,.menu_wrap .inner .list_wrap:not(.active) .icn_list_arrow{position:absolute;top:calc(50% - 7px);right:3px;width:14px;height:14px;transition:top 0.25s ease}
.menu_wrap .icn_list_arrow i,.menu_wrap .inner .list_wrap:not(.active) .icn_list_arrow i{position:absolute;top:calc(50% - 1px);display:inline-block;width:14px;height:2px;background-color:#a8a8a8;transition:-webkit-transform 0.4s ease;transition:transform 0.4s ease;transition:transform 0.4s ease,-webkit-transform 0.4s ease}
.menu_wrap .icn_list_arrow i:first-of-type,.menu_wrap .inner .list_wrap:not(.active) .icn_list_arrow i:first-of-type{left:-4px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.menu_wrap .icn_list_arrow i:last-of-type,.menu_wrap .inner .list_wrap:not(.active) .icn_list_arrow i:last-of-type{right:-5px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
@media screen and (min-width: 1025px){.select_classes_wrap .select_character:hover{z-index:2}.select_classes_wrap .select_character .class_wrap:hover{-webkit-filter:none;filter:none;-webkit-transform:scale3d(1.12, 1.12, 1) translate3d(0, 0, 0);transform:scale3d(1.12, 1.12, 1) translate3d(0, 0, 0);z-index:1}.select_classes_wrap.select_sub .select_character .class_wrap:hover::before{border-color:#e7bc5c}}
@media screen and (max-width: 1280px){.classes_wrap .classes_top{height:35.416rem}.classes_wrap .classes_top .classes_title{bottom:3.333rem;left:0;display:block;padding:0 5%;font-size:2.916rem;box-sizing:border-box}.classes_wrap .classes_top_symbol{height:6rem;margin-top:-1.898rem}.classes_wrap .classes_top_symbol .img_character_symbol{width:106.6666rem;margin-left:-53.3333rem}.layer_class_detail{position:fixed;top:0;left:0;display:none;width:100%;height:100%;background:rgba(0, 0, 0, 0.85);color:#fff;z-index:999}.layer_class_detail.active{display:block}.layer_class_detail .inner{position:absolute;top:50%;right:0;left:0;height:29.166rem;padding:0 2.083rem;-webkit-transform:translate(0, -50%);transform:translate(0, -50%);box-sizing:border-box}.layer_class_detail .inner h2{margin-bottom:2.5rem;color:#fff;font-size:2.916rem;font-weight:normal;text-align:center}.layer_class_detail .btn_layer_close{position:absolute;top:1rem;right:1rem;display:block;width:3.333rem;height:3.333rem;border:1px solid #fff;font-size:0;box-sizing:border-box}.layer_class_detail .btn_layer_close:hover{background:#fff}.layer_class_detail .btn_layer_close span{position:absolute;top:1.583rem;left:0.6rem;display:block;width:2rem;height:0.083rem;background:rgba(255, 255, 255, 0.5);box-sizing:border-box}.layer_class_detail .btn_layer_close:hover span{background:#323232}.layer_class_detail .btn_layer_close span:nth-child(1){-webkit-transform:rotate(45deg);transform:rotate(45deg)}.layer_class_detail .btn_layer_close span:nth-child(2){-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.layer_tab{margin-bottom:2.5rem}.layer_tab ul{display:flex;justify-content:center;align-items:center;-ms-flex-align:center}.layer_tab ul li{width:100%;margin-left:-1px}.layer_tab ul li a{display:flex;justify-content:center;align-items:center;height:3.75rem;border:1px solid rgba(255, 255, 255, 0.5);color:#bbb;font-size:1.0833rem;font-weight:normal;box-sizing:border-box;-ms-flex-align:center}.layer_tab ul li.tab_awakening.active a{background:linear-gradient(to bottom, #8b3840 0, #6f2c33 100%);border-color:#b35c64;font-weight:normal}.layer_tab_content{display:none}.layer_tab_content.active{display:block}.layer_tab_content .feature{margin-bottom:2.0833rem}.layer_tab_content .feature ul li{margin:0.833rem 0}.layer_tab_content .feature ul li span{font-size:1.0416rem;line-height:1.875}.layer_tab_content .feature ul li .title{float:left;margin-right:0.833rem}.layer_tab_content .feature ul li .title + span{display:block;overflow:hidden}.layer_tab_content .desc{height:10rem;padding-right:1rem;line-height:1.875;box-sizing:border-box;overflow-y:auto}.layer_tab_content .desc br{display:none}.layer_tab_content.tab_content_awakening .feature ul li .title{color:#aa414a}.select_classes_wrap .select_classes_list{grid-template-columns:repeat(6, calc(148px + var(--padding-select_character) * 2))}.menu_wrap .icn_list_arrow,.menu_wrap .inner .list_wrap:not(.active) .icn_list_arrow{top:calc(50% - 0.625rem);width:1.25rem;height:1.25rem}.menu_wrap .icn_list_arrow i,.menu_wrap .inner .list_wrap:not(.active) .icn_list_arrow i{top:calc(50% - 0.0625rem);width:1rem;height:0.125rem}.menu_wrap .icn_list_arrow i:first-of-type,.menu_wrap .inner .list_wrap:not(.active) .icn_list_arrow i:first-of-type{left:-0.2rem}.menu_wrap .icn_list_arrow i:last-of-type,.menu_wrap .inner .list_wrap:not(.active) .icn_list_arrow i:last-of-type{right:-0.2rem}}
@media screen and (max-width: 1024px){.select_classes_wrap{--padding-select_character:0.5rem;height:auto;min-height:51.666rem;padding:3.8rem 0;background-image:url(../assets/vendor/site/img/portal/gameinfo/m_select_classes_bg.jpg);background-size:cover}.select_classes_wrap .select_title{font-size:1.666rem}.select_classes_wrap .select_title_desc{font-size:0.833rem}.select_classes_wrap .select_classes_list{grid-template-columns:repeat(5, calc(132px + var(--padding-select_character) * 2))}.select_classes_wrap .select_character{padding:0 0.5rem 1rem}.select_classes_wrap .select_character .class_wrap{will-change:initial}.select_classes_wrap .select_character .class_wrap:active,.select_classes_wrap .select_character .class_wrap:focus{-webkit-transform:none;transform:none}.select_classes_wrap .select_character .class_wrap::before{border-width:0.3rem}.select_classes_wrap .select_character .class_name{bottom:0.8rem;min-height:0;min-height:initial;padding:0 0.5rem;font-size:1rem}.select_classes_wrap .select_character .class_icon{bottom:2.1rem;width:2.1rem;height:2.1rem}}
@media (max-width: 767px){.select_classes_wrap .select_classes_list{grid-template-columns:repeat(4, calc(118px + var(--padding-select_character) * 2))}}
@media screen and (max-width: 640px){.classes_wrap .classes_top{height:105vw;min-height:35.416rem}.select_classes_wrap .select_classes_list{grid-template-columns:repeat(4, minmax(calc(60px + var(--padding-select_character) * 2), calc(118px + var(--padding-select_character) * 2)))}.select_classes_wrap .select_character .class_name{bottom:0.6rem;font-size:0.9rem}.select_classes_wrap .select_character .class_icon{bottom:2rem;width:2.1rem;height:2.1rem}.characteristic .desc_wrap .btn_more,.characteristic .feature li span.title,.detail_wrap,.detail_wrap .search_result ul li a,.detail_wrap .tag_year,.detail_wrap .update_txt,.detail_wrap p,.guide_bg_wrap .top_area .desc_area,.layer_tab ul li a,.layer_tab_content .desc,.layer_tab_content .feature ul li span,.scInfo .scPlaytime,.scList .scLinkTxt,.select_classes_wrap .select_title_desc,.sound_info_desc p,.sound_info_tab li a,.sound_info_tab li.active a,.top_gameinfo_wrap p.h2_desc,section.feature_wrap.second .hisoty_wrap .box_history .inner .text_area,section.feature_wrap.second .hisoty_wrap .tab_history_nav li a{font-size:12px}}
@media (max-width: 480px){.select_classes_wrap .select_classes_list{grid-template-columns:repeat(3, minmax(calc(60px + var(--padding-select_character) * 2), calc(118px + var(--padding-select_character) * 2)))}}
@media only screen and (max-height: 415px) and (min-width: 415px) and (orientation: landscape){.layer_tab{margin-bottom:1rem}.layer_tab ul li a{height:2.2rem;font-size:0.8rem}.layer_tab_content .feature{margin-bottom:0.5rem}.layer_tab_content .feature ul li{margin:0.3rem 0}.layer_tab_content .feature ul li span{font-size:0.7rem}.layer_tab_content .feature ul li .title + span{font-size:0.7rem}.layer_tab_content .desc{height:4.4rem;font-size:0.6rem}.layer_class_detail .inner h2{display:none}.layer_class_detail .inner{height:auto}.layer_class_detail .btn_layer_close{top:50%;right:1.6rem;margin-top:-2.8rem;-webkit-transform:scale(0.7);transform:scale(0.7)}}