@charset "UTF-8";
/** @project: 180730_fafurion @author: NCSOFT @update : 2018-7-27 11:14:36 */
/** import */
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body { margin: 0; }

/* HTML5 display definitions for IE 9- ========================================================================== */
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; }

audio, canvas, progress, video { display: inline-block; }

audio:not([controls]) { display: none; height: 0; }

progress { vertical-align: baseline; }

template, [hidden] { display: none; }

/* Links ========================================================================== */
a { background-color: transparent; }

a:active, a:hover { outline-width: 0; }

/* Text-level semantics ========================================================================== */
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }

b, strong { font-weight: inherit; }

b, strong { font-weight: bolder; }

dfn { font-style: italic; }

h1 { font-size: 2em; margin: 0.67em 0; }

mark { background-color: #ff0; color: #000; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Embedded content ========================================================================== */
img { border-style: none; }

svg:not(:root) { overflow: hidden; }

/* Grouping content ========================================================================== */
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

figure { margin: 1em 40px; }

hr { box-sizing: content-box; height: 0; overflow: visible; }

/* Forms ========================================================================== */
button, input, select, textarea { font: inherit; }

optgroup { font-weight: bold; }

button, input, select { overflow: visible; }

button, input, select, textarea { margin: 0; }

button, select { text-transform: none; }

button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer; }

[disabled] { cursor: default; }

button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

button:-moz-focusring, input:-moz-focusring { outline: 1px dotted ButtonText; }

fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }

textarea { overflow: auto; }

[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

[type="search"] { -webkit-appearance: textfield; }

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

* { margin: 0; padding: 0; }

html, body { min-width: 1100px; }

body { background: #0b1925; color: #91785a; margin: 0; padding: 0; font-family: "Segoe UI",sans-serif; font-size: 12px; line-height: 1; }

button { outline: 0; background: none; border: 0; cursor: pointer; }

img { border: 0; }

ul, ol { list-style: none; }

table { border-spacing: 0; }

caption { height: 0; overflow: hidden; font-size: 0; }

a { color: #e8d0b3; }

a:hover { color: #e8d0b3; }

.gnbContainer { width: 1100px; }

html, body { height: 100%; }

div#div_nctop { position: fixed !important; }

div#div_nctop div.gnbContainer { max-width: 1260px !important; width: 100% !important; }

#container { opacity: 0; position: relative; overflow: hidden; }

h1, h2, h3, h4, h5, h6 { margin: 0; }

/** common */
.is-mobile-hidden { display: block !important; }

.is-pc-hidden { display: none !important; }

.mb0 { margin-bottom: 0 !important; }

.obj { position: absolute; left: 50%; }

/*#header { position: relative; padding-top: 33px; }*/

#naviArea { display: block; height: 82px; position: fixed; /*top: 33px;*/ width: 100%; z-index: 10000; background: rgba(0, 0, 0, 0.4); transition: 0.5s background ease-in-out; }

#naviArea .anchor { width: 1260px; margin: 0 auto; }

#naviArea .anchor .home, #naviArea .anchor .update { text-indent: -999em; }

#naviArea .navi ul { overflow: hidden; float: right; margin: 30px 60px 0; }

#naviArea .navi ul li { float: left; padding: 0 13px; line-height: 27px; }

#naviArea .navi ul li a { display: block; color: #b8cbe0; text-decoration: none; font-size: 16px; font-weight: normal; transition: all 0.3s; }

#naviArea .navi ul li.index { padding-left: 15px; }

#naviArea .navi ul li.index a { width: 94px; height: 26px; border: 1px solid rgba(255, 255, 255, 0.3); line-height: 23px; text-align: center; font-weight: normal; font-size: 16px; }

#naviArea .navi ul li.on a, #naviArea .navi ul li a:hover { color: #fff; }

#naviArea .navi ul li.index.on a, #naviArea .navi ul li.index a:hover { color: #fff; border: 1px solid white; }

.content-1 #naviArea { background: rgba(0, 0, 0, 0.5); }

#footer { position: absolute; left: 0; bottom: 60px; right: 0; }

#footer p { color: #696d7b; text-align: center; height: 32px; line-height: 32px; font-size: 10px; font-family: 'Myriad Pro'; letter-spacing: -0.08em; }

#footer .share-wrap { position: absolute; top: 0; left: 50%; margin-left: 115px; }

.headerCnt .player { width: 100%; height: 100%; }

.headerCnt .main_player:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/movie_mask.png") repeat 50% 0; z-index: 2; }

.headerCnt .wrap-content { position: absolute; width: 100%; height: 100%; padding: 0; top: 0; z-index: 14; left: 0; }

.headerCnt .wrap-content .inner { position: relative; width: 1000px; height: 100%; margin: 0 auto; box-sizing: border-box; padding-top: 624px; text-align: center; }

.headerCnt .wrap-content .txt-date { position: absolute; top: 315px; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); font-weight: 400; display: inline-block; color: #fff; text-align: center; font-size: 16px; padding-bottom: 2px; letter-spacing: -0.05em; z-index: 14; }

.headerCnt .wrap-content .txt-date:after { content: ""; display: block; width: 100%; height: 1px; position: absolute; background: #fff; bottom: 0px; }

.headerCnt .wrap-content .tit-header { position: absolute; top: 288px; left: 50%; width: 727px; height: 304px; margin-left: -363.5px; margin-left: -354px; }

.headerCnt .wrap-content .tit-header .bg { position: absolute; top: 28px; left: -23px; width: 730px; height: 219px; background: url("../img/bg_title.png") no-repeat 50% 0; z-index: 11; }

.headerCnt .wrap-content .tit-header .light { position: absolute; top: 18px; left: -75px; width: 792px; height: 240px; background: url("../img/light_title.png") no-repeat 50% 0; z-index: 13; }

.headerCnt .wrap-content .tit-header .title { position: absolute; top: 0; left: 0; width: 727px; height: 304px; background: url("../img/title.png") no-repeat 50% 0; text-indent: -999em; z-index: 12; }

.headerCnt .wrap-content .tit-header .sub-title { position: absolute; bottom: 8px; left: 164px; width: 396px; height: 55px; background: url("../img/sub_title.png") no-repeat 50% 0; text-indent: -999em; z-index: 14; }

.headerCnt .wrap-content .txt-header01 { position: relative; text-align: center; line-height: 30px; color: #b8d6f7; font-size: 18px; z-index: 14; }

.headerCnt .wrap-content .txt-header01 strong { font-weight: bold; color: #fff; font-size: 24px; }

.headerCnt .wrap-content .btn-scroll { position: fixed; bottom: 0px; left: 50%; margin-left: -33px; opacity: 0; text-indent: -999em; margin-bottom: 55px; text-decoration: none; display: block; width: 66px; height: 50px; background: url("../img/btn_scroll.png") no-repeat 0 0; z-index: 100; }

.wrap-content { padding: 120px 0 0; width: 1000px; margin: 0 auto; }

.wrap-button { text-align: center; margin-bottom: 30px; }

.btn-top { position: absolute; bottom: 43px; right: 46px; width: 40px; height: 40px; background: url("../img/btn_top.jpg") no-repeat 50% 0; position: fixed; text-decoration: none; text-indent: -9999em; z-index: 1000; transition: 1s all ease-in-out; }

.btn-wrap { text-align: center; }

.btn-wrap .btn-link-power { width: 264px; height: 59px; background: rgba(149, 106, 65, 0.85); color: #fff; font-size: 20px; line-height: 59px; text-align: center; display: inline-block; text-indent: 0; position: relative; left: 0; text-decoration: none; transition: background 0.8s; margin: 0 10px; }

.btn-wrap .btn-link-power:before { content: ''; display: inline-block; width: 17px; height: 19px; margin-right: 8px; vertical-align: top; position: relative; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); background: url("../img/icon_power.png") no-repeat 50% 0; }

.btn-wrap .btn-link-power:hover { background: #956a41; }

.section-tit, .section-tit span { font-size: 50px; font-weight: bold; color: #fff; text-align: center; }

.section-em { display: block !important; text-align: center; font-size: 18px; color: #d4b394; font-style: normal; margin-bottom: 8px; letter-spacing: -0.08em; }

.section-tit { margin-bottom: 80px; }

.section-tit span { display: inline-block; position: relative; padding: 0 50px; }

.section-tit span:before { content: ""; display: block; position: absolute; top: 50%; left: 0; width: 34px; height: 9px; margin-top: -4.5px; background: url("../img/bul_sectitle_left.png") no-repeat 50% 0; }

.section-tit span:after { content: ""; display: block; position: absolute; top: 50%; right: 0; width: 34px; height: 9px; margin-top: -4.5px; background: url("../img/bul_sectitle_right.png") no-repeat 50% 0; }

.section-txt { font-size: 16px; text-align: center; color: #af8a67; line-height: 24px; margin-top: -60px; margin-bottom: 70px; letter-spacing: -0.05em; }

.article-tit { font-size: 24px; font-weight: bold; color: #91c1ea; text-align: center; margin-bottom: 35px; }

.article-tit em { display: block; width: 343px; height: 56px; text-align: center; font-style: normal; font-size: 26px; color: #fff; margin: 10px auto 0; line-height: 56px; background: url("../img/bg_article_stitle.png") no-repeat 50% 0; }

.article-txt { font-size: 16px; color: #748a99; line-height: 20px; text-align: center; letter-spacing: -0.05em; }

.list-info dl { display: table; width: 100%; }

.list-info dt { display: table-cell; width: 162px; height: 51px; vertical-align: top; }

.list-info dt span { display: inline-block; width: 162px; height: 41px; text-align: center; line-height: 41px; font-size: 16px; color: #99a5b5; background: url("../img/bg_list_label.png") no-repeat 50% 0; }

.list-info dd { display: table-cell; width: calc(100% - 162px); box-sizing: border-box; font-size: 16px; color: #fff; line-height: 24px; padding: 0px 0 0 16px; }

.part-tit { text-align: center; margin-bottom: 10px; }

.part-tit span { display: inline-block; width: 202px; height: 41px; text-align: center; line-height: 41px; font-size: 16px; color: #99a5b5; background: url("../img/bg_part_label.png") no-repeat 50% 0; }

.part-txt { font-size: 16px; color: #fff; text-align: center; line-height: 24px; letter-spacing: -0.05em; }

.swiper-stage { box-sizing: border-box; width: 808px; margin: 0 auto; border: 1px solid #1e293c; background: #181e2a; padding: 40px; min-height: 525px; position: relative; }

.swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: 42px; height: 81px; margin-top: -40.5px; background-size: auto; }

.swiper-button-next { background: url("../img/btn_slide_next.png") no-repeat 50% 0; right: -62px; }

.swiper-button-prev { background: url("../img/btn_slide_prev.png") no-repeat 50% 0; left: -62px; }

.swiper-pagination { bottom: -50px; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); }

.swiper-pagination-bullet { width: 18px; height: 18px; -ms-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0; margin: 0 7px; background: #7b6755; opacity: 1; }

.swiper-pagination-bullet-active { background: #d4b394; opacity: 1; }

.table-wrap { width: 898px; margin: 0 auto; position: relative; }

.table-wrap table { width: 100%; border: 1px solid #435e75; }

.table-wrap table thead tr th { height: 42px; border-bottom: 1px solid transparent; border-right: 1px solid #2c3e4e; background: #435e75; font-size: 14px; color: #c8def0; font-weight: bold; text-align: center; }

.table-wrap table thead tr th:last-child { border-right: 0; }

.table-wrap table thead tr th.after { background: #735a42; color: #ffeddb; }

.table-wrap table tbody tr th, .table-wrap table tbody tr td { height: 39px; border-bottom: 1px solid #2c3e4e; border-right: 1px solid #2c3e4e; font-size: 14px; text-align: center; font-weight: normal; background: rgba(21, 23, 29, 0.6); color: #88a6bf; }

.table-wrap table tbody tr td:last-child { border-right: 0; }

.table-wrap table tbody tr td.after { background: rgba(98, 74, 52, 0.15); color: #e8d4c2; border-bottom: 1px solid #453930; }

.table-wrap table tbody tr:last-child th, .table-wrap table tbody tr:last-child td { border-bottom: 0; }

.table-wrap:before { content: ""; display: block; width: calc(25% + 1px); position: absolute; top: 0; right: 0; bottom: 0; border: 4px solid #e0b387; z-index: 1; }

.section { position: relative; height: 100%; }

.section em, .section span, .section strong { display: inline-block; }

.section-1 .bg-mask-class { position: relative; display: block; overflow: hidden; height: 1012px; text-indent: -999em; background: url("../img/bg_section_1.jpg") no-repeat 50% 0; text-indent: 0; }

.section-1 .wrap-content { padding: 155px 0 0; }

.section-1 .section-tit { margin-bottom: 55px; font-size: 40px; text-align: left; padding-left: 222px; }

.section-1 .section-tit span { padding: 0; font-size: 40px; }

.section-1 .section-tit span:before, .section-1 .section-tit span:after { display: none; }

.section-1 .synopsis { text-align: left; padding-left: 222px; }

.section-1 .synopsis p { font-size: 16px; color: #b8d6f7; line-height: 24px; margin-bottom: 24px; letter-spacing: -0.05em; }

.section-1 .synopsis .btn-wrap { text-align: left; margin-top: 50px; }

.section-1 .synopsis .btn-movie-play { display: inline-block; width: 264px; height: 59px; line-height: 59px; font-size: 20px; color: #fff; background: rgba(149, 106, 65, 0.85); text-align: center; text-decoration: none; letter-spacing: -0.07em; }

.section-1 .synopsis .btn-movie-play:after { content: ""; display: inline-block; width: 31px; height: 31px; background: url("../img/btn_play.png") no-repeat 50% 0; margin-left: 10px; vertical-align: top; -ms-transform: translateY(50%); transform: translateY(50%); }

.section-1 .synopsis .btn-movie-play:hover { background: #956a41; }

.section-2 .bg-mask-class { position: relative; display: block; overflow: hidden; height: 2283px; text-indent: -999em; background: url("../img/bg_section_2.jpg") no-repeat 50% 0; text-indent: 0; }

.section-2 .article-1 .box { background: url("../img/box_article_1.jpg") no-repeat 50% 0; box-sizing: border-box; width: 1000px; height: 346px; padding: 76px; margin-bottom: 80px; }

.section-2 .article-1 .obj-1 { position: absolute; top: 185px; left: 50%; width: 548px; height: 581px; margin-left: -274px; background: url("../img/obj_sec_2_1.png") no-repeat 50% 0; margin-left: 95px; }

.section-2 .article-1 .obj-1 .rock { position: absolute; top: 273px; left: -85px; width: 202px; height: 253px; background: url("../img/obj_sec_2_2.png") no-repeat 50% 0; }

.section-2 .article-2 .box { background: url("../img/box_article_2.jpg") no-repeat 50% 0; box-sizing: border-box; width: 1000px; height: 1178px; padding: 73px 50px; margin-bottom: 80px; }

.section-2 .article-2 .box-2 { margin-bottom: 40px; }

.section-2 .article-2 .step { position: relative; margin: 65px 0 80px; }

.section-2 .article-2 .step:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: #606c81; }

.section-2 .article-2 .step:after { content: ''; display: block; clear: both; }

.section-2 .article-2 .step li { float: left; width: calc(100% / 7); padding-top: 18px; font-size: 16px; color: #fff; text-align: center; position: relative; }

.section-2 .article-2 .step li:before { content: ""; display: block; width: 12px; height: 12px; background: #33b0ff; transform: translate3d(-50%, -50%, 0) rotate(45deg); position: absolute; top: 0; left: 50%; }

.section-2 .article-2 .step li em { font-size: 14px; color: #d00d0d; display: block; width: 100%; text-align: center; font-style: normal; padding-top: 15px; margin-top: 15px; position: relative; }

.section-2 .article-2 .step li em:before { content: ""; background: url("../img/icon_step.png") no-repeat 50% 0; position: absolute; top: 0; left: 50%; width: 17px; height: 10px; margin-left: -8.5px; }

.section-2 .article-2 .swiper-stage { margin-top: 40px; }

.section-2 .article-2 .fafurion-area .swiper-slide dl { position: relative; }

.section-2 .article-2 .fafurion-area .swiper-slide dl .tit { position: absolute; top: 0px; left: 50%; width: 240px; height: 40px; margin-left: -120px; background: url("../img/bg_slide_title.png") no-repeat 50% 0; position: relative; text-align: center; font-size: 18px; font-weight: normal; color: #fff; line-height: 40px; z-index: 2; }

.section-2 .article-2 .fafurion-area .swiper-slide dl .img { border: 1px solid #26334a; position: relative; top: -20px; }

.section-2 .article-2 .fafurion-area .swiper-slide dl .caption { text-align: center; font-size: 14px; color: #a3c5ff; line-height: 20px; letter-spacing: -0.05em; }

.section-3 .bg-mask-class { position: relative; display: block; overflow: hidden; height: 2353px; text-indent: -999em; background: url("../img/bg_section_3.jpg") no-repeat 50% 0; text-indent: 0; }

.section-3 .article-1 { margin-bottom: 150px; }

.section-3 .article-1 .box { background: url("../img/box_article_3.jpg") no-repeat 50% 0; box-sizing: border-box; width: 1000px; height: 399px; padding: 76px 56px; margin-bottom: 60px; position: relative; }

.section-3 .article-1 .box:after { content: ''; display: block; position: absolute; top: 60px; right: 60px; width: 381px; height: 277px; background: url("../img/map_hunter.png") no-repeat 50% 0; }

.section-3 .article-1 .box .list-info dt { height: 71px; }

.section-3 .article-1 .hunter-stage { box-sizing: border-box; width: 1000px; margin: 0 auto; position: relative; }

.section-3 .article-1 .navi-background a { width: 65px; height: 65px; -ms-transform: rotate(45deg); transform: rotate(45deg); overflow: hidden; transition: all 0.3s; border: 1px solid #aab1c6; z-index: 2; }

.section-3 .article-1 .navi-background a:hover { box-shadow: 0 0 10px 3px rgba(99, 173, 255, 0.66); }

.section-3 .article-1 .navi-background a.active { box-shadow: 0 0 10px 3px rgba(99, 173, 255, 0.66); border: 1px solid #b8e3ff; }

.section-3 .article-1 .navi-background a.active:before { content: ''; box-shadow: 0 0 10px 3px rgba(99, 173, 255, 0.66) inset; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }

.section-3 .article-1 .navi-background a span { position: absolute; top: 50%; left: 50%; width: 94px; height: 94px; margin-top: -47px; margin-left: -47px; -ms-transform: rotate(-45deg); transform: rotate(-45deg); z-index: 1; transition: background 0.3s; }

.section-3 .article-1 .navi-background a.m1 { position: absolute; top: 14px; left: 14px; }

.section-3 .article-1 .navi-background a.m1 span { background: url("../img/navi_monster_01_off.jpg") no-repeat 50% 0; }

.section-3 .article-1 .navi-background a.m1.active span { background: url("../img/navi_monster_01_on.jpg") no-repeat 50% 0; }

.section-3 .article-1 .navi-background a.m2 { position: absolute; top: 114px; left: 14px; }

.section-3 .article-1 .navi-background a.m2 span { background: url("../img/navi_monster_02_off.jpg") no-repeat 50% 0; }

.section-3 .article-1 .navi-background a.m2.active span { background: url("../img/navi_monster_02_on.jpg") no-repeat 50% 0; }

.section-3 .article-1 .navi-background a.m3 { position: absolute; top: 214px; left: 14px; }

.section-3 .article-1 .navi-background a.m3 span { background: url("../img/navi_monster_03_off.jpg") no-repeat 50% 0; }

.section-3 .article-1 .navi-background a.m3.active span { background: url("../img/navi_monster_03_on.html") no-repeat 50% 0; }

.section-3 .article-1 .navi-background a.m4 { position: absolute; top: 314px; left: 14px; }

.section-3 .article-1 .navi-background a.m4 span { background: url("../img/navi_monster_04_off.jpg") no-repeat 50% 0; }

.section-3 .article-1 .navi-background a.m4.active span { background: url("../img/navi_monster_04_on.html") no-repeat 50% 0; }

.section-3 .article-1 .navi-background a.m5 { position: absolute; top: 414px; left: 14px; }

.section-3 .article-1 .navi-background a.m5 span { background: url("../img/navi_monster_05_off.jpg") no-repeat 50% 0; }

.section-3 .article-1 .navi-background a.m5.active span { background: url("../img/navi_monster_05_on.html") no-repeat 50% 0; }

.section-3 .article-1 .navi-monster a { width: 65px; height: 65px; -ms-transform: rotate(45deg); transform: rotate(45deg); overflow: hidden; transition: all 0.3s; border: 1px solid #aab1c6; z-index: 2; }

.section-3 .article-1 .navi-monster a:hover { box-shadow: 0 0 10px 3px rgba(99, 173, 255, 0.66); }

.section-3 .article-1 .navi-monster a.active { box-shadow: 0 0 10px 3px rgba(99, 173, 255, 0.66); border: 1px solid #b8e3ff; }

.section-3 .article-1 .navi-monster a.active:before { content: ''; box-shadow: 0 0 10px 3px rgba(99, 173, 255, 0.66) inset; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }

.section-3 .article-1 .navi-monster a span { position: absolute; top: 50%; left: 50%; width: 94px; height: 94px; margin-top: -47px; margin-left: -47px; -ms-transform: rotate(-45deg); transform: rotate(-45deg); z-index: 1; transition: background 0.3s; }

.section-3 .article-1 .navi-monster a.m1 { position: absolute; top: 14px; right: 14px; }

.section-3 .article-1 .navi-monster a.m1 span { background: url("../img/navi_monster_06_off.jpg") no-repeat 50% 0; }

.section-3 .article-1 .navi-monster a.m1.active span { background: url("../img/navi_monster_06_on.jpg") no-repeat 50% 0; }

.section-3 .article-1 .navi-monster a.m2 { position: absolute; top: 114px; right: 14px; }

.section-3 .article-1 .navi-monster a.m2 span { background: url("../img/navi_monster_07_off.jpg") no-repeat 50% 0; }

.section-3 .article-1 .navi-monster a.m2.active span { background: url("../img/navi_monster_07_on.jpg") no-repeat 50% 0; }

.section-3 .article-1 .navi-monster a.m3 { position: absolute; top: 214px; right: 14px; }

.section-3 .article-1 .navi-monster a.m3 span { background: url("../img/navi_monster_08_off.jpg") no-repeat 50% 0; }

.section-3 .article-1 .navi-monster a.m3.active span { background: url("../img/navi_monster_08_on.jpg") no-repeat 50% 0; }

.section-3 .article-1 .navi-monster a.m4 { position: absolute; top: 314px; right: 14px; }

.section-3 .article-1 .navi-monster a.m4 span { background: url("../img/navi_monster_09_off.jpg") no-repeat 50% 0; }

.section-3 .article-1 .navi-monster a.m4.active span { background: url("../img/navi_monster_09_on.jpg") no-repeat 50% 0; }

.section-3 .article-1 .navi-monster a.m5 { position: absolute; top: 414px; right: 14px; }

.section-3 .article-1 .navi-monster a.m5 span { background: url("../img/navi_monster_10_off.jpg") no-repeat 50% 0; }

.section-3 .article-1 .navi-monster a.m5.active span { background: url("../img/navi_monster_10_on.jpg") no-repeat 50% 0; }

.section-3 .article-1 .monster-area { height: 495px; margin-left: -73px; margin-right: -73px; }

.section-3 .article-1 .monster-area .swiper-wrapper .swiper-slide { opacity: 0 !important; position: relative; transition: opacity 0.3s !important; }

.section-3 .article-1 .monster-area .swiper-wrapper .swiper-slide .monster { z-index: 2; }

.section-3 .article-1 .monster-area .swiper-wrapper .swiper-slide .monster-1 { position: absolute; top: 6px; left: 197px; width: 949px; height: 480px; background: url("../img/img_monster_01.png") no-repeat 50% 0; }

.section-3 .article-1 .monster-area .swiper-wrapper .swiper-slide .monster-2 { position: absolute; top: 4px; left: 419px; width: 367px; height: 489px; background: url("../img/img_monster_02.png") no-repeat 50% 0; }

.section-3 .article-1 .monster-area .swiper-wrapper .swiper-slide .monster-3 { position: absolute; top: 1px; left: 291px; width: 475px; height: 489px; background: url("../img/img_monster_03.png") no-repeat 50% 0; }

.section-3 .article-1 .monster-area .swiper-wrapper .swiper-slide .monster-4 { position: absolute; top: 2px; left: 365px; width: 408px; height: 473px; background: url("../img/img_monster_04.png") no-repeat 50% 0; }

.section-3 .article-1 .monster-area .swiper-wrapper .swiper-slide .monster-5 { position: absolute; top: 2px; left: 390px; width: 358px; height: 489px; background: url("../img/img_monster_05.png") no-repeat 50% 0; }

.section-3 .article-1 .monster-area .swiper-wrapper .swiper-slide .shadow { z-index: 1; transition: all 0.4s; opacity: 0; -ms-transform: scale(0.8); transform: scale(0.8); transition-delay: 0.2s; background: #0a0e10; border-radius: 50%; }

.section-3 .article-1 .monster-area .swiper-wrapper .swiper-slide .shadow-1 { position: absolute; top: 427px; left: 244px; width: 501px; height: 64px; }

.section-3 .article-1 .monster-area .swiper-wrapper .swiper-slide .shadow-2 { position: absolute; top: 448px; left: 435px; width: 267px; height: 46px; }

.section-3 .article-1 .monster-area .swiper-wrapper .swiper-slide .shadow-3 { position: absolute; top: 414px; left: 429px; width: 264px; height: 68px; }

.section-3 .article-1 .monster-area .swiper-wrapper .swiper-slide .shadow-4 { position: absolute; top: 416px; left: 427px; width: 280px; height: 72px; }

.section-3 .article-1 .monster-area .swiper-wrapper .swiper-slide .shadow-5 { position: absolute; top: 410px; left: 432px; width: 249px; height: 64px; }

.section-3 .article-1 .monster-area .swiper-wrapper .swiper-slide-active { opacity: 1 !important; }

.section-3 .article-1 .monster-area .swiper-wrapper .swiper-slide-active .shadow { opacity: 0.8; -ms-transform: scale(1); transform: scale(1); }

.section-3 .article-2 .article-tit { margin-bottom: 15px; }

.section-3 .article-2 .article-txt { margin-bottom: 15px; }

.section-3 .article-2 .box { background: url("../img/box_article_4.jpg") no-repeat 50% 0; box-sizing: border-box; width: 1000px; height: 346px; padding: 64px 76px; margin-bottom: 40px; position: relative; }

.section-3 .article-2 .box .list-info dt { height: 61px; }

.section-3 .article-2 .box .list-info dd li { padding-left: 13px; text-indent: -13px; margin-bottom: 5px; }

.section-3 .article-2 .obj-2 { position: absolute; top: 1490px; left: 50%; width: 725px; height: 646px; margin-left: -362.5px; background: url("../img/obj_sec_3_1.png") no-repeat 50% 0; margin-left: 245px; }

.section-4 .bg-mask-class { position: relative; display: block; overflow: hidden; height: 1187px; text-indent: -999em; background: url("../img/bg_section_4.jpg") no-repeat 50% 0; text-indent: 0; }

.section-4 .bg-mask-class .section-txt { margin-bottom: 45px; }

.section-4 .bg-mask-class .navi-item { text-align: center; margin-bottom: 40px; }

.section-4 .bg-mask-class .navi-item a { width: 100px; height: 160px; display: inline-block; z-index: 2; margin: 0 10px; transition: background 0.6s; text-indent: -999em; }

.section-4 .bg-mask-class .navi-item a.m1 { background: url("../img/navi_weapon_01_off.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .navi-item a.m1:hover, .section-4 .bg-mask-class .navi-item a.m1.active { background: url("../img/navi_weapon_01_on.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .navi-item a.m2 { background: url("../img/navi_weapon_02_off.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .navi-item a.m2:hover { background: url("../img/navi_weapon_02_ov.html") no-repeat 50% 0; }

.section-4 .bg-mask-class .navi-item a.m2:hover, .section-4 .bg-mask-class .navi-item a.m2.active { background: url("../img/navi_weapon_02_on.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .navi-item a.m3 { background: url("../img/navi_weapon_03_off.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .navi-item a.m3:hover, .section-4 .bg-mask-class .navi-item a.m3.active { background: url("../img/navi_weapon_03_on.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .navi-item a.m4 { background: url("../img/navi_weapon_04_off.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .navi-item a.m4:hover, .section-4 .bg-mask-class .navi-item a.m4.active { background: url("../img/navi_weapon_04_on.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .navi-item a.m5 { background: url("../img/navi_weapon_05_off.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .navi-item a.m5:hover, .section-4 .bg-mask-class .navi-item a.m5.active { background: url("../img/navi_weapon_05_on.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .navi-item a.m6 { background: url("../img/navi_weapon_06_off.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .navi-item a.m6:hover, .section-4 .bg-mask-class .navi-item a.m6.active { background: url("../img/navi_weapon_06_on.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .navi-item a.m7 { background: url("../img/navi_weapon_07_off.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .navi-item a.m7:hover, .section-4 .bg-mask-class .navi-item a.m7.active { background: url("../img/navi_weapon_07_on.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .item-stage { width: 1000px; height: 486px; margin: 0 auto 30px; background: url("../img/bg_item_swiper.jpg") no-repeat 50% 0; }

.section-4 .bg-mask-class .item-stage .swiper-container { overflow: visible; }

.section-4 .bg-mask-class .item-stage .swiper-slide { width: 1000px; height: 486px; position: relative; opacity: 0 !important; transition: opacity 0.3s !important; }

.section-4 .bg-mask-class .item-stage .swiper-slide .tit { position: absolute; top: -15px; left: 50%; width: 345px; height: 56px; margin-left: -172.5px; background: url("../img/bg_slide_label.png") no-repeat 50% 0; text-align: center; line-height: 56px; font-size: 26px; color: #fff; }

.section-4 .bg-mask-class .item-stage .swiper-slide .img { opacity: 0; transform: translate3d(20px, -10px, 0) scale(0.95); -ms-transform-origin: top right; transform-origin: top right; transition: all 0.6s ease-in-out; transition-delay: 0.1s; z-index: 1; position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; }

.section-4 .bg-mask-class .item-stage .swiper-slide .img-1 { background: url("../img/img_weapon_01.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .item-stage .swiper-slide .img-2 { background: url("../img/img_weapon_02.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .item-stage .swiper-slide .img-3 { background: url("../img/img_weapon_03.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .item-stage .swiper-slide .img-4 { background: url("../img/img_weapon_04.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .item-stage .swiper-slide .img-5 { background: url("../img/img_weapon_05.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .item-stage .swiper-slide .img-6 { background: url("../img/img_weapon_06.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .item-stage .swiper-slide .img-7 { background: url("../img/img_weapon_07.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .item-stage .swiper-slide .light { z-index: 2; transition: all 0.6s; opacity: 0; transition-delay: 0.7s; position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; }

.section-4 .bg-mask-class .item-stage .swiper-slide .light-1 { background: url("../img/light_weapon_01.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .item-stage .swiper-slide .light-2 { background: url("../img/light_weapon_02.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .item-stage .swiper-slide .light-3 { background: url("../img/light_weapon_03.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .item-stage .swiper-slide .light-4 { background: url("../img/light_weapon_04.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .item-stage .swiper-slide .light-5 { background: url("../img/light_weapon_05.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .item-stage .swiper-slide .light-6 { background: url("../img/light_weapon_06.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .item-stage .swiper-slide .light-7 { background: url("../img/light_weapon_07.png") no-repeat 50% 0; }

.section-4 .bg-mask-class .item-stage .swiper-slide-active { opacity: 1 !important; }

.section-4 .bg-mask-class .item-stage .swiper-slide-active .img { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

.section-4 .bg-mask-class .item-stage .swiper-slide-active .light { opacity: 1; }

.section-5 .bg-mask-class { position: relative; display: block; overflow: hidden; height: 2079px; text-indent: -999em; background: url("../img/bg_section_5.jpg") no-repeat 50% 0; text-indent: 0; }

.section-5 .bg-mask-class .section-txt { margin-bottom: 45px; }

.section-5 .bg-mask-class .navi-item { text-align: center; margin-bottom: 40px; }

.section-5 .bg-mask-class .navi-item a { width: 60px; height: 118px; display: inline-block; z-index: 2; margin: 0 4px; transition: background 0.6s; text-indent: -999em; }

.section-5 .bg-mask-class .navi-item a.m1 { background: url("../img/navi_item_01_off.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m1:hover, .section-5 .bg-mask-class .navi-item a.m1.active { background: url("../img/navi_item_01_on.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m2 { background: url("../img/navi_item_02_off.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m2:hover, .section-5 .bg-mask-class .navi-item a.m2.active { background: url("../img/navi_item_02_on.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m3 { background: url("../img/navi_item_03_off.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m3:hover, .section-5 .bg-mask-class .navi-item a.m3.active { background: url("../img/navi_item_03_on.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m4 { background: url("../img/navi_item_04_off.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m4:hover, .section-5 .bg-mask-class .navi-item a.m4.active { background: url("../img/navi_item_04_on.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m5 { background: url("../img/navi_item_05_off.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m5:hover, .section-5 .bg-mask-class .navi-item a.m5.active { background: url("../img/navi_item_05_on.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m6 { background: url("../img/navi_item_06_off.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m6:hover, .section-5 .bg-mask-class .navi-item a.m6.active { background: url("../img/navi_item_06_on.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m7 { background: url("../img/navi_item_07_off.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m7:hover, .section-5 .bg-mask-class .navi-item a.m7.active { background: url("../img/navi_item_07_on.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m8 { background: url("../img/navi_item_08_off.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m8:hover, .section-5 .bg-mask-class .navi-item a.m8.active { background: url("../img/navi_item_08_on.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m9 { background: url("../img/navi_item_09_off.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m9:hover, .section-5 .bg-mask-class .navi-item a.m9.active { background: url("../img/navi_item_09_on.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m10 { background: url("../img/navi_item_10_off.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m10:hover, .section-5 .bg-mask-class .navi-item a.m10.active { background: url("../img/navi_item_10_on.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m11 { background: url("../img/navi_item_11_off.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m11:hover, .section-5 .bg-mask-class .navi-item a.m11.active { background: url("../img/navi_item_11_on.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m12 { background: url("../img/navi_item_12_off.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m12:hover, .section-5 .bg-mask-class .navi-item a.m12.active { background: url("../img/navi_item_12_on.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m13 { background: url("../img/navi_item_13_off.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m13:hover, .section-5 .bg-mask-class .navi-item a.m13.active { background: url("../img/navi_item_13_on.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m14 { background: url("../img/navi_item_14_off.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a.m14:hover, .section-5 .bg-mask-class .navi-item a.m14.active { background: url("../img/navi_item_14_on.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .navi-item a:first-child { margin-left: 0; }

.section-5 .bg-mask-class .navi-item a:last-child { margin-right: 0; }

.section-5 .bg-mask-class .item-stage { width: 1000px; height: 486px; margin: 0 auto 70px; background: url("../img/bg_item_swiper.jpg") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-container { overflow: visible; }

.section-5 .bg-mask-class .item-stage .swiper-slide { width: 1000px; height: 486px; position: relative; opacity: 0 !important; transition: opacity 0.3s !important; }

.section-5 .bg-mask-class .item-stage .swiper-slide .tit { position: absolute; top: -15px; left: 50%; width: 345px; height: 56px; margin-left: -172.5px; background: url("../img/bg_slide_label.png") no-repeat 50% 0; text-align: center; line-height: 56px; font-size: 26px; color: #fff; }

.section-5 .bg-mask-class .item-stage .swiper-slide .img { opacity: 0; transform: translate3d(20px, -10px, 0) scale(0.95); -ms-transform-origin: top right; transform-origin: top right; transition: all 0.6s ease-in-out; transition-delay: 0.1s; z-index: 1; }

.section-5 .bg-mask-class .item-stage .swiper-slide .img-1 { position: absolute; top: 177px; left: 121px; width: 776px; height: 177px; background: url("../img/img_item_01.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .img-2 { position: absolute; top: 170px; left: 115px; width: 759px; height: 187px; background: url("../img/img_item_02.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .img-3 { position: absolute; top: 82px; left: 214px; width: 584px; height: 375px; background: url("../img/img_item_03.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .img-4 { position: absolute; top: 163px; left: 83px; width: 832px; height: 206px; background: url("../img/img_item_04.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .img-5 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/img_item_05.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .img-6 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/img_item_06.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .img-7 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/img_item_07.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .img-8 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/img_item_08.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .img-9 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/img_item_09.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .img-10 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/img_item_10.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .img-11 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/img_item_11.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .img-12 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/img_item_12.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .img-13 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/img_item_13.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .img-14 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/img_item_14.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .light { z-index: 2; transition: all 0.6s; opacity: 0; transition-delay: 0.7s; }

.section-5 .bg-mask-class .item-stage .swiper-slide .light-1 { position: absolute; top: 57px; left: 118px; width: 802px; height: 281px; background: url("../img/light_item_01.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .light-2 { position: absolute; top: 118px; left: 57px; width: 802px; height: 281px; background: url("../img/light_item_02.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .light-3 { position: absolute; top: 77px; left: 194px; width: 642px; height: 261px; background: url("../img/light_item_03.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .light-4 { position: absolute; top: 90px; left: 75px; width: 844px; height: 248px; background: url("../img/light_item_04.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .light-5 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/light_item_05.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .light-6 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/light_item_06.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .light-7 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/light_item_07.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .light-8 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/light_item_08.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .light-9 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/light_item_09.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .light-10 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/light_item_10.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .light-11 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/light_item_11.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .light-12 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/light_item_12.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .light-13 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/light_item_13.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide .light-14 { position: absolute; top: 0px; left: 0px; width: 1000px; height: 486px; background: url("../img/light_item_14.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .item-stage .swiper-slide-active { opacity: 1 !important; }

.section-5 .bg-mask-class .item-stage .swiper-slide-active .img { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

.section-5 .bg-mask-class .item-stage .swiper-slide-active .light { opacity: 1; }

.bg-mask-class .navi-season { text-align: center; margin-bottom: 20px; }

.bg-mask-class .navi-season a { display: inline-block; width: 196px; height: 50px; text-align: center; line-height: 50px; color: #88a6bf; font-size: 16px; transition: all 0.3s; text-decoration: none; margin: 0 3px; background: #435e75; }

.bg-mask-class .navi-season a.active { background: #765d45; color: #fff; }

.section-5 .bg-mask-class .navi-armor { text-align: center; margin-bottom: 20px; }

.section-5 .bg-mask-class .navi-armor a { display: inline-block; width: 196px; height: 50px; text-align: center; line-height: 50px; color: #88a6bf; font-size: 16px; transition: all 0.3s; text-decoration: none; margin: 0 3px; background: #435e75; }

.section-5 .bg-mask-class .navi-armor a.active { background: #765d45; color: #fff; }

.section-5 .bg-mask-class .armor-stage { width: 1000px; height: 680px; margin: 0 auto 40px; box-sizing: border-box; padding: 42px 134px 0; position: relative; background: url("../img/bg_season_swiper.jpg") no-repeat 50% 0; }

.section-5 .bg-mask-class .armor-stage .swiper-button-prev { left: 25px; }

.section-5 .bg-mask-class .armor-stage .swiper-button-next { right: 25px; }

.section-5 .bg-mask-class .armor-stage .swiper-pagination { bottom: 40px; }

.section-5 .bg-mask-class .armor-stage .swiper-slide .img { display: block; width: 712px; height: 449px; margin: 0 auto 15px; }

.section-5 .bg-mask-class .armor-stage .swiper-slide .img-1 { background: url("../img/img_armor_01.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .armor-stage .swiper-slide .img-2 { background: url("../img/img_armor_02.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .armor-stage .swiper-slide .img-3 { background: url("../img/img_armor_03.png") no-repeat 50% 0; }

.section-5 .bg-mask-class .armor-stage .swiper-slide .info dt { text-align: center; margin-bottom: 10px; }

.section-5 .bg-mask-class .armor-stage .swiper-slide .info dt span { display: inline-block; width: 87px; height: 36px; border: 1px solid #448fe1; text-align: center; line-height: 36px; color: #77a7dc; font-size: 14px; border-radius: 24px; }

.section-5 .bg-mask-class .armor-stage .swiper-slide .info dd { text-align: center; font-size: 14px; color: #a3c5ff; line-height: 20px; letter-spacing: -0.05em; }

.section-6 .bg-mask-class { position: relative; display: block; overflow: hidden; height: 1859px; text-indent: -999em; background: url("../img/bg_section_6.jpg") no-repeat 50% 0; text-indent: 0; }

.section-6 .bg-mask-class .section-txt { margin-bottom: 35px; }

.section-6 .bg-mask-class .box { width: 1000px; height: 1368px; box-sizing: border-box; padding: 65px 51px; margin: 0 auto 50px; background: url("../img/bg_box_system.png") no-repeat 50% 0; }

.section-6 .bg-mask-class .article { margin-bottom: 50px; }

.section-6 .bg-mask-class .article .article-tit { margin-bottom: 30px; }

.section-6 .bg-mask-class .article-2 .table-wrap table colgroup col:nth-child(1) { width: 87px; }

.section-6 .bg-mask-class .article-2 .table-wrap table colgroup col:nth-child(2) { width: 161px; }

.section-6 .bg-mask-class .article-2 .table-wrap table colgroup col:nth-child(3) { width: 342px; }

.section-6 .bg-mask-class .article-2 .table-wrap:before { width: calc(100% - 598px); }

.section-6 .bg-mask-class .article-3 .table-wrap table colgroup col:nth-child(1) { width: 204px; }

.section-6 .bg-mask-class .article-3 .table-wrap table colgroup col:nth-child(2) { width: 244px; }

.section-6 .bg-mask-class .article-3 .table-wrap table colgroup col:nth-child(3) { width: 244px; }

.section-6 .bg-mask-class .article-3 .table-wrap:before { width: calc(100% - 700px); }

.section-6 .bg-mask-class .article-4 .article-txt { margin-bottom: 40px; }

.section-6 .bg-mask-class .list-jewel { text-align: center; }

.section-6 .bg-mask-class .list-jewel li { display: inline-block; margin: 0 9px; text-align: center; font-size: 16px; color: #809ac8; }

.section-6 .bg-mask-class .list-jewel li i { display: block; width: 112px; height: 118px; margin: 0 auto; position: relative; background: url("../img/bg_list.png") no-repeat 50% 0; }

.section-6 .bg-mask-class .list-jewel li i img { position: absolute; top: 31px; left: 31px; }

.section-6 .bg-mask-class .list-smelting { text-align: center; }

.section-6 .bg-mask-class .list-smelting li { display: inline-block; margin: 0; width: 225px; text-align: center; font-size: 16px; color: #809ac8; }

.section-6 .bg-mask-class .list-smelting li i { display: block; width: 132px; height: 139px; margin: 0 auto; position: relative; background: url("../img/bg_list2.png") no-repeat 50% 0; }

.section-6 .bg-mask-class .list-smelting li i img { position: absolute; top: 42px; left: 43px; }

.section-7 .bg-mask-class { position: relative; display: block; overflow: hidden; text-indent: -999em; background: url("../img/bg_section_7.jpg") no-repeat 50% 0; text-indent: 0; padding-bottom: 70px; }

.section-7 .bg-mask-class .section-tit { margin-bottom: 25px; }

.section-7 .bg-mask-class .navi-class { text-align: center; margin-bottom: 40px; }

.section-7 .bg-mask-class .navi-class a { width: 92px; height: 118px; display: inline-block; z-index: 2; margin: 0 2px; transition: background 0.6s; text-indent: -999em; }

.section-7 .bg-mask-class .navi-class a.m1 { background: url("../img/navi_class_01_off.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a.m1:hover, .section-7 .bg-mask-class .navi-class a.m1.active { background: url("../img/navi_class_01_on.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a.m2 { background: url("../img/navi_class_02_off.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a.m2:hover, .section-7 .bg-mask-class .navi-class a.m2.active { background: url("../img/navi_class_02_on.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a.m3 { background: url("../img/navi_class_03_off.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a.m3:hover, .section-7 .bg-mask-class .navi-class a.m3.active { background: url("../img/navi_class_03_on.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a.m4 { background: url("../img/navi_class_04_off.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a.m4:hover, .section-7 .bg-mask-class .navi-class a.m4.active { background: url("../img/navi_class_04_on.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a.m5 { background: url("../img/navi_class_05_off.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a.m5:hover, .section-7 .bg-mask-class .navi-class a.m5.active { background: url("../img/navi_class_05_on.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a.m6 { background: url("../img/navi_class_06_off.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a.m6:hover, .section-7 .bg-mask-class .navi-class a.m6.active { background: url("../img/navi_class_06_on.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a.m7 { background: url("../img/navi_class_07_off.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a.m7:hover, .section-7 .bg-mask-class .navi-class a.m7.active { background: url("../img/navi_class_07_on.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a.m8 { background: url("../img/navi_class_08_off.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a.m8:hover, .section-7 .bg-mask-class .navi-class a.m8.active { background: url("../img/navi_class_08_on.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a.m9 { background: url("../img/navi_class_09_off.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a.m9:hover, .section-7 .bg-mask-class .navi-class a.m9.active { background: url("../img/navi_class_09_on.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a.m10 { background: url("../img/navi_class_10_off.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a.m10:hover, .section-7 .bg-mask-class .navi-class a.m10.active { background: url("../img/navi_class_10_on.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .navi-class a:first-child { margin-left: 0; }

.section-7 .bg-mask-class .navi-class a:last-child { margin-right: 0; }

.section-7 .bg-mask-class .class-stage { width: 1000px; margin: 0 auto 70px; }

.section-7 .bg-mask-class .class-stage .swiper-container { overflow: visible; }

.section-7 .bg-mask-class .class-stage .swiper-slide { width: 1000px; position: relative; opacity: 0 !important; box-sizing: border-box; padding: 73px 54px 0 313px; transition: opacity 0.3s !important; }

.section-7 .bg-mask-class .class-stage .swiper-slide .tit { position: absolute; top: -15px; left: 50%; width: 345px; height: 56px; margin-left: -172.5px; background: url("../img/bg_slide_label.png") no-repeat 50% 0; text-align: center; line-height: 56px; font-size: 26px; color: #fff; z-index: 5; }

.section-7 .bg-mask-class .class-stage .swiper-slide .obj { z-index: 3; }

.section-7 .bg-mask-class .class-stage .swiper-slide .obj-1 { position: absolute; top: 80px; left: -24px; width: 422px; height: 651px; background: url("../img/obj_skill_01.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .obj-2 { position: absolute; top: -13px; left: 25px; width: 414px; height: 785px; background: url("../img/obj_skill_02.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .obj-3 { position: absolute; top: 128px; left: -146px; width: 711px; height: 872px; background: url("../img/obj_skill_03.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .obj-4 { position: absolute; top: 93px; left: -122px; width: 725px; height: 920px; background: url("../img/obj_skill_04.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .obj-5 { position: absolute; top: 69px; left: -134px; width: 611px; height: 901px; background: url("../img/obj_skill_05.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .obj-6 { position: absolute; top: 30px; left: -113px; width: 717px; height: 801px; background: url("../img/obj_skill_06.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .obj-7 { position: absolute; top: 16px; left: 64px; width: 481px; height: 707px; background: url("../img/obj_skill_07.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .obj-8 { position: absolute; top: -3px; left: -43px; width: 578px; height: 984px; background: url("../img/obj_skill_08.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .obj-9 { position: absolute; top: 176px; left: 36px; width: 371px; height: 724px; background: url("../img/obj_skill_09.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .obj-10 { position: absolute; top: 49px; left: 11px; width: 360px; height: 771px; background: url("../img/obj_skill_10.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap { width: 100%; z-index: 4; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table colgroup col:nth-child(1) { width: 257px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table colgroup col:nth-child(2) { width: 201px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table thead tr th { height: 42px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th { text-align: left; padding-left: 20px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon { display: inline-block; width: 32px; height: 32px; margin-right: 10px; vertical-align: middle; background: url("../img/icon_skill.png") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-1-1 { background-position: 0 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-1-2 { background-position: -50px 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-1-3 { background-position: -100px 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-1-4 { background-position: -150px 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-1-5 { background-position: -200px 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-1-6 { background-position: -250px 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-1-7 { background-position: -300px 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-1-8 { background-position: -350px 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-1-9 { background-position: -400px 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-1-10 { background-position: -450px 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-1-11 { background-position: -500px 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-1-12 { background-position: -550px 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-1-13 { background-position: -600px 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-1-14 { background-position: -650px 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-1-15 { background-position: -700px 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-1-16 { background-position: -750px 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-2-1 { background-position: 0 -50px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-2-2 { background-position: -50px -50px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-2-3 { background-position: -100px -50px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-2-4 { background-position: -150px -50px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-2-5 { background-position: -200px -50px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-2-6 { background-position: -250px -50px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-2-7 { background-position: -300px -50px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-2-8 { background-position: -350px -50px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-2-9 { background-position: -400px -50px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-2-10 { background-position: -450px -50px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-2-11 { background-position: -500px -50px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-2-12 { background-position: -550px -50px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-3-1 { background-position: 0 -100px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-3-2 { background-position: -50px -100px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-3-3 { background-position: -100px -100px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-3-4 { background-position: -150px -100px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-3-5 { background-position: -200px -100px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-3-6 { background-position: -250px -100px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-3-7 { background-position: -300px -100px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-3-8 { background-position: -350px -100px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-3-9 { background-position: -400px -100px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-3-10 { background-position: -450px -100px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-3-11 { background-position: -500px -100px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-3-12 { background-position: -550px -100px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-3-13 { background-position: -600px -100px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-3-14 { background-position: -650px -100px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-3-15 { background-position: -700px -100px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-3-16 { background-position: -750px -100px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-3-17 { background-position: -800px -100px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-3-18 { background-position: -850px -100px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-4-1 { background-position: 0 -150px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-4-2 { background-position: -50px -150px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-4-3 { background-position: -100px -150px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-4-4 { background-position: -150px -150px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-4-5 { background-position: -200px -150px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-4-6 { background-position: -250px -150px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-4-7 { background-position: -300px -150px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-4-8 { background-position: -350px -150px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-4-9 { background-position: -400px -150px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-4-10 { background-position: -450px -150px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-4-11 { background-position: -500px -150px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-4-12 { background-position: -550px -150px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-4-13 { background-position: -600px -150px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-4-14 { background-position: -650px -150px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-4-15 { background-position: -700px -150px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-4-16 { background-position: -750px -150px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-4-17 { background-position: -800px -150px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-4-18 { background-position: -850px -150px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-5-1 { background-position: 0 -200px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-5-2 { background-position: -50px -200px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-5-3 { background-position: -100px -200px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-5-4 { background-position: -150px -200px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-5-5 { background-position: -200px -200px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-5-6 { background-position: -250px -200px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-5-7 { background-position: -300px -200px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-5-8 { background-position: -350px -200px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-5-9 { background-position: -400px -200px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-5-10 { background-position: -450px -200px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-5-11 { background-position: -500px -200px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-5-12 { background-position: -550px -200px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-5-13 { background-position: -600px -200px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-5-14 { background-position: -650px -200px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-5-15 { background-position: -700px -200px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-5-16 { background-position: -750px -200px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-6-1 { background-position: 0 -250px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-6-2 { background-position: -50px -250px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-6-3 { background-position: -100px -250px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-6-4 { background-position: -150px -250px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-6-5 { background-position: -200px -250px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-6-6 { background-position: -250px -250px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-6-7 { background-position: -300px -250px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-6-8 { background-position: -350px -250px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-6-9 { background-position: -400px -250px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-6-10 { background-position: -450px -250px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-6-11 { background-position: -500px -250px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-6-12 { background-position: -550px -250px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-6-13 { background-position: -600px -250px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-7-1 { background-position: 0 -300px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-7-2 { background-position: -50px -300px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-7-3 { background-position: -100px -300px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-7-4 { background-position: -150px -300px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-7-5 { background-position: -200px -300px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-7-6 { background-position: -250px -300px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-7-7 { background-position: -300px -300px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-7-8 { background-position: -350px -300px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-7-9 { background-position: -400px -300px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-7-10 { background-position: -450px -300px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-8-1 { background-position: 0 -350px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-8-2 { background-position: -50px -350px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-8-3 { background-position: -100px -350px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-8-4 { background-position: -150px -350px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-8-5 { background-position: -200px -350px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-8-6 { background-position: -250px -350px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-8-7 { background-position: -300px -350px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-8-8 { background-position: -350px -350px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-8-9 { background-position: -400px -350px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-8-10 { background-position: -450px -350px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-8-11 { background-position: -500px -350px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-8-12 { background-position: -550px -350px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-8-13 { background-position: -600px -350px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-8-14 { background-position: -650px -350px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-8-15 { background-position: -700px -350px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-8-16 { background-position: -750px -350px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-8-17 { background-position: -800px -350px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-9-1 { background-position: 0 -400px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-9-2 { background-position: -50px -400px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-9-3 { background-position: -100px -400px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-9-4 { background-position: -150px -400px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-9-5 { background-position: -200px -400px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-9-6 { background-position: -250px -400px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-9-7 { background-position: -300px -400px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-9-8 { background-position: -350px -400px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-9-9 { background-position: -400px -400px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-9-10 { background-position: -450px -400px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-9-11 { background-position: -500px -400px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-9-12 { background-position: -550px -400px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-9-13 { background-position: -600px -400px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-9-14 { background-position: -650px -400px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-9-15 { background-position: -700px -400px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-9-16 { background-position: -750px -400px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-10-1 { background-position: 0 -450px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-10-2 { background-position: -50px -450px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-10-3 { background-position: -100px -450px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-10-4 { background-position: -150px -450px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-10-5 { background-position: -200px -450px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-10-6 { background-position: -250px -450px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-10-7 { background-position: -300px -450px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-10-8 { background-position: -350px -450px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-10-9 { background-position: -400px -450px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-10-10 { background-position: -450px -450px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-10-11 { background-position: -500px -450px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-10-12 { background-position: -550px -450px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th .icon-10-13 { background-position: -600px -450px; }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th, .section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr td { height: 48px; background: rgba(21, 23, 29, 0.79); }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr th.after, .section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap table tbody tr td.after { background: rgba(98, 74, 52, 0.15); }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap:before { width: calc(100% - 466px); }

.section-7 .bg-mask-class .class-stage .swiper-slide .skill .table-wrap .info { position: absolute; bottom: -50px; left: 0; font-size: 14px; color: #9b836e; }

.section-7 .bg-mask-class .class-stage .swiper-slide-active { opacity: 1 !important; }

.section-7 .bg-mask-class .class-stage .swiper-slide-active .light { opacity: 1; }

.section-7 .bg-mask-class .class-stage .swiper-slide-1 { height: 802px; background: url("../img/bg_skill_swiper_01.jpg") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide-2 { height: 802px; background: url("../img/bg_skill_swiper_02.jpg") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide-3 { height: 1096px; background: url("../img/bg_skill_swiper_03.jpg") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide-4 { height: 1096px; background: url("../img/bg_skill_swiper_04.jpg") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide-5 { height: 998px; background: url("../img/bg_skill_swiper_05.jpg") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide-6 { height: 851px; background: url("../img/bg_skill_swiper_06.jpg") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide-7 { height: 704px; background: url("../img/bg_skill_swiper_07.jpg") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide-8 { height: 1047px; background: url("../img/bg_skill_swiper_08.jpg") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide-9 { height: 998px; background: url("../img/bg_skill_swiper_09.jpg") no-repeat 50% 0; }

.section-7 .bg-mask-class .class-stage .swiper-slide-10 { height: 851px; background: url("../img/bg_skill_swiper_10.jpg") no-repeat 50% 0; }

.section-8 .bg-mask-class { position: relative; display: block; overflow: hidden; height: 951px; text-indent: -999em; background: url("../img/bg_section_8.jpg") no-repeat 50% 0; text-indent: 0; }

.section-8 .bg-mask-class .wrap-content { padding-top: 170px; }

.section-8 .bg-mask-class .section-tit { position: relative; }

.section-8 .bg-mask-class .section-tit:after { content: ''; position: absolute; top: -22px; left: 50%; width: 34px; height: 34px; margin-left: -17px; background: url("../img/icon_plus.png") no-repeat 50% 0; margin-left: 92px; }

.section-8 .bg-mask-class .table-wrap { width: 978px; }

.section-8 .bg-mask-class .table-wrap table colgroup col:nth-child(1) { width: 50%; }

.section-8 .bg-mask-class .table-wrap table thead tr th { height: 42px; }

.section-8 .bg-mask-class .table-wrap table tbody tr th { text-align: left; padding-left: 20px; }

.section-8 .bg-mask-class .table-wrap table tbody tr th, .section-8 .bg-mask-class .table-wrap table tbody tr td { height: auto; padding: 30px 20px; background: rgba(21, 23, 29, 0.6); }

.section-8 .bg-mask-class .table-wrap table tbody tr th ul li, .section-8 .bg-mask-class .table-wrap table tbody tr td ul li { text-align: left; font-size: 14px; padding-left: 11px; text-indent: -11px; color: #88a6bf; line-height: 20px; letter-spacing: -0.04em; }

.section-8 .bg-mask-class .table-wrap table tbody tr td:last-child { padding-right: 30px; }

.section-8 .bg-mask-class .table-wrap:before { display: none; }

.section-8 .bg-mask-class .table-wrap .list-info { width: 350px; margin: 0 auto; }

.section-8 .bg-mask-class .table-wrap .list-info dd { text-align: left; padding-left: 15px; }

.section-9 .bg-mask-class { position: relative; display: block; overflow: hidden; height: 683px; text-indent: -999em; background: url("../img/bg_section_9.jpg") no-repeat 50% 0; text-indent: 0; }

.section-9 .bg-mask-class .wrap-content { padding-top: 180px; }

.section-9 .bg-mask-class .table-wrap { width: 978px; }

.section-9 .bg-mask-class .table-wrap table colgroup col:nth-child(1) { width: 244px; }

.section-9 .bg-mask-class .table-wrap table colgroup col:nth-child(2) { width: 367px; }

.section-9 .bg-mask-class .table-wrap table thead tr th { height: 42px; }

.section-9 .bg-mask-class .table-wrap table tbody tr th { text-align: left; padding-left: 20px; }

.section-9 .bg-mask-class .table-wrap table tbody tr th, .section-9 .bg-mask-class .table-wrap table tbody tr td { height: auto; padding: 10px 0; background: rgba(21, 23, 29, 0.6); }

.section-9 .bg-mask-class .table-wrap table tbody tr th ul li, .section-9 .bg-mask-class .table-wrap table tbody tr td ul li { font-size: 14px; color: #88a6bf; line-height: 20px; letter-spacing: -0.04em; }

.section-9 .bg-mask-class .table-wrap table tbody tr th.after ul li, .section-9 .bg-mask-class .table-wrap table tbody tr td.after ul li { color: #e8d4c2; }

.section-9 .bg-mask-class .table-wrap:before { width: calc(100% - 618px); background: rgba(98, 74, 52, 0.15); }

.section-9 .bg-mask-class .table-wrap .list-info { width: 350px; margin: 0 auto; }

.section-9 .bg-mask-class .table-wrap .list-info dd { text-align: left; padding-left: 15px; }

.section-10 .bg-mask-class { position: relative; display: block; overflow: hidden; height: 1038px; text-indent: -999em; background: url("../img/bg_section_10.jpg") no-repeat 50% 0; text-indent: 0; }

.section-10 .bg-mask-class .table-wrap { width: 978px; }

.section-10 .bg-mask-class .table-wrap table colgroup col:nth-child(1) { width: 50%; }

.section-10 .bg-mask-class .table-wrap table thead tr th { height: 42px; }

.section-10 .bg-mask-class .table-wrap table tbody tr th { text-align: left; padding-left: 20px; }

.section-10 .bg-mask-class .table-wrap table tbody tr th, .section-10 .bg-mask-class .table-wrap table tbody tr td { height: auto; padding: 10px 0; background: rgba(21, 23, 29, 0.6); }

.section-10 .bg-mask-class .table-wrap table tbody tr th ul li, .section-10 .bg-mask-class .table-wrap table tbody tr td ul li { font-size: 14px; color: #88a6bf; line-height: 20px; letter-spacing: -0.04em; }

.section-10 .bg-mask-class .table-wrap table tbody tr th.after ul li, .section-10 .bg-mask-class .table-wrap table tbody tr td.after ul li { color: #e8d4c2; }

.section-10 .bg-mask-class .table-wrap:before { width: calc(50% - 8px); background: rgba(98, 74, 52, 0.15); }

.section-10 .bg-mask-class .table-wrap .list-info { width: 350px; margin: 0 auto; }

.section-10 .bg-mask-class .table-wrap .list-info dd { text-align: left; padding-left: 15px; }

.layer_movie { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.8); z-index: 500; }

.layer_movie #movieBox { position: absolute; top: 50%; left: 50%; width: 1280px; height: 720px; margin-top: -360px; margin-left: -640px; }

.layer_movie #movieBox .moovie_close { width: 44px; height: 44px; font-size: 0; display: block; position: absolute; transition: 1s; right: 20px; top: 20px; z-index: 4; }

.layer_close { width: 44px; height: 44px; font-size: 0; display: block; position: absolute; right: 40px; top: 120px; transition: 1s; }

.layer_close:before, .layer_close:after { transition: 1s; }

.layer_close:before, .layer_close:after { content: ""; margin: -1px 0 0 -22px; width: 44px; height: 2px; position: absolute; left: 50%; top: 50%; background: #fff; -ms-transform: rotate(45deg); transform: rotate(45deg); }

.layer_close:after { -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

.layer_close:hover { -ms-transform: rotate(360deg); transform: rotate(360deg); }

.layer_close:hover:before, .layer_close:hover:after { background: #ffdd80; }

/*animation*/
.animated { animation-duration: 1s; animation-fill-mode: both; }

@keyframes ani-txt1 { 0% { opacity: 0;
    margin-top: -20px; }
    100% { opacity: 1;
        margin-top: 0px; } }

@keyframes ani-txt2 { 0% { opacity: 0;
    transform: scale(1.1); }
    100% { opacity: 1;
        transform: scale(1); } }

@keyframes ani-txt3 { 0% { opacity: 0;
    transform: translateY(10px); }
    100% { opacity: 1;
        transform: translateY(0px); } }

.ani-txt1 { animation-name: ani-txt1; animation-delay: 0.5s; animation-duration: 0.8s; }

.ani-txt2 { animation-name: ani-txt2; animation-delay: 1.0s; animation-duration: 1s; }

.ani-txt3 { animation-name: ani-txt3; animation-delay: 1.8s; animation-duration: 0.5s; }

.ani-txt4 .t1 { animation-name: ani-txt3; animation-delay: 2.3s; animation-duration: 0.6s; }

.ani-txt4 .t2 { animation-name: ani-txt3; animation-delay: 2.6s; animation-duration: 0.6s; }

.ani-txt4 .t3 { animation-name: ani-txt3; animation-delay: 2.9s; animation-duration: 0.6s; }

.ani-txt5 .section-tit { animation-name: ani-txt3; animation-delay: 0.5s; animation-duration: 0.6s; }

.ani-txt1, .ani-txt2, .ani-txt3, .ani-txt4 .t1, .ani-txt4 .t2, .ani-txt4 .t3 { display: none; }

.active .ani-txt1, .active .ani-txt3, .active .ani-txt4 .t1, .active .ani-txt4 .t2, .active .ani-txt4 .t3 { display: inline-block; }

.active .ani-txt2 { display: block; }

.ani-txt5 .section-tit { transition: all 0.8s; opacity: 0; -ms-transform: translateY(-20px); transform: translateY(-20px); }

.ani-txt5 .synopsis .s1, .ani-txt5 .synopsis .s2, .ani-txt5 .synopsis .s3, .ani-txt5 .synopsis .s4, .ani-txt5 .synopsis .s5, .ani-txt5 .synopsis .s6, .ani-txt5 .synopsis .s7, .ani-txt5 .synopsis .s8, .ani-txt5 .synopsis .s9, .ani-txt5 .synopsis .s10, .ani-txt5 .synopsis .s11, .ani-txt5 .synopsis .s12, .ani-txt5 .synopsis .s13, .ani-txt5 .synopsis .s14, .ani-txt5 .synopsis .s15, .ani-txt5 .synopsis .s16, .ani-txt5 .synopsis .s17, .ani-txt5 .synopsis .s18, .ani-txt5 .synopsis .s19 { transition: opacity 0.6s ease-in-out, transform 0.6s ease-out; opacity: 0; -ms-transform: translateY(10px); transform: translateY(10px); }

.ani-txt5 .synopsis .s1 { transition-delay: 0.5s; }

.ani-txt5 .synopsis .s2 { transition-delay: 0.8s; }

.ani-txt5 .synopsis .s3 { transition-delay: 1.1s; }

.ani-txt5 .synopsis .s4 { transition-delay: 1.6s; }

.ani-txt5 .synopsis .s5 { transition-delay: 1.9s; }

.ani-txt5 .synopsis .s6 { transition-delay: 2.2s; }

.ani-txt5 .synopsis .s7 { transition-delay: 2.5s; }

.ani-txt5 .synopsis .s8 { transition-delay: 3.0s; }

.ani-txt5 .synopsis .s9 { transition-delay: 3.3s; }

.ani-txt5 .synopsis .s10 { transition-delay: 3.6s; }

.ani-txt5 .synopsis .s11 { transition-delay: 3.9s; }

.ani-txt5 .synopsis .s12 { transition-delay: 4.2s; }

.ani-txt5 .synopsis .s13 { transition-delay: 4.5s; }

.ani-txt5 .synopsis .s14 { transition-delay: 5.0s; }

.ani-txt5 .synopsis .s15 { transition-delay: 5.3s; }

.ani-txt5 .synopsis .s16 { transition-delay: 5.6s; }

.ani-txt5 .synopsis .s17 { transition-delay: 5.9s; }

.ani-txt5 .synopsis .btn-movie-play { transition: opacity 0.5s ease-in-out 6.4s, transform 0.6s ease-out 6.4s, background 0.8s linear 0s; opacity: 0; -ms-transform: translateY(10px); transform: translateY(10px); }

.ani-txt5 .synopsis .btn-link-power { transition: opacity 0.5s ease-in-out 2.0s, transform 0.6s ease-out 7.0s, background 0.8s linear 0s; opacity: 0; -ms-transform: translateY(10px); transform: translateY(10px); }

.content-1 .ani-txt5 .section-tit { opacity: 1; -ms-transform: translateY(0px); transform: translateY(0px); }

.content-1 .ani-txt5 .synopsis .s1, .content-1 .ani-txt5 .synopsis .s2, .content-1 .ani-txt5 .synopsis .s3, .content-1 .ani-txt5 .synopsis .s4, .content-1 .ani-txt5 .synopsis .s5, .content-1 .ani-txt5 .synopsis .s6, .content-1 .ani-txt5 .synopsis .s7, .content-1 .ani-txt5 .synopsis .s8, .content-1 .ani-txt5 .synopsis .s9, .content-1 .ani-txt5 .synopsis .s10, .content-1 .ani-txt5 .synopsis .s11, .content-1 .ani-txt5 .synopsis .s12, .content-1 .ani-txt5 .synopsis .s13, .content-1 .ani-txt5 .synopsis .s14, .content-1 .ani-txt5 .synopsis .s15, .content-1 .ani-txt5 .synopsis .s16, .content-1 .ani-txt5 .synopsis .s17 { opacity: 1; -ms-transform: translateY(0px); transform: translateY(0px); }

.content-1 .ani-txt5 .synopsis .btn-movie-play, .content-1 .ani-txt5 .synopsis .btn-link-power { opacity: 1; -ms-transform: translateY(0px); transform: translateY(0px); }

.section-2 .article-1 .obj-1 { opacity: 0; -ms-transform: translateX(50px); transform: translateX(50px); transition: all 0.8s ease-in-out; }

.section-2 .article-1 .obj-1 .rock { opacity: 0; transform: translate3d(-40px, -20px, 0); transition: all 0.8s ease-in-out; transition-delay: 0.8s; }

.section-3 .article-2 .obj-2 { opacity: 0; -ms-transform: translateX(50px); transform: translateX(50px); transition: all 0.8s ease-in-out; }

.section-2 .article-1 .obj-1.active { opacity: 1; -ms-transform: translateX(0px); transform: translateX(0px); }

.section-2 .article-1 .obj-1.active .rock { opacity: 1; transform: translate3d(0, 0, 0); }

.section-3 .article-2 .obj-2.active { opacity: 1; transform: translate3d(0, 0, 0); }

.class-area .swiper-slide .obj { opacity: 0; -ms-transform: translateX(-30px); transform: translateX(-30px); transition: all 0.7s; transition-delay: 0.1s; }

.class-area .swiper-slide-active .obj { opacity: 1; -ms-transform: translateX(0px); transform: translateX(0px); }

@media (min-width: 2560px) { .bg-mask-class { background-size: cover !important; } }

/*# sourceMappingURL=index.css.map */