/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */



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
}

img {
    border-style: none
}

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

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

figure {
    margin: 1em 40px
}

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

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
}


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
}

.navigation nav .linkBox .fb,
.navigation nav .linkBox .baha,
#TOPBOX .logo,
#TOPBOX h2,
#TOPBOX .videoBtn,
#TOPBOX .newsBox h4,
#JOB .sliderControl a,
#OTHER .btn_facebook {
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    color: transparent;
    border: 1px solid #8f6f47;
}

.navigation nav>a,
.navigation nav .linkBox .fb,
.navigation nav .linkBox .baha,
#TOPBOX .logo,
#TOPBOX h2,
#TOPBOX .videoBtn,
#JOB .sliderBox>div .infoBox h5,
#JOB .sliderBox>div .infoBox .race,
#JOB .sliderBox>div .infoBox .weapon,
#para-control>a {
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline
}

.navigation nav .logo_s,
#goTop,
#goPrev,
#goNext,
#goBot {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden
}

.navigation nav .linkBox .download,
.navigation nav .linkBox .ac,
main,
#TOPBOX,
#TOPBOX .txtBox,
#TOPBOX .newsBox>div,
#STORY,
#FEATURE,
#FEATURE h4,
#JOB,
#JOB>.wrap,
#JOB .sliderControl a,
#JOB .sliderBox .slide_02 .infoBox,
#JOB .sliderBox .slide_03 .infoBox,
#JOB .sliderBox .slide_05 .infoBox,
#JOB .sliderBox .slide_06 .infoBox,
#OTHER {
    position: relative
}

.navigation nav .linkBox .download:before,
.navigation nav .linkBox .ac:before,
#TOPBOX .newsBox,
#TOPBOX .newsBox .news_more,
#STORY .story_ch,
#FEATURE .slider,
#JOB .sliderControl,
#JOB .sliderControl a:before,
#JOB .slider,
#JOB .sliderBox,
#JOB .sliderBox>div .ch,
#para-control,
#OTHER.current .ch_monmon,
#OTHER>p,
#OTHER .btn_facebook {
    position: absolute
}

.navigation nav,
.navigation nav>a,
#TOPBOX .txtBox,
.content h4,
#STORY .wrap p,
#JOB .sliderControl a,
#JOB .level>div,
#JOB .level>div>ol>li,
#para-control,
#OTHER>p,
.ctrl {
    text-align: center
}

.description {
    background: #ffffff73;
    border-radius: 6px;
    padding: 5px;
    line-height: 1.4;
    margin-bottom: 20px;
    border: none !important;
    margin: 0 !important;
    font-weight: normal;
}

.content {
    padding: 0 !important;
}

.description_classes_video {
    border-radius: 0px 0px 6px 6px;
}

.wrap,
#TOPBOX .txtBox,
.content h4,
#FEATURE>.wrap {
    margin-left: auto;
    margin-right: auto
}

#JOB .sliderControl a:before,
#JOB .sliderBox:before,
#OTHER .ch_monmon:before,
#OTHER:before,
.ctrl:after {
    content: '';
    display: block;
    position: absolute;
    transition: all .3s
}

#JOB .sliderBox>div .infoBox .sub {
    font-family: "\5FAE\8F6F\96C5\9ED1", Verdana, arial;
    font-weight: bold
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "\5FAE\8F6F\96C5\9ED1", Verdana, arial
}

.navigation nav>a,
.navigation nav .logo_s,
.navigation nav .linkBox .fb,
.navigation nav .linkBox .baha,
#TOPBOX .logo,
#TOPBOX h2,
#TOPBOX .videoBtn,
.content h4,
#STORY .story_ch,
#JOB,
#OTHER .ch_monmon:before {
    background-repeat: no-repeat;
    background-size: 100% auto
}

#TOPBOX .newsBox {
    border-style: solid;
    border-image: url("/Themes/volia/img/frame.png") 3 3 round;
    padding: 0;
    border-width: 3px
}

#TOPBOX .newsBox>div {
    overflow: hidden
}

.wrap {
    position: relative;
    clear: both;
    width: 100%
}

@media (min-width: 765px) {
    .wrap {
        width: 1280px
    }
}





h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0;
    margin: 0;
    line-height: 1.2;
    color: white
}
















.wrap {
    padding: 0 .41667rem
}

@media (min-width: 765px) {
    .wrap {
        padding: 0
    }
}

.color01 {
    color: #c31919
}

.color02 {
    color: #0e4168
}

@media (min-width: 765px) {
    .sp {
        display: none
    }
}

.pc {
    display: none
}

@media (min-width: 765px) {
    .pc {
        display: block
    }
}

@keyframes monmon_upDown {
    0% {
        transform: translate(0, 0)
    }
    50% {
        transform: translate(0, -5%)
    }
    100% {
        transform: translate(0, 0)
    }
}

@keyframes story_upDown {
    0% {
        transform: translate3d(0, 0, 0)
    }
    50% {
        transform: translate3d(0, -2%, 0)
    }
    100% {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes story_upDown {
    0% {
        transform: translate3d(0, 0, 0)
    }
    50% {
        transform: translate3d(0, -2%, 0)
    }
    100% {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate(0, -100%)
    }
    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate(0, 100%)
    }
    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes leftIn {
    0% {
        opacity: 0;
        transform: translate(100%, 0)
    }
    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes sliderControl_rightIn {
    0% {
        opacity: 0;
        right: -20%
    }
    100% {
        opacity: 1;
        right: 2%
    }
}

@keyframes job_ch {
    0% {
        opacity: 0;
        transform: translate(150%, 0)
    }
    100% {
        opacity: 1;
        transform: translate(50%, 0)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes slideInDown {
    0% {
        transform: translateX(-50%) translateY(-100%);
        visibility: visible
    }
    100% {
        transform: translateX(-50%) translateY(0)
    }
}

#topBar {
    position: fixed;
    z-index: 9999999999;
    height: 35px;
    width: 100%
}

header {
    height: 1.40625rem;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

header a {
    color: #555
}

@media (min-width: 765px) {
    header {
        height: 105px
    }
}

@media (min-width: 1400px) {
    header {
        height: 135px
    }
}

.hamburger {
    display: block;
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: absolute;
    top: .08333rem;
    right: .3125rem;
    user-select: none;
    z-index: 99999;
    transition: all .3s
}

.hamburger i,
.hamburger i:before,
.hamburger i:after {
    box-shadow: 1px 1px 0 #ad9b7a inset, 1px 1px 0 rgba(0, 0, 0, 0.5);
    background-color: #231b11;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FkOWI3YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIzMWIxMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -moz-linear-gradient(45deg, #ad9b7a, #231b11);
    background-image: -webkit-linear-gradient(45deg, #ad9b7a, #231b11);
    background-image: linear-gradient(45deg, #ad9b7a, #231b11);
    position: absolute;
    width: 100%;
    height: 5px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    transition: all .5s;
    left: 0
}

.hamburger i:before,
.hamburger i:after {
    content: ''
}

.hamburger i {
    top: 50%
}

.hamburger i:before {
    top: -10px
}

.hamburger i:after {
    top: 10px
}

@media (min-width: 765px) {
    .hamburger {
        display: none
    }
}

.hamburger.on {
    top: 18px;
    right: 45px
}

.hamburger.on i {
    background-image: none;
    background-color: transparent;
    box-shadow: none
}

.hamburger.on i:before,
.hamburger.on i:after {
    background-color: #ffba27;
    box-shadow: 1px 1px 0 rgba(254, 235, 181, 0.8) inset, 1px 1px 0 rgba(0, 0, 0, 0.5);
    background-color: #ffba27;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjk0OCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmYmEyNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -moz-linear-gradient(45deg, #f0b948, #ffba27);
    background-image: -webkit-linear-gradient(45deg, #f0b948, #ffba27);
    background-image: linear-gradient(45deg, #f0b948, #ffba27);
    transform-origin: right
}

.hamburger.on i:before {
    transform: rotate(-45deg) translateY(-6px);
    -moz-transform: rotate(-45deg) translateY(-6px);
    -ms-transform: rotate(-45deg) translateY(-6px);
    -webkit-transform: rotate(-45deg) translateY(-6px);
    transform: rotate(-45deg) translateY(-6px)
}

.hamburger.on i:after {
    transform: rotate(45deg) translateY(6px);
    -moz-transform: rotate(45deg) translateY(6px);
    -ms-transform: rotate(45deg) translateY(6px);
    -webkit-transform: rotate(45deg) translateY(6px);
    transform: rotate(45deg) translateY(6px)
}

@keyframes logo_s_Animate {
    0% {
        filter: brightness(.65) sepia(1) contrast(1.2)
    }
    50% {
        filter: brightness(.9) sepia(1) contrast(1.2)
    }
    100% {
        filter: brightness(.65) sepia(1) contrast(1.2)
    }
}

.navigation {
    opacity: 0;
    position: fixed;
    right: 0;
    transition: all .3s;
    background-color: rgba(35, 27, 17, 0.9);
    width: 3.64583rem;
    height: 110vh
}

.navigation nav {
    position: relative;
    padding-top: 2.60417rem;
    font-size: 0
}

.navigation nav>a {
    font-size: .375rem;
    line-height: 1.04167rem;
    color: #ad9b7a;
    width: 90%;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    background-image: url('/Themes/volia/img/btn_bg.png?1488423867')
}

.navigation nav>a.current {
    -webkit-filter: brightness(1.4);
    filter: brightness(1.4);
    background-image: url('/Themes/volia/img/btn_bg_on.png?1488423867')
}

.navigation nav>a:hover {
    -webkit-filter: brightness(1.3);
    filter: brightness(1.3)
}

.navigation nav .logo_s {
    background-image: url('/Themes/volia/img/logo_s.png?1488533076');
    width: 3.09167rem;
    height: 1.11667rem;
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-bottom: .52083rem;
    filter: brightness(.65) sepia(1) contrast(1.2);
    animation-duration: 2.5s;
    animation-name: logo_s_Animate;
    animation-iteration-count: infinite
}

.navigation nav .logo_s.current {
    filter: brightness(.65) sepia(1) contrast(1.2);
    background-image: url('/Themes/volia/img/logo_s.png?1488533076')
}

.navigation nav .linkBox {
    padding-top: .52083rem
}

.navigation nav .linkBox>a {
    color: #ad9b7a;
    font-size: .375rem;
    line-height: .83333rem;
    display: block;
    margin: 0 .52083rem .41667rem;
    border: 1px solid #524637
}

.navigation nav .linkBox .download,
.navigation nav .linkBox .ac {
    overflow: hidden
}

.navigation nav .linkBox .download:before,
.navigation nav .linkBox .ac:before {
    -moz-transition: all, .3s;
    -o-transition: all, .3s;
    -webkit-transition: all, .3s;
    transition: all, .3s;
    left: 0;
    top: -100%;
    display: block;
    content: '即將開放';
    width: 100%;
    height: 100%;
    color: #231b11;
    background-color: #231b11
}

.navigation nav .linkBox .download:hover:before,
.navigation nav .linkBox .download:focus:before,
.navigation nav .linkBox .ac:hover:before,
.navigation nav .linkBox .ac:focus:before {
    background-color: #F9BB1F;
    top: 0
}

.navigation nav .linkBox .fb,
.navigation nav .linkBox .baha {
    border: none;
    margin-left: 0;
    margin-right: 0;
    margin-top: .625rem
}

.navigation nav .linkBox .fb {
    background-image: url('/Themes/volia/img/icon_fb.png?1488423867');
    width: .85417rem;
    height: .98958rem;
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-right: .3125rem
}

.navigation nav .linkBox .baha {
    background-image: url('/Themes/volia/img/icon_baha.png?1488423867');
    width: .85417rem;
    height: .98958rem;
    background-size: 100% auto;
    background-repeat: no-repeat
}

@media (min-width: 765px) {
    .navigation {
        position: fixed;
        top: 35px;
        opacity: 1;
        width: 100%;
        height: 90px;
        background-color: transparent
    }
    .navigation nav {
        padding-top: 0;
        background-color: transparent;
        position: relative;
        width: 100%;
        padding-top: 8px
    }
    .navigation nav>a {
        font-size: 16px;
        line-height: 50px;
        letter-spacing: 5px;
        width: 152px;
        height: 50px;
        background-image: url('/Themes/volia/img/btn_bg.png');
        -moz-transition: all, .3s, 1s;
        -o-transition: all, .3s, 1s;
        -webkit-transition: all, .3s, 1s;
        transition: all, .3s, 1s
    }
    .navigation nav .logo_s {
        width: 149px;
        height: 54px;
        background-image: url('/Themes/volia/img/logo_s.png');
        margin-bottom: 0;
        margin-right: 30px
    }
    .navigation nav .logo_s:hover {
        filter: brightness(1)
    }
    .navigation nav .linkBox {
        display: inline-block;
        vertical-align: middle;
        *vertical-align: auto;
        *zoom: 1;
        *display: inline;
        padding-top: 0;
        margin-left: 20px
    }
    .navigation nav .linkBox>a {
        display: inline-block;
        vertical-align: middle;
        *vertical-align: auto;
        *zoom: 1;
        *display: inline;
        font-size: 12px;
        letter-spacing: 2px;
        line-height: .83333rem;
        margin: 0 10px;
        padding: 0 10px
    }
    .navigation nav .linkBox .fb,
    .navigation nav .linkBox .baha {
        margin-top: 0
    }
    .navigation nav .linkBox .fb {
        margin-left: 10px
    }
}

@media (min-width: 1400px) {
    .navigation {
        height: 100px
    }
    .navigation nav {
        padding-top: 10px
    }
    .navigation nav>a {
        font-size: 16px;
        line-height: 64px;
        width: 203px;
        height: 67px;
        background-image: url('/Themes/volia/img/btn_bg.png')
    }
    .navigation nav .logo_s {
        width: 205px;
        height: 74px;
        background-image: url('/Themes/volia/img/logo_s.png')
    }
    .navigation nav .linkBox>a {
        font-size: 14px;
        line-height: 34px;
        margin: 0 5px;
        padding: 0 15px
    }
    .navigation nav .linkBox .fb {
        margin-left: 10px
    }
}

@media (min-width: 1600px) {
    .navigation nav>a {
        margin-left: 8px;
        margin-right: 8px
    }
    .navigation nav .logo_s {
        margin-right: 40px
    }
    .navigation nav .linkBox>a {
        padding: 0 15px
    }
    .navigation nav .linkBox .fb {
        margin-left: 15px
    }
}

.navigation.show {
    opacity: 1
}

.navigation.hide {
    opacity: 0;
    overflow: hidden;
    right: -3.64583rem
}

header>h3 {
    color: #ad9b7a;
    font-size: .4375rem;
    line-height: 1.40625rem;
    padding-left: .3125rem
}

header>h3>span {
    font-size: .375rem;
    font-style: normal;
    color: #ffba27
}

@media (min-width: 765px) {
    header>h3 {
        display: none
    }
}

#TOPBOX {
    height: 22.91667rem;
    overflow: hidden
}

#TOPBOX .logo,
#TOPBOX h2,
#TOPBOX .videoBtn {
    width: 100%
}

#TOPBOX .videoBtn {
    margin-top: 10.625rem;
    background-image: url('/Themes/volia/img/play_btn_sp.png?1488423949');
    width: 1.58594rem;
    height: 1.83594rem;
    background-size: 100% auto;
    background-repeat: no-repeat
}

#TOPBOX .newsBox {
    z-index: 888;
    width: 90%;
    transform: translateX(-50%);
    left: 50%;
    bottom: 1.5625rem
}

#TOPBOX .newsBox>div {
    background-color: rgba(255, 255, 255, 0.9);
    padding: .83333rem .52083rem
}

#TOPBOX .newsBox h4 {
    background-image: url('/Themes/volia/img/news_title.png?1488716405');
    width: 1.35rem;
    height: .46875rem;
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-bottom: .41667rem
}

#TOPBOX .newsBox ul {
    overflow: hidden;
    border-top: 1px dotted #8c8b8b;
    border-bottom: 1px dotted #fff
}

#TOPBOX .newsBox ul>li {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.6;
    border-top: 1px dotted #fff;
    border-bottom: 1px dotted #8c8b8b
}

#TOPBOX .newsBox ul>li:last-child {
    margin-bottom: 0
}

#TOPBOX .newsBox ul>li a {
    font-size: .3125rem;
    color: #231b11;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -1px;
    height: 100%
}

#TOPBOX .newsBox .news_more {
    font-size: .375rem;
    color: #ad9b7a;
    font-family: 'Righteous', sans-serif;
    display: block;
    padding: .3125rem .41667rem;
    top: 0;
    right: 0
}

@media (min-width: 765px) {
    #TOPBOX {
        height: 780px;
    }
    #TOPBOX .txtBox {
        top: 50%;
        width: 600px;
        transform: translateY(-28%)
    }
    #TOPBOX .logo {
        width: 411px;
        height: 171px;
        background-image: url('/Themes/volia/img/logo.png');
        opacity: 0;
        transform: translate(0, 0);
        animation: fadeInDown 2s .3s forwards
    }
    #TOPBOX h2 {
        width: 375px;
        height: 69px;
        background-image: url('/Themes/volia/img/slogan.png');
        margin-top: -20px;
        margin-left: auto;
        margin-right: auto;
        opacity: 0;
        transform: translate(0, 0);
        animation: fadeInUp 2s .8s forwards
    }
    #TOPBOX .videoBtn {
        width: 72px;
        height: 83px;
        background-image: url('/Themes/volia/img/play_btn.png');
        margin-top: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        transform: translate(0, 0);
        opacity: 0;
        animation: fadeInUp 1.5s 1.5s forwards
    }
    #TOPBOX .videoBtn:hover {
        filter: brightness(1.2)
    }
    #TOPBOX .newsBox {
        width: 330px;
        left: inherit;
        right: 20px;
        bottom: 16%;
        -moz-transition: all, .3s;
        -o-transition: all, .3s;
        -webkit-transition: all, .3s;
        transition: all, .3s;
        opacity: 0;
        transform: translate(0, 0);
        animation: leftIn 2s 1s forwards
    }
    #TOPBOX .newsBox>div {
        padding: 25px 30px
    }
    #TOPBOX .newsBox h4 {
        width: 144px;
        height: 50px;
        background-image: url('/Themes/volia/img/news_title.png')
    }
    #TOPBOX .newsBox ul>li {
        width: 100%
    }
    #TOPBOX .newsBox ul>li a {
        font-size: 13px
    }
    #TOPBOX .newsBox ul>li a:hover {
        color: #ad9b7a;
        text-decoration: none
    }
}

@media (min-width: 1400px) {
    #TOPBOX {
        height: 1000px;
        background-position: center -15%
    }
    #TOPBOX .txtBox {
        top: 50%;
        transform: translateY(-30%)
    }
    #TOPBOX .logo {
        width: 439px;
        height: 182px;
        background-image: url('/Themes/volia/img/logo.png')
    }
    #TOPBOX h2 {
        width: 425px;
        height: 78px;
        background-image: url('/Themes/volia/img/slogan.png')
    }
    #TOPBOX .videoBtn {
        width: 82px;
        height: 94px;
        background-image: url('/Themes/volia/img/play_btn.png')
    }
    #TOPBOX .newsBox {
        width: 360px;
        transform: translateX(0%);
        right: 15px;
        bottom: 28%
    }
    #TOPBOX .newsBox>div {
        padding: 20px 35px
    }
    #TOPBOX .newsBox h4 {
        width: 144px;
        height: 50px;
        background-image: url('/Themes/volia/img/news_title.png')
    }
    #TOPBOX .newsBox ul>li {
        line-height: 1.7
    }
    #TOPBOX .newsBox ul>li a {
        font-size: 14px
    }
    #TOPBOX .newsBox .news_more {
        padding: 25px 30px
    }
}

@media (min-width: 1600px) {
    #TOPBOX {
        background-position: center 50px
    }
    #TOPBOX .txtBox {
        transform: translateY(-20%)
    }
    #TOPBOX .logo {
        width: 548px;
        height: 227px;
        background-image: url('/Themes/volia/img/logo.png')
    }
    #TOPBOX h2 {
        width: 500px;
        height: 91px;
        background-image: url('/Themes/volia/img/slogan.png')
    }
    #TOPBOX .videoBtn {
        width: 102px;
        height: 118px;
        background-image: url('/Themes/volia/img/play_btn.png');
        margin-top: 10px
    }
    #TOPBOX .newsBox {
        width: 380px;
        transform: translateX(0%);
        right: 30px;
        bottom: 10%
    }
    #TOPBOX .newsBox>div {
        padding: 35px 35px
    }
    #TOPBOX .newsBox h4 {
        width: 144px;
        height: 50px;
        background-image: url('/Themes/volia/img/news_title.png')
    }
    #TOPBOX .newsBox .news_more {
        padding: 25px 30px
    }
}



.content section {
    min-height: 1005px;
    overflow: hidden;
    -moz-transition: all, .3s;
    -o-transition: all, .3s;
    -webkit-transition: all, .3s;
    transition: all, .3s
}

.classes_videos {
    background: none;
    margin-top: 60px;
    margin-left: 50px;
}

.content h4 {
    font-size: .5rem;
    padding-top: .5625rem;
    letter-spacing: 1px;
    margin-bottom: .41667rem;
    background-image: url('/Themes/volia/img/titletbg.png?1488423949');
    width: 6.95833rem;
    height: 1.75rem;
    background-size: 100% auto;
    background-repeat: no-repeat
}

@media (min-width: 765px) {
    
    .content h4 {
        font-size: 16px;
        padding-top: 15px;
        margin-bottom: 10px;
        width: 214px;
        height: 54px;
        background-image: url('https://cdn.volia.biz/OYcnHviSWsqxDPorEUZ3.png')
    }
}

@media (min-width: 1550px) {
    
    .content h4 {
        font-size: 19px;
        padding-top: 18px;
        margin-bottom: 20px;
        width: 254px;
        height: 64px;
        background-image: url('https://cdn.volia.biz/OYcnHviSWsqxDPorEUZ3.png')
    }
}


#STORY {
    height: 19.27083rem;
    background-position: center top;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-color: #d8cfc4;
    background-image: url('https://cdn.volia.biz/ET9eUj7wFX4tZJ3pH8cPiQv.jpg')
}

#STORY .wrap p {
    font-size: .375rem;
    line-height: 1.2;
    color: #231b11
}

@media (min-width: 765px) {
    #STORY {
        background-image: none
    }
    #STORY:before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-image: url('https://cdn.volia.biz/89WnXyNTS1_2IUc3H-VpbZe0GJ.jpg');
        opacity: 0;
        -moz-transition: background, 3.5s, 5s;
        -o-transition: background, 3.5s, 5s;
        -webkit-transition: background, 3.5s, 5s;
        transition: background, 3.5s, 5s
    }
    #STORY .story_ch {
        width: 887px;
        height: 615px;
        background-image: url('https://cdn.volia.biz/V9wF_A-tTiWyNCujsDhp.png');
        right: -10%;
        bottom: -200px;
        filter: blur(10px) sepia(0.8) opacity(0);
        -moz-transition: all, 1.5s, .5s;
        -o-transition: all, 1.5s, .5s;
        -webkit-transition: all, 1.5s, .5s;
        transition: all, 1.5s, .5s
    }
    #STORY .wrap {
        width: 50vw;
        position: absolute;
        left: 50%;
        top: 35%;
        transform: translate(-100%, -50%)
    }
    #STORY .wrap h4 {
        margin-left: 0;
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
        transform: translate(0, 0);
        opacity: 0
    }
    #STORY .wrap p {
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: 2px;
        margin-bottom: 20px;
        text-shadow: 0 0 0 #fff, 0 0 2px #fff, 0 0 2px #fff;
        padding-left: 20px;
        transform: translate(0, 0);
        opacity: 0;
    }
    #STORY.current:before {
        opacity: 1
    }
    #STORY.current .story_ch {
        animation: story_upDown 3s ease-out .5s infinite;
        right: -5%;
        bottom: -20px;
        filter: none
    }
    #STORY.current .wrap h4 {
        animation: fadeInUp 1.5s .3s forwards
    }
    #STORY.current .wrap p {
        animation: fadeInUp 1.5s .6s forwards
    }
}

@media (min-width: 1550px) {
    #STORY .story_ch {
        width: 1140px;
        height: 791px;
        background-image: url('https://cdn.volia.biz/V9wF_A-tTiWyNCujsDhp.png');
        bottom: -20%
    }
    #STORY .wrap {
        transform: translate(-80%, -50%)
    }
    #STORY .wrap h4 {
        margin-top: 60px;
        margin-bottom: 20px
    }
    #STORY .wrap p {
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 40px;
        padding-left: 30px
    }
}

@media (min-width: 1600px) {
    #STORY .story_ch {
        right: 0;
        bottom: -2%
    }
}

.sliderBox:after {
    content: '';
    display: block;
    clear: both
}

.sliderBox>div {
    float: left;
    width: 950px;
}

#FEATURE {
    background-color: #d8cfc4
}

#FEATURE>.wrap {
    padding-left: 0;
    padding-right: 0;
    width: 100%
}

#FEATURE h4 {
    z-index: 88
}

#FEATURE .slider {
    left: 0;
    top: 0;
    z-index: 1;
    overflow-y: hidden;
    height: 100vh;
    width: 100vw
}

#FEATURE .sliderBox {
    width: 500vw;
    height: 100vh;
    overflow-y: hidden
}

#FEATURE .sliderBox>div {
    height: 100vh;
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat
}

#FEATURE .sliderBox>div h5 {
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    color: transparent
}

#FEATURE .sliderBox .slide_01 {
    background-image: url('/Themes/volia/img/feature_sp_01.jpg?1488443518')
}

#FEATURE .sliderBox .slide_02 {
    background-image: url('/Themes/volia/img/feature_sp_02.jpg?1488443520')
}

#FEATURE .sliderBox .slide_03 {
    background-image: url('/Themes/volia/img/feature_sp_03.jpg?1488443522')
}

#FEATURE .sliderBox .slide_04 {
    background-image: url('/Themes/volia/img/feature_sp_04.jpg?1488443524')
}

#FEATURE .sliderBox .slide_05 {
    background-image: url('/Themes/volia/img/feature_sp_05.jpg?1488443526')
}

@media (min-width: 765px) {
    #FEATURE>.wrap {
        width: 1200px;
        height: 500px
    }
    #FEATURE .sliderBox {
        width: 500vw;
        height: 100vh
    }
    #FEATURE .sliderBox>div {
        opacity: 0;
        -moz-transition: all, 1s;
        -o-transition: all, 1s;
        -webkit-transition: all, 1s;
        transition: all, 1s
    }
    #FEATURE .sliderBox .slide_01 {
        background-image: url('https://cdn.volia.biz/Qy6O502utKj-H1dADkPWag.jpg')
    }
    #FEATURE .sliderBox .slide_02 {
        background-image: url('https://cdn.volia.biz/zQriyXJsOpbw8IdlmWUq4htD.jpg')
    }
    #FEATURE .sliderBox .slide_03 {
        background-image: url('https://cdn.volia.biz/dYCu1cNXa7ZvKWEwJxp-s0.jpg')
    }
    #FEATURE .sliderBox .slide_04 {
        background-image: url('https://cdn.volia.biz/x4kUS-V6tZLYrgR20DXa8f.jpg')
    }
    #FEATURE .sliderBox .slide_05 {
        background-image: url('https://cdn.volia.biz/649x-fEJkzGC0_3ItRYPH.jpg')
    }
    #FEATURE.current .sliderBox>div {
        opacity: 1
    }
}

#JOB>.wrap {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    z-index: 2
}

  
    #JOB>.wrap p {
        text-align: center
    }



@keyframes sliderControl {
    0% {
        background-color: #231b11
    }
    50% {
        background-color: #9A784C
    }
    100% {
        background-color: #231b11
    }
}

#JOB .sliderControl {
    width: 230px;
    height: 300px;
    top: 45%;
    right: -1.66667rem;
    transform: scale(0.48) rotate(45deg);
    overflow: hidden;
    -moz-transition: all, .3s;
    -o-transition: all, .3s;
    -webkit-transition: all, .3s;
    transition: all, .3s;
    z-index: 1
}

#JOB .sliderControl a {
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #231b11;
    width: 70px;
    height: 70px;
    margin-bottom: 4px;
    font-size: 12px;
    color: #ad9b7a;
    overflow: hidden;
    float: left;
    -moz-transition: all, .3s;
    -o-transition: all, .3s;
    -webkit-transition: all, .3s;
    transition: all, .3s
}

#JOB .sliderControl a:before {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(-45deg)
}

#JOB .sliderControl a:hover {
    background-color: #F9BB1F
}

#JOB .sliderControl a:hover:before {
    filter: brightness(.1)
}

#JOB .sliderControl a.current {
    animation-delay: .3s;
    animation-duration: 1.5s;
    animation-name: sliderControl;
    animation-iteration-count: infinite
}

#JOB .sliderControl a.current:hover {
    background-color: #F9BB1F
}

#JOB .sliderControl a.current:hover:before {
    filter: brightness(1)
}

#JOB .sliderControl a:nth-child(1):before {
    background-image: url('/Themes/volia/img/job_01.png?1488423867')
}

#JOB .sliderControl a:nth-child(2):before {
    background-image: url('/Themes/volia/img/job_02.png?1488423867')
}

#JOB .sliderControl a:nth-child(3):before {
    background-image: url('/Themes/volia/img/job_03.png?1488423867')
}

#JOB .sliderControl a:nth-child(4):before {
    background-image: url('/Themes/volia/img/job_04.png?1488423867')
}

#JOB .sliderControl a:nth-child(5):before {
    background-image: url('/Themes/volia/img/job_05.png?1488423867')
}

#JOB .sliderControl a:nth-child(6):before {
    background-image: url('/Themes/volia/img/job_06.png?1488423867')
}

#JOB .sliderControl a:nth-child(2n) {
    margin-right: 4px
}

#JOB .sliderControl a:nth-child(1) {
    margin-right: 144px
}

#JOB .sliderControl a:nth-child(3) {
    margin-right: 70px
}

#JOB .sliderControl a:nth-child(4) {
    margin-left: 74px
}

#JOB .sliderControl a:nth-child(6) {
    margin-left: 148px
}


#JOB .sliderControl {
    top: 5%;
    right: 0%;
    transform: scale(0.9) rotate(45deg) translate(0, -10%)
}

.slider {
    background: none !important;
}

#JOB .slider {
    left: 0;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 100%
}

#JOB .sliderBox {
    /*padding-top: 3.64583rem;*/
    width: 600vw;
    height: 100%;
}

#JOB .sliderBox:before {
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    background-size: 80%;
    opacity: .4
}

#JOB .sliderBox>div {
    min-height: 100%
}

#JOB .sliderBox .slide_01 .ch {
    background-image: url('https://cdn.volia.biz/eqyRZQVYWS-Tb6xEa3vNc.png');
    width: 10.88542rem;
    height: 9.09375rem;
    background-size: 100% auto;
    background-repeat: no-repeat
}

#JOB .sliderBox .slide_02 .ch {
    background-image: url('https://cdn.volia.biz/kYmVfU8JISecTXsuqi639yDra1.png');
    width: 7.80208rem;
    height: 7.42708rem;
    background-size: 100% auto;
    background-repeat: no-repeat
}

#JOB .sliderBox .slide_03 .ch {
    background-image: url('/Themes/volia/img/ch_03.png?1488423867');
    width: 7.6875rem;
    height: 8.67708rem;
    background-size: 100% auto;
    background-repeat: no-repeat
}

#JOB .sliderBox .slide_04 .ch {
    background-image: url('/Themes/volia/img/ch_04.png?1488423867');
    width: 9.78125rem;
    height: 7.55208rem;
    background-size: 100% auto;
    background-repeat: no-repeat
}

#JOB .sliderBox .slide_05 .ch {
    background-image: url('/Themes/volia/img/ch_05.png?1488423867');
    width: 11.07292rem;
    height: 9.44792rem;
    background-size: 100% auto;
    background-repeat: no-repeat
}

#JOB .sliderBox .slide_06 .ch {
    background-image: url('/Themes/volia/img/ch_06.png?1488423867');
    width: 8.83333rem;
    height: 9.44792rem;
    background-size: 100% auto;
    background-repeat: no-repeat
}

#JOB .sliderBox>div {
    overflow: hidden
}

#JOB .sliderBox>div .ch {
    top: 3.125rem;
    transform: translate(100%, -45%);
    opacity: 0;
    transition: transform 1000ms;
    transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1)
}

#JOB .sliderBox>div .infoBox {
    font-size: 0;
    padding-left: .83333rem;
    padding-right: .83333rem
}

#JOB .sliderBox>div .infoBox h5 {
    font-size: .75rem;
    vertical-align: bottom;
    margin-right: .20833rem;
    color: #705329;
    font-weight: bold
}

#JOB .sliderBox>div .infoBox h6 {
    display: none
}

#JOB .sliderBox>div .infoBox .race {
    vertical-align: bottom;
    color: #231b11;
    border: 1px solid #231b11;
    line-height: .52083rem;
    padding: 0 .16667rem;
    font-size: .10417rem;
    margin-right: .20833rem
}

#JOB .sliderBox>div .infoBox .weapon {
    vertical-align: bottom;
    color: #231b11;
    font-size: .3125rem;
    line-height: .52083rem
}

#JOB .sliderBox>div .infoBox .sub {
    font-size: .4375rem;
    margin-top: .20833rem;
    margin-bottom: .01042rem;
    color: rgba(35, 27, 17, 0.8)
}

#JOB .sliderBox>div .infoBox .description {
    font-size: .25rem
}

#JOB .sliderBox>div .infoBox ul {
    width: 3.125rem
}

#JOB .sliderBox>div .infoBox ul>li {
    border-bottom: 1px solid rgba(35, 27, 17, 0.8);
    padding-top: .05208rem;
    padding-bottom: .05208rem;
    text-align: inherit;
    color: #231b11
}

#JOB .sliderBox>div .infoBox ul>li:first-child {
    border-top: 1px solid rgba(35, 27, 17, 0.8)
}

#JOB .sliderBox>div .infoBox ul>li span {
    color: #231b11;
    font-size: .1875rem;
    margin-right: .3125rem;
    text-align: inherit
}

#JOB .sliderBox>div.current .ch {
    transform: translate(0, 0);
    opacity: 1
}

#JOB .sliderBox .slide_01 .ch {
    left: -.83333rem;
    top: 2.60417rem
}

#JOB .sliderBox .slide_01 ul {
    margin-left: 0;
    margin-top: .41667rem
}

#JOB .sliderBox .slide_02 .ch {
    left: .83333rem;
    top: 2.39583rem
}

#JOB .sliderBox .slide_02 .infoBox {
    z-index: 888
}

#JOB .sliderBox .slide_02 ul {
    margin-left: 0;
    margin-top: 3.85417rem
}

#JOB .sliderBox .slide_03 .ch {
    left: -1.45833rem;
    top: 3.33333rem
}

#JOB .sliderBox .slide_03 .infoBox {
    z-index: 888
}

#JOB .sliderBox .slide_03 ul {
    margin-left: 4.58333rem
}

#JOB .sliderBox .slide_04 .ch {
    left: -1.35417rem;
    top: 3.4375rem
}

#JOB .sliderBox .slide_04 ul {
    margin-left: 4.58333rem
}

#JOB .sliderBox .slide_05 .ch {
    left: -1.77083rem;
    top: 2.08333rem
}

#JOB .sliderBox .slide_05 .infoBox {
    z-index: 888
}

#JOB .sliderBox .slide_05 ul {
    margin-left: 4.58333rem
}

#JOB .sliderBox .slide_06 .ch {
    left: -1.25rem;
    top: 1.97917rem
}

#JOB .sliderBox .slide_06 .infoBox {
    z-index: 888
}

#JOB .sliderBox .slide_06 ul {
    margin-left: 4.58333rem
}

    #JOB .sliderBox {
        /*padding-top: 230px*/
    }
    #JOB .sliderBox:before {
        background-size: auto
    }
    #JOB .sliderBox .slide_01 .ch {
        width: 700px;
        height: 743px;
        background-image: url('https://cdn.volia.biz/eqyRZQVYWS-Tb6xEa3vNc.png')
    }
    #JOB .sliderBox .slide_02 .ch {
        width: 500px;
        height: 607px;
        background-image: url('https://cdn.volia.biz/kYmVfU8JISecTXsuqi639yDra1.png')
    }
    #JOB .sliderBox .slide_03 .ch {
        width: 500px;
        height: 709px;
        background-image: url('/Themes/volia/img/ch_03.png')
    }
    #JOB .sliderBox .slide_04 .ch {
        width: 600px;
        height: 617px;
        background-image: url('/Themes/volia/img/ch_04.png')
    }
    #JOB .sliderBox .slide_05 .ch {
        width: 904px;
        height: 771px;
        background-image: url('/Themes/volia/img/ch_05.png')
    }
    #JOB .sliderBox .slide_06 .ch {
        width: 721px;
        height: 771px;
        background-image: url('/Themes/volia/img/ch_06.png')
    }
    #JOB .sliderBox>div {
        overflow: visible;
    }
    #JOB .sliderBox>div .wrap {
        width: 1000px
    }
    #JOB .sliderBox>div .ch {
        top: 30px;
        filter: blur(6px) sepia(0.8) saturate(0.4);
        transform: translate(50%, 0);
        -moz-transition: filter, 1s;
        -o-transition: filter, 1s;
        -webkit-transition: filter, 1s;
        transition: filter, 1s
    }
    #JOB .sliderBox>div .infoBox {
        position: absolute;
        top: 10px;
        right: 60px;
        padding-left: 0;
        padding-right: 0;
        width: 400px
    }
    #JOB .sliderBox>div .infoBox h5 {
        font-size: 46px;
        margin-right: 15px
    }
    #JOB .sliderBox>div .infoBox h6 {
        display: inline-block;
        padding-left: 5px;
        padding-right: 5px;
        /*width: 120px;*/
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        background-color: rgba(35, 27, 17, 0.7);
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        margin-bottom: 5px;
        font-style: normal;
        font-weight: normal;
        letter-spacing: 2px;
        color: #D8D1C7;
        margin-top: 15px;
    }
    #JOB .sliderBox>div .infoBox .race {
        line-height: 20px;
        padding: 0 10px;
        font-size: 12px;
        margin-bottom: 4px;
        margin-right: 10px
    }
    #JOB .sliderBox>div .infoBox .weapon {
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 4px
    }
    #JOB .sliderBox>div .infoBox .sub {
        font-size: 24px;
        margin-top: 10px;
        margin-bottom: 10px
    }
    #JOB .sliderBox>div .infoBox .description {
        font-size: 14px
    }
    #JOB .sliderBox>div .infoBox ul {
        width: 170px;
        margin-left: -27px;
        margin-top: 0
    }
    #JOB .sliderBox>div .infoBox ul>li {
        font-size: 12px
    }
    #JOB .sliderBox>div .infoBox ul>li span {
        font-size: 12px
    }
    #JOB .sliderBox>div.current .ch {
        -moz-transition: all, .3;
        -o-transition: all, .3;
        -webkit-transition: all, .3;
        transition: all, .3;
        opacity: 1
    }
    #JOB .sliderBox .slide_01 .ch {
        left: inherit;
        right: 55px;
        top: 145px;
    }
    #JOB .sliderBox .slide_01 .infoBox {
        left: 0
    }
    #JOB .sliderBox .slide_01 .infoBox ul {
        margin-left: -27px;
    }
    #JOB .sliderBox .slide_02 .ch {
        left: inherit;
        right: 65px;
        top: 210px;
    }
    #JOB .sliderBox .slide_02 .infoBox {
        left: 0
    }
    #JOB .sliderBox .slide_02 .infoBox ul {
        margin-top: 0px;
        margin-left: -27px;
    }
    #JOB .sliderBox .slide_03 .ch {
        top: -17px;
        left: inherit;
        right: 213px;
    }
    #JOB .sliderBox .slide_03 .infoBox {
        width: 420px;
        left: 0
    }
    #JOB .sliderBox .slide_03 .infoBox ul {
        margin-left: -27px;
    }
    #JOB .sliderBox .slide_04 .ch {
        left: 360px;
        top: 205px;
    }
    #JOB .sliderBox .slide_04 .infoBox {
        position: absolute;
        top: 0;
        left: 0px;
        width: 420px
    }
    #JOB .sliderBox .slide_05 .ch {
        left: -360px;
        top: -240px
    }
    #JOB .sliderBox .slide_05 .infoBox {
        position: absolute;
        right: 80px;
        width: 400px
    }
    #JOB .sliderBox .slide_05 .infoBox ul {
        margin-left: 0
    }
    #JOB .sliderBox .slide_06 .ch {
        top: -220px;
        left: inherit;
        right: 20px
    }
    #JOB .sliderBox .slide_06 .infoBox {
        right: 80px;
        width: 400px
    }
    #JOB .sliderBox .slide_06 .infoBox ul {
        margin-left: 0
    }
    #JOB.current>div .ch {
        filter: none
    }
    #JOB.current>div .infoBox {
        /*animation: fadeInUp 1s forwards*/
    }


#JOB .level {
    display: none
}

#JOB .level>div>ol>li {
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline
}

    #JOB .level {
        display: block;
        width: 100%;
        margin-top: -20px
    }
    #JOB .level:after {
        content: '';
        display: block;
        clear: both
    }
    #JOB .level>div {
        font-size: 14px;
        float: left;
        width: 16%;
        min-height: 70px
    }
    #JOB .level>div:first-child {
        margin-right: -15px;
        padding-top: 16px;
        position: relative;
        margin-top: 30px;
    }
    #JOB .level>div:first-child:before {
        content: '';
        display: block;
        position: absolute;
        top: 32px;
        right: -19px;
        width: 19px;
        height: 31px;
        background-image: url('/Themes/volia/img/arrow001.png')
    }
    #JOB .level>div:first-child>em {
        line-height: 8px;
        font-size: 12px;
        font-style: normal;
        padding-bottom: 5px;
        display: block
    }
    #JOB .level>div:first-child>span {
        text-align: center;
        display: block;
        line-height: 34px;
        border: 1px solid rgba(35, 27, 17, 0.8);
        color: #231b11
    }
    #JOB .level>div:last-child {
        width: 75%
    }
    #JOB .level>div:last-child>ol {
        width: 100%;
        display: block;
        margin-bottom: 5px
    }
    #JOB .level>div:last-child>ol>li {
        width: 28%;
        line-height: 24px;
        border: 1px solid rgba(35, 27, 17, 0.8);
        margin-right: 5%;
        color: #231b11;
        position: relative
    }
    #JOB .level>div:last-child>ol>li:before {
        content: '';
        display: block;
        position: absolute;
        top: 5px;
        right: -17px;
        width: 17px;
        height: 13px;
        background-image: url('/Themes/volia/img/arrow002.png')
    }
    #JOB .level>div:last-child>ol>li:last-child {
        margin-right: 0
    }
    #JOB .level>div:last-child>ol>li:last-child:before {
        display: none
    }
    #JOB .level>div:last-child>ol:first-child>li {
        border: none;
        line-height: 8px;
        font-size: 12px;
        color: #736b61
    }
    #JOB .level>div:last-child>ol:first-child>li:before {
        display: none
    }
    #JOB .level.oneline>div {
        min-height: 30px
    }
    #JOB .level.oneline>div:first-child {
        margin-right: 17px;
        padding-top: 4px
    }
    #JOB .level.oneline>div:first-child>em {
        height: 14px;
        margin-bottom: 1px
    }
    #JOB .level.oneline>div:first-child>span {
        line-height: 28px
    }
    #JOB .level.oneline>div:first-child:before {
        top: 26px;
        right: -17px;
        width: 17px;
        height: 13px;
        background-image: url('/Themes/volia/img/arrow002.png')
    }
    #JOB .level.oneline>div:last-child>ol:last-child>li {
        line-height: 28px
    }
    #JOB .level.oneline>div:last-child>ol:last-child>li:before {
        top: 7px
    }

.scroll-pane-before,
.scroll-pane-after,
.scroll-pane-split,
.scroll-pane-os {
    width: 100%;
    height: 100vh;
    overflow: auto
}

#para-control {
    left: 50%;
    transform: translateX(-50%);
    bottom: 2.60417rem;
    width: 100%;
    height: .625rem;
    z-index: 999;
    font-size: 0
}

#para-control>a {
    margin-right: .52083rem;
    width: .625rem;
    height: .625rem;
    background-color: #231b11;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px
}

#para-control>a:last-child {
    margin-right: 0
}

@media (min-width: 765px) {
    #para-control {
        bottom: 14%;
        width: 100%
    }
    #para-control>a {
        width: 15px;
        height: 15px;
        margin-right: 30px
    }
}

#OTHER .ch_monmon {
    position: fixed;
    z-index: 8888;
    width: 2.60417rem;
    height: 3.125rem;
    right: -20%;
    transform: scale(0.5);
    transform-origin: right bottom;
    -moz-transition: all, 2s;
    -o-transition: all, 2s;
    -webkit-transition: all, 2s;
    transition: all, 2s;
    opacity: 0
}

#OTHER .ch_monmon:before {
    width: 89px;
    height: 107px;
    background-image: url('/Themes/volia/img/ch_monmon.png');
    animation-delay: .3s;
    animation-duration: 2.5s;
    animation-name: monmon_upDown;
    animation-iteration-count: infinite
}

#OTHER .ch_monmon.top {
    right: 0;
    top: 7.29167rem;
    opacity: 1;
    transform: scale(1)
}

#OTHER.current .ch_monmon {
    opacity: 1;
    right: inherit;
    left: 50%;
    top: 20%;
    transform: translate(-55%, 0) scale(1)
}

#OTHER.current .ch_monmon:before {
    width: 117px;
    height: 140px;
    background-image: url('/Themes/volia/img/ch_monmon.png')
}

@media (min-width: 765px) {
    #OTHER .ch_monmon {
        width: 240px;
        height: 280px;
        right: -20%;
        top: 45%;
        filter: blur(10px);
        transform: scale(1.5);
        opacity: 0;
        z-index: 0
    }
    #OTHER .ch_monmon:before {
        width: 234px;
        height: 280px;
        background-image: url('/Themes/volia/img/ch_monmon.png')
    }
    #OTHER .ch_monmon.top {
        right: 0.5%;
        top: inherit;
        bottom: 21%;
        opacity: 1;
        transform: scale(0.75);
        z-index: 887;
        filter: none
    }
    #OTHER.current .ch_monmon {
        opacity: 1;
        right: inherit;
        left: 50%;
        top: 38%;
        transform: translate(-45%, -60%) scale(0.8);
        filter: none
    }
    #OTHER.current .ch_monmon:before {
        width: 234px;
        height: 280px;
        background-image: url('/Themes/volia/img/ch_monmon.png')
    }
}

@media (min-width: 1550px) {
    #OTHER .ch_monmon {
        width: 240px;
        height: 280px;
        right: -20%;
        transform: scale(1)
    }
    #OTHER .ch_monmon.top {
        right: 02%;
        bottom: 24%;
        transform: scale(1)
    }
    #OTHER.current .ch_monmon {
        top: 38%;
        transform: translate(-45%, -60%) scale(1)
    }
}

#OTHER {
    background-color: #ccc5bd;
    *zoom: 1;
    filter: progid: DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFCCC5BD', endColorstr='#FFBAAA95');
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjYzViZCIvPjxzdG9wIG9mZnNldD0iMjQlIiBzdG9wLWNvbG9yPSIjY2RjMWIyIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYmFhYTk1Ii8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
    background-size: 100%;
    background-image: -moz-radial-gradient(center, ellipse cover, #ccc5bd 0%, #cdc1b2 24%, #baaa95 100%);
    background-image: -webkit-radial-gradient(center, ellipse cover, #ccc5bd 0%, #cdc1b2 24%, #baaa95 100%);
    background-image: radial-gradient(ellipse cover at center, #ccc5bd 0%, #cdc1b2 24%, #baaa95 100%)
}

#OTHER:before {
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    background-size: 80%;
    background-image: url('/Themes/volia/img/pp.png?1488533076');
    opacity: .3
}

#OTHER>p {
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    opacity: 0;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
    color: white;
    font-size: .625rem;
    line-height: 1.4;
    letter-spacing: 2px;
    -moz-transition: all, 1s;
    -o-transition: all, 1s;
    -webkit-transition: all, 1s;
    transition: all, 1s;
    transition-delay: .3s
}

#OTHER .btn_facebook {
    background-image: url('/Themes/volia/img/btn_facebook.png?1488462279');
    width: 2.92708rem;
    height: 3.375rem;
    background-size: 100% auto;
    background-repeat: no-repeat;
    opacity: 0;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    -moz-transition: all, 1.5s;
    -o-transition: all, 1.5s;
    -webkit-transition: all, 1.5s;
    transition: all, 1.5s;
    transition-delay: .6s
}

#OTHER.current>p {
    top: 40%;
    left: 50%;
    opacity: 1;
    font-size: .625rem
}

#OTHER.current .btn_facebook {
    top: 61%;
    opacity: 1
}

@media (min-width: 765px) {
    #OTHER:before {
        background-size: auto
    }
    #OTHER>p {
        top: 30%;
        left: 50%;
        transform: translateX(-50%);
        width: 600px
    }
    #OTHER .btn_facebook {
        width: 127px;
        height: 146px;
        background-image: url('/Themes/volia/img/btn_facebook.png')
    }
    #OTHER.current>p {
        top: 52%;
        font-size: 20px
    }
    #OTHER.current .btn_facebook {
        top: 64%
    }
}

@media (min-width: 1550px) {
    #OTHER>p {
        top: 30%;
        width: 600px;
        font-size: 30px
    }
    #OTHER .btn_facebook {
        width: 197px;
        height: 227px;
        background-image: url('/Themes/volia/img/btn_facebook.png')
    }
    #OTHER.current>p {
        top: 50%;
        font-size: 28px
    }
}

.horizontal-only {
    height: auto
}

.ctrl {
    position: fixed;
    right: 0;
    bottom: 0;
    font-size: 0;
    width: 100%;
    height: 1.25rem;
    z-index: 9998;
    transform: translateY(500%);
    -moz-transition: all, .8s;
    -o-transition: all, .8s;
    -webkit-transition: all, .8s;
    transition: all, .8s
}

.ctrl.show {
    transform: translateY(0)
}

@media (min-width: 765px) {
    .ctrl {
        left: 50%;
        bottom: -70px;
        transition-delay: .1s;
        transform: translateX(-50%) translateY(0);
        height: 60px;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-delay: 1.5s
    }
    .ctrl:hover {
        bottom: 0
    }
    .ctrl.show {
        bottom: 0;
        transform: translateX(-50%) translateY(0)
    }
    .ctrl.show:after {
        display: none
    }
}

@media (min-width: 1500px) {
    .ctrl {
        bottom: 0
    }
}


/* ---------------------------------------------------------------------------
 * volia3 addendum (0.6.11). Everything above this line is the production
 * Themes/volia/css/classes.css, copied verbatim: `includes/classes_ru.php` links
 * `$settings['theme_url'] . '/css/classes.css'`, so the new theme needs its own
 * copy - without it the request 404s and the whole article loses its layout.
 *
 * The file styles the bare `header` element for the article's own chrome, and the
 * theme's bar is a `<header>` too, so it inherits `height: 105px/135px` and grows.
 * Position and z-index are already won by the theme on specificity; only the fixed
 * height has to be given back. Scoped to the theme's own class so the article's
 * header rules keep working wherever the article uses them.
 * ------------------------------------------------------------------------- */
.v3-scope header.v3-header { height: auto; }

/* The article scales itself by hijacking the root font size (`<html style="font-size:39px">`
 * = viewport/10) on narrow screens - that is how its own `rem` layout adapts. The theme's
 * chrome is `rem`-based too, so it inflated to 2.4x on phones: a 170px bar, a 116px burger
 * and a document wider than the viewport.
 *
 * Both cannot own the root unit, and the article needs it. So on this route - and only here,
 * because this stylesheet loads nowhere else - the chrome is restated in pixels at the values
 * it computes to at a normal 16px root. The article keeps its scaling; the bar stops caring
 * about it. Everything else in the theme keeps its `rem` sizing and its response to a
 * visitor's font settings.
 * ------------------------------------------------------------------------- */
@media (max-width: 765px) {
/* Restating individual rules turned into whack-a-mole - the footer link gap, the mobile
   menu's current-item bar, the focus ring and the breadcrumb gaps all tracked the hijacked
   root through the theme's own tokens. Redefining the tokens themselves in px on the scope
   root fixes that whole class at once, for anything token-driven that this route renders. */
.v3-scope {
  --v3-space-1: 4px; --v3-space-2: 8px; --v3-space-3: 12px; --v3-space-4: 16px;
  --v3-space-5: 20px; --v3-space-6: 24px; --v3-space-8: 32px; --v3-space-10: 40px;
  --v3-space-12: 48px;
  --v3-radius-sm: 10px; --v3-radius: 16px; --v3-radius-lg: 24px;
  --v3-focus: 0 0 0 3.2px rgba(25, 140, 201, 0.35);
  --v3-container: 1240px; --v3-sidebar: 280px; --v3-header-height: 72px;
  --v3-text-xs: 12px; --v3-text-sm: 14px; --v3-text: 16px; --v3-text-lg: 20px;
  --v3-text-xl: 28px;
}
/* Not token-driven, so restated directly. The menu marker is the one that misleads: at 765
   it grew to 115px against a 45px row and marked two entries as current at once. */
.v3-scope .v3-header .v3-nav a:hover::after,
.v3-scope .v3-header .v3-nav a[aria-current]::after { height: 24px; }
.v3-scope .v3-breadcrumbs ol { gap: 6px 12px; }
.v3-scope .v3-breadcrumbs li:not(:last-child)::after { margin-left: 12px; }
.v3-scope .v3-container { width: min(100% - 32px, 1240px); }
.v3-scope .v3-header { min-height: 80px; }
.v3-scope .v3-header__inner { min-height: 80px; gap: clamp(16px, 2.2vw, 32px); }
.v3-scope .v3-header__brand { width: 168px; }
.v3-scope .v3-header__brand img { max-height: 74px; }
.v3-scope .v3-header .v3-nav { gap: 2px; }
.v3-scope .v3-header .v3-nav a { padding: 2px 13px 0; font-size: 12.5px; }
.v3-scope .v3-header__actions { min-height: 43px; padding-left: 18px; }
.v3-scope .v3-header__actions > a:not(.v3-button) { font-size: 12.5px; }
.v3-scope .v3-header__actions > a.v3-language { min-width: 61px; gap: 6px; padding: 5px 8px; border-radius: 5px; }
.v3-scope .v3-header__actions .v3-language__flag { width: 17px; height: 17px; }
.v3-scope .v3-header__actions .v3-button--primary { min-width: 104px; min-height: 46px; padding: 10px 20px; font-size: 13px; border-radius: 6px; }
.v3-scope .v3-header__actions { gap: 12px; }
/* The burger inherits `.v3-button`, whose 2.75rem minimum becomes 107px at this root and
   then dictates the whole bar's height. */
.v3-scope .v3-menu-toggle { min-height: 44px; padding: 10px 20px; border-radius: 10px; font-size: 16px; }
.v3-scope .v3-subnav__inner { min-height: 46px; gap: 2px; }
.v3-scope .v3-subnav a { padding: 3px 11px 0; font-size: 11.5px; }
/* Outside the bar, but inflated by the same root and visible: the focused skip link grew to
   227x83 and covered the logo and half the open menu. */
.v3-scope .v3-skip-link { padding: 12px 16px; border-radius: 10px; font-size: 16px; }
.v3-scope .v3-skip-link:focus { top: 16px; }
.v3-scope .v3-main { padding-block: 40px 48px; }
.v3-scope .v3-breadcrumbs { margin-bottom: 20px; }
.v3-scope .v3-footer { padding-block: 32px; }
.v3-scope .v3-footer__inner { gap: 20px; }
}

@media (max-width: 1120px) {
  .v3-scope .v3-header .v3-nav { padding: 9px 16px 13px; }
  .v3-scope .v3-header .v3-nav a { min-height: 45px; padding-inline: 13px; }
}
@media (max-width: 960px) {
  .v3-scope .v3-header__inner { gap: 10px; }
  .v3-scope .v3-header__brand { width: 136px; }
  .v3-scope .v3-header__actions { padding-left: 10px; }
}
@media (max-width: 620px) {
  .v3-scope .v3-header { min-height: 70px; }
  .v3-scope .v3-header__inner { min-height: 70px; }
  .v3-scope .v3-header__brand { width: 120px; }
  .v3-scope .v3-header__actions { padding-left: 0; }
  .v3-scope .v3-header__actions > a.v3-language { min-width: 54px; gap: 4px; padding: 4px 6px; }
  .v3-scope .v3-subnav__inner { min-height: 42px; }
  .v3-scope .v3-subnav a { padding-inline: 9px; font-size: 11px; }
}
@media (max-width: 560px) {
  .v3-scope .v3-container { width: min(100% - 20px, 1240px); }
}

/* The slider's slots and its content disagree in the source: `.sliderBox > div` floats at
   950px while the `.wrap` inside each one is 1000px, so every slide spills 50px into its
   neighbour. With six classes that shows as the next class's heading, professions and stats
   sitting inside the current panel. The JS steps the track by the viewport's own width on
   each click, so the first half of the fix is to make all three agree at 1000px.
   The second half: from 1400px up each slide's `.infoBox` becomes absolutely positioned with
   `right: 80px`, and its `.wrap` is static, so the containing block resolves all the way up to
   `#JOB` - every panel is pinned to the *viewport's* right edge rather than its own slide's.
   Measured: slide 6's info box sat at 1140..1580 while slide 6 itself starts at 1220, so 80px
   of the next class showed inside the current one. Making each slide a positioning context
   puts every panel back inside its own slot. */
.v3-scope #JOB { max-width: 1000px; margin-inline: auto; }
/* 0.6.17 - the real slider bug, found by review at 390 and 1000px.
   The track steps by the slider's own width (`left: index * -innerWidth` in the page's JS),
   but the slot was a fixed 1000px, so every click drifted by `1000 - innerWidth` and the
   error multiplied by the index: at 1000px slide 6 was 370px out, at 390px the Dracan panels
   landed entirely off-screen while other classes' panels bled into view. Sizing the track and
   its slots in percentages of `#JOB` makes a slot exactly one viewport wide at every width, so
   the JS step and the slot always agree. 600% is the six slides. */
.v3-scope #JOB .sliderBox { width: 600%; }
.v3-scope #JOB .sliderBox > div {
  width: 16.66667%;
  position: relative;
}
/* The per-slide `right: 80px` offsets in the source only work if the panel is absolutely
   positioned inside its own slide. It is not: `.wrap` is static, so the offsets resolve
   against `#JOB` and every panel is pinned to the viewport's right edge instead - which is
   why slide 6's panel sat at 1140..1580 while slide 6 itself starts at 1220. Making the slide
   the containing block and the panel absolute puts each one back inside its own slot. */
.v3-scope #JOB .sliderBox > div .infoBox { position: absolute; }

/* normalize residue: the file colours every h1-h6 white for the article's dark chrome. The
   classes template renders none today, so this is invisible - but it is white-on-cream for
   the first heading anyone adds to an article route. */
.v3-scope .v3-main h1,
.v3-scope .v3-main h2,
.v3-scope .v3-main h3,
.v3-scope .v3-main h4,
.v3-scope .v3-main h5,
.v3-scope .v3-main h6 { color: inherit; }

/* 0.6.14: the two Dracan slides were authored mirrored - character on the left, panel pinned
 * to the right - while slides 1-4 put the panel on the left. The class switcher is a single
 * element fixed on the right of the viewport, so on those two slides it landed on top of the
 * panel: measured 955..1293 against a panel at 700..1140, a 185px overlap over the profession
 * chain and the stats. Since the switcher cannot move per slide, the two slides are flipped to
 * match the other four: panel left, art right, switcher back over the artwork where it sits
 * everywhere else. */
.v3-scope #JOB .sliderBox .slide_05 .infoBox,
.v3-scope #JOB .sliderBox .slide_06 .infoBox {
  left: 40px;
  right: auto;
  width: 420px;
}
.v3-scope #JOB .sliderBox .slide_05 .ch { left: auto; right: -80px; }
.v3-scope #JOB .sliderBox .slide_06 .ch { left: auto; right: 40px; }

/* With the panel anchored to its own slide it sits flush against the viewport's left edge on
 * every class, so the heading and the description touch the border and read as cut off. The
 * original layout got this inset from a wider outer container that volia3 does not reproduce.
 * One inset for all six keeps them consistent. */
.v3-scope #JOB .sliderBox > div .infoBox { left: 40px; }

/* 0.6.16, from the design review of the two new slides:
 * - `ch_05` is the largest source in the set (904px) and, mirrored, its left edge landed at
 *   x=396 against a panel ending at 700 - 304px of artwork behind the profession chain, with
 *   the 60-level column label lost in the foliage. Both Dracan sources are also the tallest,
 *   and at `top: -240px/-220px` the shaman's foliage and the left twin's head were sliced off
 *   by the container. Scaled to clear the panel and dropped so nothing is cut.
 * - The stat list on these two carried a different indent from slides 1-4. */
.v3-scope #JOB .sliderBox .slide_05 .ch {
  width: 560px;
  height: 478px;
  right: -40px;
  top: -40px;
}
.v3-scope #JOB .sliderBox .slide_06 .ch {
  width: 520px;
  height: 556px;
  right: 0;
  top: -30px;
}
.v3-scope #JOB .sliderBox .slide_05 .infoBox ul,
.v3-scope #JOB .sliderBox .slide_06 .infoBox ul { margin-left: -27px; }

/* 0.6.22, from the design review of the authenticated sweep. Three defects on this page,
 * all one root cause: the article was authored for a smaller base font than volia3's 16px,
 * and its slide geometry is fixed pixels.
 *
 * 1. The profession chain clipped its own labels. `ol > li` is `width: 28%` with a 5% gutter,
 *    which at the inherited size leaves 68px for a word that needs 91-114px, so "Гладиатор"
 *    and "Спартанец" lost their last letter behind the arrow glyph and "Чемпион" touched the
 *    edge. Three fixed 28% columns cannot hold these words at any readable size, so the row
 *    becomes a flex line whose boxes size to their content and keep the gutter the arrow
 *    glyph is positioned against.
 */
@media (min-width: 1121px) {
  .v3-scope #JOB .level > div:last-child > ol {
    display: flex;
    gap: 17px;
    width: auto;
  }
  .v3-scope #JOB .level > div:last-child > ol > li {
    width: auto;
    flex: 0 1 auto;
    min-width: max-content;
    margin-right: 0;
    padding: 0 6px;
    overflow: visible;
    font-size: 13px;
    white-space: nowrap;
    text-align: center;
  }
  .v3-scope #JOB .level > div:last-child > ol > li:before { right: -17px; }

  /* The stat column is a fixed 170px beside the artwork, and the longest labels plus their
     star run need 142-163px of the 130px content box, so the rating was pushed out of the
     row. The panel is 400-440px wide, so widening the column to 230px costs nothing and
     leaves every row on one line. */
  .v3-scope #JOB .sliderBox > div .infoBox ul { width: 230px; }
}

/* 2. The stat rows misreported game data. Each row is
 *    `<li><span>label</span><span style="float: right">★★★</span></li>`, and when the label
 *    wrapped to two lines the floated stars dropped onto the following row - so "скорость
 *    атаки" and "физическая сила" appeared to have no rating at all while "магическая сила"
 *    appeared to carry two runs. Measured: those rows report height 21 against scrollHeight
 *    35. Making the row a flex line neutralises the inline float without needing !important
 *    (floats do not apply to flex items) and pins each run to its own label.
 */
.v3-scope #JOB .sliderBox > div .infoBox ul li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6em;
}
.v3-scope #JOB .sliderBox > div .infoBox ul li > span:first-child { white-space: nowrap; }
.v3-scope #JOB .sliderBox > div .infoBox ul li > span + span { flex: 0 0 auto; }

/* 3. The card was unusable below 1121px. The article switches to its desktop composition
 *    at 765px, but that composition needs a 1000px `.wrap`, and the card only reaches 1000px
 *    at about a 1113px viewport - so between 765 and 1120 the layout was simply cut (measured
 *    73px lost at both 768 and 1000). The stacked arrangement therefore runs to 1120, the
 *    theme's own breakpoint, and the original composition takes over above it.
 *    Below 765 the card was worse still: The desktop offsets
 *    added in 0.6.14/0.6.16 are unconditional pixels, so at 390 the panel still measured
 *    400px and the character art 700px inside a 329px card: the art sat across the class name
 *    and description, and everything past the card edge was cut with no way to reach it.
 *    Below the breakpoint the slide stops being an absolute-positioned composition and simply
 *    stacks - art first, panel under it - both sized to the card.
 */
@media (max-width: 1120px) {
  .v3-scope #JOB .sliderBox > div .infoBox {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
  }
  .v3-scope #JOB .sliderBox .slide_05 .infoBox,
  .v3-scope #JOB .sliderBox .slide_06 .infoBox {
    left: auto;
    right: auto;
    width: 100%;
  }
  .v3-scope #JOB .sliderBox > div .ch,
  .v3-scope #JOB .sliderBox .slide_05 .ch,
  .v3-scope #JOB .sliderBox .slide_06 .ch {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    height: 46vw;
    background-position: center bottom;
    background-size: contain;
  }
  .v3-scope #JOB .sliderBox > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }
  .v3-scope #JOB .sliderBox .slide_05 .infoBox ul,
  .v3-scope #JOB .sliderBox .slide_06 .infoBox ul { margin-left: 0; }
  /* Three fixed columns leave 44px per box in a 273px card, against 61-106px of word. The
     chain wraps instead, and the arrow glyph is dropped because it is positioned against a
     gutter that no longer exists once the boxes wrap. */
  /* A wrapping flex row broke the meaning: "20ур./40ур./60ур." are their own three-cell `ol`,
     so as soon as a name wrapped to a second row it sat under the wrong level - "Страж" (60ур.)
     read as 20ур. A three-column grid keeps every name in the column its marker names, and lets
     a long name use two lines inside its own box instead. */
  .v3-scope #JOB .level > div:last-child > ol {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: auto;
  }
  .v3-scope #JOB .level > div:last-child > ol > li {
    width: auto;
    min-width: 0;
    margin-right: 0;
    padding: 0 4px;
    overflow: visible;
    font-size: 12px;
    line-height: 1.5;
    white-space: normal;
    text-align: center;
  }
  .v3-scope #JOB .level > div:last-child > ol > li:before { display: none; }

  /* The stat label may wrap here; the flex row keeps its rating on the same row either way,
     which is the property that was broken, so nowrap is not needed at this width. */
  .v3-scope #JOB .sliderBox > div .infoBox ul li > span:first-child { white-space: normal; }
  /* The stat list itself is a fixed 170px column beside the artwork; in the stacked card it
     takes the card width, which is what stops the longest labels overflowing their row. */
  .v3-scope #JOB .sliderBox > div .infoBox ul,
  .v3-scope #JOB .sliderBox .slide_05 .infoBox ul,
  .v3-scope #JOB .sliderBox .slide_06 .infoBox ul { width: 100%; margin-left: 0; }
  .v3-scope #JOB .sliderBox > div .infoBox ul > li { width: 100%; }
}

/* 0.6.22b, measured on the deployed 0.6.22: three things the first pass did not reach.
 *
 * - `.infoBox` became a flex item when the slide was made a column, and a flex item's
 *   `min-width` defaults to `auto`, so `width: 100%` lost to the panel's own min-content
 *   width. Measured 968px inside a 329px card. `min-width: 0` lets it obey the card.
 * - `#JOB > .wrap` keeps a fixed 1000px, which is what pushed `#JOB` to scrollWidth 402
 *   against clientWidth 329 and cut everything past the card edge.
 * - The class switcher is absolutely positioned over the artwork, which is correct beside a
 *   420px panel and wrong when the panel is the whole card: measured at x 103..440 directly
 *   over the class name and description. On a phone it goes into the flow above the panel.
 */
@media (max-width: 1120px) {
  /* Each slide carries its own `.wrap` at a fixed 1000px, and so does #JOB itself. The
     panel is a static block inside the inner one, so that 1000px - not the card - was
     its containing block, which is why `width: 100%` still resolved to 968px. */
  /* The stacked card is 1500-1660px tall, but `classes.css:1167` pins every `.content section`
     to `min-height: 1005px` with `overflow: hidden`, and `#JOB .slider` is absolute at
     `height: 100%` - so the first stacking pass cut 500-660px off the bottom at every width
     below 1121: the whole "Характеристики" star list, the gameplay screenshot and its caption.
     The carousel still clips horizontally (`.slider` keeps its own `overflow: hidden`, and
     `.sliderBox:after` clears the floated slides so the box measures its own height); it just
     stops being pinned to a fixed height vertically. */
  .v3-scope .content section#JOB { min-height: 0; height: auto; }
  .v3-scope #JOB .slider { position: relative; height: auto; }
  .v3-scope #JOB .sliderBox { position: relative; }

  .v3-scope #JOB .wrap,
  .v3-scope #JOB .sliderBox > div .wrap { width: 100%; }
  .v3-scope #JOB .sliderBox > div .infoBox { min-width: 0; }
  /* The tagline is 24px type on a 17.92px line box. On one line at 1440 that never shows; once
     it wraps in the stacked card the two lines collide with each other and with the card below. */
  .v3-scope #JOB .sliderBox > div .infoBox .sub { line-height: 1.2; height: auto; }

  .v3-scope #JOB .sliderBox > div .infoBox h5,
  .v3-scope #JOB .sliderBox > div .infoBox h6,
  .v3-scope #JOB .sliderBox > div .infoBox .race,
  .v3-scope #JOB .sliderBox > div .infoBox .weapon,
  .v3-scope #JOB .sliderBox > div .infoBox .description { white-space: normal; word-break: break-word; }
  /* One slide's description carries a fixed 420px, which overflowed the 273px card. */
  .v3-scope #JOB .sliderBox > div .infoBox .description,
  .v3-scope #JOB .sliderBox > div .infoBox .sub { width: auto; max-width: 100%; }
  /* The switcher is a cluster of six absolutely positioned, rotated diamonds. Putting it in
     the flow does not work - its own box stays nearly flat while the diamonds spill out of
     it - so it stays absolute and is instead moved to the top of the card, with the slide
     reserving the room underneath. That keeps the picker usable on a phone, which hiding it
     would not. */
  .v3-scope #JOB .sliderControl {
    top: 0;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%) scale(.72) rotate(45deg);
    transform-origin: center center;
  }
  .v3-scope #JOB .sliderBox > div { padding-top: 320px; }
}