@charset "UTF-8";

.main-m {
    display: none !important
}

section {
    position: relative
}

.section_wrap .section_inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box
}

.section_desc,
.section_title {
    text-align: center
}

.js-scrollAni .fadeLeft,
.js-scrollAni .fadeUp {
    opacity: 0
}

.js-scrollAni.on .fadeUp {
    -webkit-animation: fadeUp .8s ease both;
    animation: fadeUp .7s ease both
}

.js-scrollAni.on .fadeLeft {
    -webkit-animation: fadeLeft .8s ease both;
    animation: fadeLeft .7s ease both
}

.visual_wrap {
    position: relative;
    width: 100%;
    height: 915px;
    overflow: hidden;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #000;
    box-sizing: border-box
}

.visual_wrap::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: radial-gradient(transparent, rgba(0, 0, 0, 0.15))
}



.visual_wrap .txt_main_visual .txt_inner {
    box-sizing: border-box;
    text-align: center;
    color: #fff
}

.visual_wrap .txt_main_visual .title_wrap {
    max-width: 100%;
    min-height: 1px;
    text-align: center
}

.visual_wrap .txt_main_visual .title_wrap img {
    width: 566px;
    max-width: 100%
}

.visual_wrap .txt_main_visual .main_title {
    font-size: 76px;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4)
}

.visual_wrap .txt_main_visual .main_sub_text {
    max-width: 100%;
    margin: 10px 0 0;
    font-size: 26px;
    color: #fff;
    text-align: center
}

.visual_wrap .txt_main_visual .main_sub_text>em {
    font-size: inherit
}

.visual_wrap .txt_main_visual .text_brown {
    color: #f1c787
}

.visual_wrap .txt_main_visual img {
    max-width: 100%
}

.visual_wrap .txt_main_visual .floating_main_wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column
}

.visual_wrap .txt_main_visual .platform_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px
}

.visual_wrap .txt_main_visual .platform_wrap .ps {
    display: inline-block
}

.visual_wrap .txt_main_visual .platform_wrap .xbox {
    display: inline-block;
    margin-left: 32px
}

.visual_wrap .txt_main_visual .btn_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0 0 0;
}

.visual_wrap .txt_main_visual .btn_wrap .floatingBanner {
    position: relative
}

.visual_wrap .txt_main_visual .btn_wrap .floatingBanner+.floatingBanner {
    margin: 0 0 0 20px
}

.visual_wrap .txt_main_visual .main_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 310px;
    height: 75px;
    position: relative;
    box-sizing: border-box;
    padding: 0 10px;
    color: #fdfcfc;
    font-size: 20px;
    line-height: 1.4;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    -webkit-transition: color 0.3s, background 0.3s;
    transition: color 0.3s, background 0.3s
}

.visual_wrap .txt_main_visual .main_btn.brown {
    color: #fbf7e7;
    background: linear-gradient(to bottom, #b08747 0, #a1793d 100%)
}

.visual_wrap .txt_main_visual .main_btn.blue {
    color: #e7e9fb;
    background: linear-gradient(to bottom, #8f714a 0, #ad8b53 100%)
}

.visual_wrap .txt_main_visual .main_btn.aqua {
    color: #fff;
    background: rgba(49, 139, 206, .8)
}

.visual_wrap .txt_main_visual .main_btn.green {
    color: #fff;
    background: rgba(43, 126, 43, .96)
}

.visual_wrap .txt_main_visual .main_btn.deepblue {
    color: #fff;
    background: rgba(31, 83, 152, .98)
}

.visual_wrap .txt_main_visual .main_btn.yellow {
    color: #000;
    background: rgba(220, 177, 92, 1)
}

.visual_wrap .txt_main_visual .main_btn.aqua::before {
    display: none
}

.visual_wrap .txt_main_visual .main_btn.yellow.hover_ripple::before {
    background: rgba(227, 188, 102, 1)
}

.visual_wrap .video_wrap {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000
}

.visual_wrap .video_wrap::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: radial-gradient(transparent, rgba(0, 0, 0, 0.6));
    z-index: 5
}

.visual_wrap .video_wrap video {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    min-width: 100%;
    min-height: 100%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 1.2s;
    transition: opacity 1.2s
}

.visual_wrap .video_wrap video.on {
    opacity: 1;
    visibility: visible
}

.visual_wrap .video_wrap video source {
    box-sizing: inherit;
    background-repeat: no-repeat;
    vertical-align: inherit;
    white-space: inherit;
    text-overflow: inherit;
    text-shadow: inherit
}

.visual_wrap .btn_play {
    display: block;
    width: 58px;
    height: 70px;
    margin: 0 auto;
    background: url(/static/images/spr_etc-2.png) -740px -180px no-repeat;
    transition: transform .3s
}

.visual_wrap .gradeRating {
    position: absolute;
    top: 30%;
    left: 20px;
    z-index: 7
}

.news_wrap {
    background: #f5f4f6
}

.news_wrap .section_inner {
    display: flex;
    justify-content: center
}

.news_list {
    position: relative;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    padding: 30px 0;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden
}

.news_list .owl-stage {
    display: flex;
    margin: 0 auto
}

.news_list .owl-stage .owl-item {
    touch-action: auto
}

.news_list .news_item {
    width: 416px;
    max-width: 90vw;
    height: 100%
}

.news_list .news_item+.news_item {
    margin-left: 16px
}

.news_list .news_box {
    display: flex;
    align-items: center;
    padding: 15px;
    height: 100%;
    border: 1px solid #e5e4e7;
    border-radius: 5px;
    background: #fff;
    box-sizing: border-box
}

.news_list .news_box .img_area {
    flex: 0 0 auto;
    width: 42.885%;
    border-radius: 4px;
    overflow: hidden;
    z-index: 1
}

.news_list .news_box .img_area .img_wrap {
    position: relative;
    padding-bottom: 56.25%
}

.news_list .news_box .img_area img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 4px;
    width: auto;
    height: 100%;
    -webkit-transition: transform .25s ease;
    transition: transform .25s ease;
    image-rendering: -webkit-optimize-contrast
}

.news_list .news_box:focus .img_area img {
    -webkit-transform: scale3d(1.1, 1.1, 1);
    transform: scale3d(1.1, 1.1, 1)
}

.news_list .news_box .desc_area {
    flex: 0 1 auto;
    margin-left: 16px;
    padding-right: 1.5rem;
    font-size: 1rem;
    color: #1b1003;
    overflow: hidden;
    box-sizing: border-box
}

.news_list .news_box .desc_area .news_category {
    font-size: 13px;
    color: #92908d
}

.news_list .news_box .desc_area .title {
    display: -webkit-box;
    height: 45px;
    margin-top: 5px;
    color: #180d00;
    font-size: 1rem;
    opacity: .9;
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.news_list .news_box:focus .desc_area .title {
    opacity: 1
}

.news_wrap .section_inner.news_container {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: none;
    padding: 0;
    background: #f5f4f6;
    z-index: 2
}

.news_wrap .news_container .news_box_wrap {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    max-width: 1350px;
    padding: 28px 30px 20px;
    box-sizing: border-box
}

.news_wrap .news_container .news_box {
    margin-right: 20px
}

.news_wrap .news_container .news_box:last-of-type {
    margin-right: 0
}

.news_wrap .news_container .news_img {
    overflow: hidden;
    border-radius: 0.3rem
}

.news_wrap .news_container .news_img img {
    width: 410px;
    height: auto;
    transition: transform 0.25s
}

.news_wrap .news_container .news_title {
    display: -webkit-box;
    text-align: center;
    font-size: 18px;
    color: #000;
    margin-top: 8px;
    max-width: 410px;
    line-height: 1.4;
    white-space: initial;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.news_container .news_box_wrap::-webkit-scrollbar-track {
    background-color: transparent;
    border: none;
    border-radius: 5px
}

.news_container .news_box_wrap::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 5px
}

.news_container .news_box_wrap::-webkit-scrollbar-button {
    background-position: center;
    opacity: 0
}

.news_container .news_box_wrap::-webkit-scrollbar {
    width: 5px;
    height: 6px
}

.news_container .news_box_wrap:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2)
}

.feature_wrap {
    position: relative;
    padding: 150px 0 200px;
    z-index: 1;
    overflow: hidden
}

.feature_wrap::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #171b20 url(/static/images/main_feature_bg.jpg?ver=1) no-repeat 40% top;
    background-size: cover;
    content: ''
}

.feature_wrap.on::before {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
}

.feature_wrap .feature_subject {
    padding-bottom: 340px
}

.feature_wrap .feature_subject .section_title {
    font-size: 56px;
    color: white;
    letter-spacing: -1px
}

.feature_wrap .feature_subject .section_desc {
    margin-top: 46px;
    font-size: 16px;
    color: rgba(233, 228, 221, .5);
    line-height: 1.75;
    -webkit-animation-delay: .15s;
    animation-delay: .15s
}

.feature_wrap .feature_contents {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box
}

.feature_wrap .feature_contents_subject {
    position: relative;
    z-index: 1
}

.feature_wrap .feature_contents_title {
    color: rgba(255, 255, 255, .95);
    font-size: 46px;
    letter-spacing: -1px;
    line-height: 1.3
}

.feature_wrap .feature_contents_desc {
    color: rgba(233, 228, 221, .5);
    font-size: 14px;
    line-height: 1.5
}

.feature_wrap .feature_contents_title+.feature_contents_desc {
    margin-top: 30px
}

.feature_wrap .feature_contents .feature_thumb .feature_thumb_img {
    position: relative;
    display: block;
    max-width: 100%;
    border-radius: 5px;
    overflow: hidden;
    z-index: 1
}

.feature_wrap .feature_contents_more {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 177px;
    height: 44px;
    padding: 0 1rem;
    font-size: 14px;
    color: #fff;
    border: 1px solid rgba(204, 182, 138, .25);
    -webkit-transition: border-color .2s, color .2s, background-color .2s;
    transition: border-color .2s, color .2s, background-color .2s;
    box-sizing: border-box
}

.feature_wrap .feature_contents_more::after {
    display: block;
    overflow: hidden;
    content: "";
    margin-left: 14px;
    -webkit-transform: translate3d(0, -2px, 0) skewX(55deg);
    transform: translate3d(0, -2px, 0) skewX(55deg);
    width: 60px;
    height: 7px;
    background-color: transparent;
    border-right: 2px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transition: transform .2s ease;
    transition: transform .2s ease
}

.feature_wrap .feature_contents_more:focus::after {
    -webkit-transform: translate3d(7%, -2px, 0) skewX(55deg);
    transform: translate3d(7%, -2px, 0) skewX(55deg)
}

.feature_wrap .feature_contents.adventure .feature_thumb {
    flex: 0 0 auto;
    width: calc(50% + 40px);
    margin-top: -50px;
    order: 1
}

.feature_wrap .feature_contents.adventure .feature_contents_subject {
    flex: 0 0 auto;
    width: calc(50% - 40px);
    padding-left: 12px;
    padding-right: 20px;
    box-sizing: border-box
}

.feature_wrap .feature_contents.adventure .feature_contents_title {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

.feature_wrap .feature_contents.adventure .feature_contents_desc {
    max-width: 550px;
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

.feature_wrap .feature_contents.adventure .feature_contents_desc+.feature_contents_desc {
    margin-top: 24px;
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.feature_wrap .feature_contents.adventure .feature_contents_more {
    margin-top: 38px;
    -webkit-animation-delay: .6s;
    animation-delay: .6s
}

.feature_wrap .feature_contents.battle {
    flex-direction: column
}

.feature_wrap .feature_contents.battle .feature_contents_subject {
    margin-top: -55px;
    padding-left: 12px;
    width: 100%;
    box-sizing: border-box
}

.feature_wrap .feature_contents.battle .feature_thumb {
    position: relative;
    z-index: 0
}

.feature_wrap .feature_contents.battle .thumb_img_wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 57.312%;
    overflow: hidden;
    border-radius: 2px
}

.feature_wrap .feature_contents.battle .thumb_img_wrap::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/static/images/main_feature_battle_dust.png) no-repeat center;
    background-size: cover;
    content: '';
    z-index: 2
}

.feature_wrap .feature_contents.battle .thumb_img_wrap .feature_parallax {
    position: absolute;
    bottom: 0;
    left: 0;
    min-height: 1px;
    -webkit-transition: transform .6s cubic-bezier(0.15, 0.73, 0.35, 0.9);
    transition: transform .6s cubic-bezier(0.15, 0.73, 0.35, 0.9);
    -webkit-transform-origin: bottom;
    transform-origin: bottom
}

.feature_wrap .feature_contents.battle .feature_thumb .char {
    opacity: 0.01;
    -webkit-filter: brightness(0.6);
    filter: brightness(0.6);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transition: opacity .4s ease, transform .4s ease;
    transition: filter .6s ease, opacity .6s ease, transform .6s ease
}

.feature_wrap .feature_contents.battle .feature_thumb .char.on {
    opacity: 1;
    -webkit-filter: brightness(1);
    filter: brightness(1);
    -webkit-transform: scale(1);
    transform: scale(1)
}

.feature_wrap .feature_contents.battle .feature_contents_title+.feature_contents_desc {
    margin-top: 30px;
    -webkit-animation-delay: .1s;
    animation-delay: .1s
}

.feature_wrap .feature_contents.battle .feature_contents_more {
    margin-top: 36px;
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

.feature_wrap .feature_contents.life {
    align-items: flex-start;
    margin-top: 170px
}

.feature_wrap .feature_contents.life .feature_contents_subject {
    flex: 0 0 50%;
    padding-top: 60px;
    -webkit-transform: translateX(-60px);
    transform: translateX(-60px)
}

.feature_wrap .feature_contents.life .feature_thumb {
    flex: 0 0 auto;
    position: relative;
    width: calc(50% - 40px);
    margin-right: 40px
}

.feature_wrap .feature_contents.life .feature_thumb .bg {
    width: 73.335%;
    border-radius: 4px
}

.feature_wrap .feature_contents.life .feature_thumb .char {
    position: absolute;
    bottom: -1%;
    left: -5%;
    width: 79.689%;
    opacity: 0;
    -webkit-filter: brightness(0.6);
    filter: brightness(0.6);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transition: opacity .4s ease, transform .4s ease;
    transition: filter .6s ease, opacity .6s ease, transform .6s ease
}

.feature_wrap .feature_contents.life .feature_thumb.on .char {
    opacity: 1;
    -webkit-filter: brightness(1);
    filter: brightness(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition-delay: .2s;
    transition-delay: .2s
}

.feature_wrap .feature_contents.life .feature_thumb .pet {
    position: absolute;
    top: 7%;
    left: 65%;
    width: 23.167%
}

.feature_wrap .feature_contents.life .feature_contents_title {
    -webkit-animation-delay: .55s;
    animation-delay: .55s
}

.feature_wrap .feature_contents.life .feature_contents_desc {
    -webkit-animation-delay: .65s;
    animation-delay: .65s
}

.feature_wrap .feature_contents.life .feature_contents_desc+.feature_contents_desc {
    margin-top: 24px;
    -webkit-animation-delay: .75s;
    animation-delay: .75s
}

.feature_wrap .feature_contents.life .feature_contents_more {
    margin-top: 40px;
    -webkit-animation-delay: .85s;
    animation-delay: .85s
}

.feature_wrap .feature_contents.life .thumb_back {
    position: absolute
}

.feature_wrap .feature_contents.life .thumb_back .feature_thumb_img {
    max-width: 100%
}

.feature_wrap .feature_contents.life .thumb_back.back1 {
    top: -80px;
    right: 0;
    width: 21.563%
}

.feature_wrap .feature_contents.life .thumb_back.back1 .feature_thumb_img {
    -webkit-animation-delay: .95s;
    animation-delay: .95s;
    border-radius: 3px
}

.feature_wrap .feature_contents.life .thumb_back.back2 {
    bottom: -80px;
    right: 39px;
    width: 26.719%;
    opacity: .8
}

.feature_wrap .feature_contents.life .thumb_back.back2 .feature_thumb_img {
    border-radius: 3px
}

.feature_wrap .feature_contents.life .thumb_back.back1.on~.thumb_back.back2 .fadeLeft {
    -webkit-animation: fadeLeft .8s ease 1.2s both;
    animation: fadeLeft .7s ease 1.2s both
}

.world_wrap {
    overflow: hidden
}

.world_wrap .world_subect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    padding: 0 1.66rem;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 1;
    box-sizing: border-box
}

.world_wrap .section_title {
    font-size: 56px;
    color: rgba(255, 255, 255, .95);
    -webkit-transform: translate3d(0, 2rem, 0);
    transform: translate3d(0, 2rem, 0);
    -webkit-transition: transform .7s ease;
    transition: transform .7s ease
}

.world_wrap .world_subect.on .section_title {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.world_wrap .section_desc {
    font-size: 16px;
    color: rgba(206, 227, 250, 1);
    opacity: 0;
    -webkit-transform: translate3d(0, 2rem, 0);
    transform: translate3d(0, 2rem, 0);
    -webkit-transition: transform .7s, opacity .7s;
    transition: transform .7s, opacity .7s
}

.world_wrap .world_subect.on .section_desc {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1
}

.world_wrap .section_title+.section_desc {
    margin-top: 45px
}

.world_wrap .section_desc+.section_desc {
    margin-top: 29px
}

.world_wrap .world_parallax_wrap {
    height: 760px;
    overflow: hidden
}

.world_wrap .world_parallax {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 136.6%;
    background: url(/static/images/main_world_bg.jpg?ver=1) no-repeat center;
    background-size: cover;
    z-index: 0;
    -webkit-transform: translate3d(0, -21%, 0);
    transform: translate3d(0, -21%, 0);
    -webkit-transition: transform .6s cubic-bezier(0.15, 0.73, 0.35, 0.9);
    transition: transform .6s cubic-bezier(0.15, 0.73, 0.35, 0.9)
}

.character_wrap {
    position: relative;
    max-width: 100%;
    height: 880px;
    background-size: cover;
    background-color: #000;
    overflow: hidden
}

.character_wrap .owl-carousel .animated {
    -webkit-animation-duration: 0.15s;
    animation-duration: 0.15s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.character_wrap .classes {
    position: relative;
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    z-index: 2
}

.character_wrap .classes .class_name {
    opacity: 0;
    padding-top: 162px;
    font-size: 54px;
    color: rgba(255, 255, 255, 0.9)
}

.character_wrap.on .active .classes .class_name {
    -webkit-animation: classAni .4s ease both;
    animation: classAni .4s ease both
}

.character_wrap .classes .class_desc {
    opacity: 0;
    display: block;
    margin-top: 20px;
    color: rgba(233, 228, 221, 0.7);
    min-height: 4.8rem;
    font-size: 16px;
    line-height: 1.6;
    max-width: 50%
}

.character_wrap.on .active .classes .class_desc {
    -webkit-animation: classAni .4s ease both .075s;
    animation: classAni .4s ease both .075s
}

.character_wrap .classes .btn_more {
    opacity: 0;
    position: relative;
    display: inline-block;
    margin-top: 15px;
    font-size: 14px;
    color: #796852;
    -webkit-transition: color .2s;
    transition: color .2s
}

.character_wrap.on .active .classes .btn_more {
    -webkit-animation: classAni .4s ease both .2s;
    animation: classAni .4s ease both .15s
}

.character_wrap .classes .btn_more::after {
    display: inline-block;
    overflow: hidden;
    content: "";
    -webkit-transform: translate3d(0, -3px, 0) skewX(55deg);
    transform: translate3d(0, -3px, 0) skewX(55deg);
    margin-left: 5px;
    width: 44px;
    height: 7px;
    background-color: transparent;
    border-right: 2px solid #796852;
    border-bottom: 1px solid #796852;
    -webkit-transition: transform .2s ease, border-color .2s ease;
    transition: transform .2s ease, border-color .2s ease
}

.character_wrap .character_list {
    display: block;
    height: 100%
}

.character_wrap .owl-stage-outer {
    height: 100%
}

.character_wrap .owl-stage-outer .owl-stage {
    height: 100%
}

.character_wrap .owl-stage-outer .owl-stage .owl-item {
    height: 100%;
    overflow: hidden
}

.character_wrap .owl-nav button[role="presentation"] {
    display: block;
    position: absolute;
    top: 50%;
    z-index: 10;
    transform: translate(0, -50%);
    width: 72px;
    height: 127px;
    font-size: 0;
    overflow: hidden
}

.character_wrap .owl-nav button[role="presentation"]:before {
    display: block;
    overflow: hidden;
    content: "";
    position: absolute;
    top: 50%
}

.character_wrap .owl-nav .owl-prev {
    left: 60px
}

.character_wrap .owl-nav .owl-prev:before {
    width: 76px;
    height: 76px;
    background-color: transparent;
    border-left: 2px solid #849091;
    border-top: 2px solid #849091;
    transform: translate(-50%, -50%) rotate(-45deg);
    left: 85%
}

.character_wrap .owl-nav .owl-next {
    right: 60px
}

.character_wrap .owl-nav .owl-next:before {
    width: 76px;
    height: 76px;
    background-color: transparent;
    border-left: 2px solid #849091;
    border-top: 2px solid #849091;
    transform: translate(-50%, -50%) rotate(135deg);
    left: 15%
}

.character_wrap .owl-dots {
    display: none
}

.character_wrap .character_item {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(/static/images/main_character_class_bg.jpg?ver=1);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover
}

.character_wrap .character_item .class_character {
    position: absolute;
    bottom: 0;
    left: 50%;
    opacity: 0;
    -webkit-filter: brightness(.4);
    filter: brightness(.4);
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    -webkit-transition: filter .4s ease, opacity .4s ease, transform .4s ease;
    transition: filter .4s ease, opacity .4s ease, transform .4s ease;
    z-index: 1
}

.character_wrap.on .owl-item.active .character_item .class_character.on {
    opacity: 1;
    filter: brightness(1);
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0)
}

.character_wrap .character_item .class_character img {
    width: auto;
    height: auto
}

.character_wrap .character_item .class_symbol {
    position: absolute;
    top: 36%;
    left: 45%;
    width: auto;
    opacity: 0;
    z-index: 0;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    -webkit-transition: opacity .4s ease;
    transition: opacity .4s ease
}

.character_wrap .owl-item.active .character_item .class_symbol {
    opacity: 0.035
}

.character_wrap .thumb_nail_area {
    position: absolute;
    left: 50%;
    bottom: 110px;
    z-index: 10;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width: 100%;
    max-width: 1340px;
    padding: 0 30px;
    box-sizing: border-box
}

.character_wrap .thumb_nail_area .class_play {
    opacity: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
    -webkit-transform: translate3d(0, 1.5rem, 0);
    transform: translate3d(0, 1.5rem, 0)
}

.character_wrap.on .thumb_nail_area .class_play {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    -webkit-transition: opacity .25s ease .2s, transform .25s ease .2s, background-color .2s;
    transition: opacity .25s ease .2s, transform .25s ease .2s, background-color .2s
}

.character_wrap .thumb_nail_area ul {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: calc(100% + 10px);
    margin-left: -5px
}

.character_wrap .thumb_nail_area ul li {
    width: 82px;
    height: 82px;
    margin-top: 8px;
    margin-left: 5px;
    margin-right: 5px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    -webkit-transition: transform 0.2s;
    transition: transform 0.2s;
    outline: 0;
    overflow: visible
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn::before {
    display: block;
    content: "";
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background: url(/static/images/spr_main_characters_icn.jpg?ver=1) no-repeat;
    background-size: 726px 726px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border-radius: 4px;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    background: transparent;
    content: '';
    z-index: -1;
    -webkit-transition: background-color .2s;
    transition: background-color .2s
}

.character_wrap .thumb_nail_area ul li.active .thumb_character_btn::after {
    background: #dcb15c
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_0:before {
    background-position: 0 0
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_4:before {
    background-position: -92px 0
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_12:before {
    background-position: -184px 0
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_31:before {
    background-position: -276px 0
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_24:before {
    background-position: -368px 0
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_16:before {
    background-position: -460px 0
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_27:before {
    background-position: -552px 0
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_19:before {
    background-position: -644px 0
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_8:before {
    background-position: 0 -92px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_20:before {
    background-position: -92px -92px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_28:before {
    background-position: -184px -92px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_25:before {
    background-position: -276px -92px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_26:before {
    background-position: -368px -92px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_23:before {
    background-position: -460px -92px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_11:before {
    background-position: -552px -92px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_29:before {
    background-position: -644px -92px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_21:before {
    background-position: 0 -184px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_17:before {
    background-position: -92px -184px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_5:before {
    background-position: -184px -184px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_1:before {
    background-position: -276px -184px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_9:before {
    background-position: -368px -184px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_2:before {
    background-position: -460px -184px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_10:before {
    background-position: -552px -184px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_7:before {
    background-position: -644px -184px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_30:before {
    background-position: 0 -552px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_15:before {
    background-position: -92px -552px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_6:before {
    background-position: -184px -552px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_0:focus:before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_0:before {
    background-position: 0 -276px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_4:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_4:before {
    background-position: -92px -276px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_12:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_12:before {
    background-position: -184px -276px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_31:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_31:before {
    background-position: -276px -276px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_24:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_24:before {
    background-position: -368px -276px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_16:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_16:before {
    background-position: -460px -276px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_27:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_27:before {
    background-position: -552px -276px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_19:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_19:before {
    background-position: -644px -276px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_8:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_8:before {
    background-position: 0 -368px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_20:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_20:before {
    background-position: -92px -368px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_28:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_28:before {
    background-position: -184px -368px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_25:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_25:before {
    background-position: -276px -368px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_26:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_26:before {
    background-position: -368px -368px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_23:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_23:before {
    background-position: -460px -368px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_11:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_11:before {
    background-position: -552px -368px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_29:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_29:before {
    background-position: -644px -368px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_21:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_21:before {
    background-position: 0 -460px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_17:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_17:before {
    background-position: -92px -460px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_5:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_5:before {
    background-position: -184px -460px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_1:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_1:before {
    background-position: -276px -460px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_9:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_9:before {
    background-position: -368px -460px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_2:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_2:before {
    background-position: -460px -460px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_10:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_10:before {
    background-position: -552px -460px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_7:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_7:before {
    background-position: -644px -460px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_30:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_30:before {
    background-position: 0 -644px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_15:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_15:before {
    background-position: -92px -644px
}

.character_wrap .thumb_nail_area ul li .thumb_character_btn.character_6:focus::before,
.character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_6:before {
    background-position: -184px -644px
}

.multi_wrap {
    position: relative;
    padding: 120px 0 190px;
    background: url(/static/images/main_media_bg.jpg?ver=1) no-repeat center bottom;
    background-size: cover;
    z-index: 1;
    overflow: hidden
}

.multi_wrap .section_title {
    font-size: 54px;
    color: rgba(255, 255, 255, .95);
}

.multi_wrap .section_desc {
    font-size: 16px;
    color: rgba(255, 255, 255, .95);
}

.multi_wrap .section_title+.section_desc {
    margin-top: 24px
}

.media_wrap .media_list_area .owl-stage-outer {
    overflow: visible
}

.media_wrap .media_list_area .owl-stage {
    padding: 120px 0;
    cursor: grab
}

.media_wrap .media_list_area.drag .owl-stage,
.media_wrap .media_list_area.drag .owl-stage .media_thumb:hover {
    cursor: grabbing
}

.media_wrap .media_list_area .owl-item {
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: auto
}

.media_wrap .media_list_area .media_thumb_wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    padding: 0 2.5%;
    box-sizing: border-box;
    opacity: 0;
    -webkit-filter: brightness(0.5);
    filter: brightness(0.5);
    -webkit-transform: translate3d(0, 35%, 0);
    transform: translate3d(0, 35%, 0);
    -webkit-transition: opacity .7s, transform .7s, filter .7s;
    transition: opacity .7s, transform .7s, filter .7s;
    -webkit-transition-timing-function: cubic-bezier(0.25, 0.31, 0.21, 0.91);
    transition-timing-function: cubic-bezier(0.25, 0.31, 0.21, 0.91)
}

.media_wrap .media_list_area.on .media_thumb_wrap {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-filter: brightness(1);
    filter: brightness(1)
}

.media_wrap .media_list_area .media_thumb_wrap.nextThumb,
.media_wrap .media_list_area .media_thumb_wrap.prevThumb {
    -webkit-transition-delay: .075s;
    transition-delay: .075s
}

.media_wrap .media_list_area .media_thumb_wrap.nnextThumb,
.media_wrap .media_list_area .media_thumb_wrap.pprevThumb {
    -webkit-transition-delay: .15s;
    transition-delay: .15s
}

.media_wrap .media_list_area .media_thumb {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 56.25%;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 16px 16px rgba(0, 0, 0, .22);
    -webkit-transition: transform .25s ease;
    transition: transform .25s ease
}

.media_wrap .media_list_area .media_thumb img {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 102%;
    min-height: 102%;
    border-radius: 4px;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    image-rendering: -webkit-optimize-contrast;
    backface-visibility: hidden
}

.media_wrap .media_list_area .media_thumb .media_thumb_small {
    display: none
}

.media_wrap .media_list_area .media_thumb::before {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0.75;
    background: no-repeat center;
    background-size: contain;
    content: '';
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    -webkit-transition: opacity .25s ease, transform .25s ease;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 2
}

.media_wrap .media_list_area .view_movie::before {
    width: 40px;
    max-width: 13%;
    height: 62px;
    background-image: url(/static/images/main_media_play_btn.jpg?ver=1.svg)
}

.media_wrap .media_list_area .view_movie::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .1);
    z-index: 1;
    content: ''
}

.media_wrap .media_list_area .media_thumb:focus {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.media_wrap .media_list_area .media_thumb:focus::before {
    opacity: 1;
    -webkit-transform: translate3d(-50%, -50%, 0) scale3d(1.1, 1.1, 1);
    transform: translate3d(-50%, -50%, 0) scale3d(1.1, 1.1, 1)
}

.media_wrap .media_list_area .prevThumb .media_thumb {
    -webkit-transform: translate3d(-27%, 0, 0);
    transform: translate3d(-27%, 0, 0)
}

.media_wrap .media_list_area .pprevThumb .media_thumb {
    -webkit-transform: translate3d(-30.25%, 0, 0);
    transform: translate3d(-30.25%, 0, 0)
}

.media_wrap .media_list_area .nextThumb .media_thumb {
    -webkit-transform: translate3d(27%, 0, 0);
    transform: translate3d(27%, 0, 0)
}

.media_wrap .media_list_area .nnextThumb .media_thumb {
    -webkit-transform: translate3d(30.25%, 0, 0);
    transform: translate3d(30.25%, 0, 0)
}

.media_wrap .media_list_area .owl-item.center .media_thumb {
    -webkit-transform: translate3d(0, 0, 0) scale(1.475);
    transform: translate3d(0, 0, 0) scale(1.475)
}

.media_wrap .media_list_area.drag.owl-drag .owl-stage .media_thumb {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.media_wrap .owl-item.center {
    position: relative;
    z-index: 2
}

.media_wrap .owl-item.center+.owl-item.active {
    z-index: 1
}

.download_wrap .section_title {
    font-size: 46px
}

.download_wrap .downalod_btn_wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.download_wrap .downalod_btn_wrap .story_play {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: 58px;
    min-width: auto;
    width: 390px;
    height: 78px;
    text-align: center;
    box-sizing: border-box
}

.download_wrap .downalod_btn_wrap .story_play.package {
    max-width: 48%;
    width: 304px
}

.download_wrap .downalod_btn_wrap .story_play+.story_play {
    margin-left: 1%
}

.media_wrap+.download_wrap {
    margin-top: 75px
}

#main_band_banner {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden
}

#main_band_banner .main-pc {
    display: block;
    width: 100%;
    background-color: #000;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%
}

#main_band_banner .main-pc img {
    position: relative;
    left: 50%;
    width: auto;
    min-width: 1280px;
    display: block;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0)
}

@-webkit-keyframes classAni {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2rem, 0, 0);
        transform: translate3d(2rem, 0, 0)
    }

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

@keyframes classAni {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2rem, 0, 0);
        transform: translate3d(2rem, 0, 0)
    }

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

@-webkit-keyframes fadeUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2rem, 0);
        transform: translate3d(0, 2rem, 0)
    }

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

@keyframes fadeUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2rem, 0);
        transform: translate3d(0, 2rem, 0)
    }

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

@-webkit-keyframes fadeLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2rem, 0, 0);
        transform: translate3d(2rem, 0, 0)
    }

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

@keyframes fadeLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2rem, 0, 0);
        transform: translate3d(2rem, 0, 0)
    }

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

@media (max-width: 1340px) {
    .character_wrap {
        height: 940px
    }

    .character_wrap .character_item .class_character {
        bottom: 7%
    }

    .character_wrap .thumb_nail_area .class_play {
        margin-bottom: 70px
    }
}

@media (max-width: 1280px) {
    .media_wrap .media_list_area .media_thumb .media_thumb_large {
        display: none
    }

    .media_wrap .media_list_area .media_thumb .media_thumb_small {
        display: block
    }

    #main_band_banner .main-pc img {
        width: 202.5%
    }
}

@media (min-width: 1025px) {
    .visual_wrap .txt_main_visual .main_btn:hover {
        color: #000;
        background: rgba(255, 255, 255, 0.7)
    }

    .visual_wrap .txt_main_visual .main_btn.aqua:hover {
        color: #fff;
        background: rgba(49, 139, 206, 1)
    }

    .visual_wrap .txt_main_visual .main_btn.green:hover {
        color: #fff;
        background: rgba(43, 126, 43, 1)
    }

    .visual_wrap .txt_main_visual .main_btn.deepblue:hover {
        color: #fff;
        background: rgba(31, 83, 152, 1)
    }

    .visual_wrap .txt_main_visual .main_btn.yellow:hover {
        background: rgba(235, 179, 70, 1)
    }

    .visual_wrap .txt_main_visual .main_btn.yellow.hover_ripple:hover {
        background: rgba(220, 177, 92, 1)
    }

    .visual_wrap .btn_play:hover {
        transform: translateY(-10px)
    }

    .news_list .news_box:hover .img_area img {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1)
    }

    .news_list .news_box:hover .desc_area .title {
        opacity: 1
    }

    .news_box:hover .news_img img {
        transform: scale(1.07)
    }

    .feature_wrap .feature_contents_more:hover {
        border-color: rgba(204, 182, 138, .5);
        background-color: rgba(255, 255, 255, .1)
    }

    .feature_wrap .feature_contents_more:hover::after {
        -webkit-transform: translate3d(7%, -2px, 0) skewX(55deg);
        transform: translate3d(7%, -2px, 0) skewX(55deg)
    }

    .character_wrap .classes .btn_more:hover {
        color: #fcd9a4
    }

    .character_wrap .classes .btn_more:hover::after {
        border-color: #fcd9a4;
        -webkit-transform: translate3d(8%, -3px, 0) skewX(55deg);
        transform: translate3d(8%, -3px, 0) skewX(55deg)
    }

    .character_wrap .btn_wrap a.btn_prev:hover:before {
        border-left: 2px solid #fff;
        border-top: 2px solid #fff
    }

    .character_wrap .btn_wrap a.btn_next:hover:before {
        border-left: 2px solid #fff;
        border-top: 2px solid #fff
    }

    .character_list .owl-nav button[role="presentation"]:hover:before {
        border-left: 2px solid #fff;
        border-top: 2px solid #fff
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn {
        -webkit-transform: scale3d(1.0714, 1.0714, 1);
        transform: scale3d(1.0714, 1.0714, 1)
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn::after {
        background: #dcb15c
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_0:before {
        background-position: 0 -276px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_4:before {
        background-position: -92px -276px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_12:before {
        background-position: -184px -276px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_31:before {
        background-position: -276px -276px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_24:before {
        background-position: -368px -276px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_16:before {
        background-position: -460px -276px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_27:before {
        background-position: -552px -276px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_19:before {
        background-position: -644px -276px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_8:before {
        background-position: 0 -368px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_20:before {
        background-position: -92px -368px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_28:before {
        background-position: -184px -368px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_25:before {
        background-position: -276px -368px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_26:before {
        background-position: -368px -368px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_23:before {
        background-position: -460px -368px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_11:before {
        background-position: -552px -368px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_29:before {
        background-position: -644px -368px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_21:before {
        background-position: 0 -460px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_17:before {
        background-position: -92px -460px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_5:before {
        background-position: -184px -460px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_1:before {
        background-position: -276px -460px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_9:before {
        background-position: -368px -460px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_2:before {
        background-position: -460px -460px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_10:before {
        background-position: -552px -460px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_7:before {
        background-position: -644px -460px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_30:before {
        background-position: 0 -644px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_15:before {
        background-position: -92px -644px
    }

    .character_wrap .thumb_nail_area ul li:hover .thumb_character_btn.character_6:before {
        background-position: -184px -644px
    }

    .media_wrap .media_list_area .owl-item.center .media_thumb:hover {
        -webkit-transform: scale3d(1.525, 1.525, 1);
        transform: scale3d(1.525, 1.525, 1)
    }

    .media_wrap .media_list_area .media_thumb:hover {
        -webkit-transform: scale3d(1.05, 1.05, 1);
        transform: scale3d(1.05, 1.05, 1)
    }

    .media_wrap .media_list_area .prevThumb .media_thumb:hover {
        -webkit-transform: translate3d(-27%, 0, 0) scale3d(1.05, 1.05, 1);
        transform: translate3d(-27%, 0, 0) scale3d(1.05, 1.05, 1)
    }

    .media_wrap .media_list_area .pprevThumb .media_thumb:hover {
        -webkit-transform: translate3d(-30.25%, 0, 0) scale3d(1.05, 1.05, 1);
        transform: translate3d(-30.25%, 0, 0) scale3d(1.05, 1.05, 1)
    }

    .media_wrap .media_list_area .nextThumb .media_thumb:hover {
        -webkit-transform: translate3d(27%, 0, 0) scale3d(1.05, 1.05, 1);
        transform: translate3d(27%, 0, 0) scale3d(1.05, 1.05, 1)
    }

    .media_wrap .media_list_area .nnextThumb .media_thumb:hover {
        -webkit-transform: translate3d(30.25%, 0, 0) scale3d(1.05, 1.05, 1);
        transform: translate3d(30.25%, 0, 0) scale3d(1.05, 1.05, 1)
    }

    .media_wrap .media_list_area .media_thumb:hover::before {
        opacity: 1;
        -webkit-transform: translate3d(-50%, -50%, 0) scale3d(1.1, 1.1, 1);
        transform: translate3d(-50%, -50%, 0) scale3d(1.1, 1.1, 1)
    }

    .media_wrap .media_list_area.drag .owl-stage .media_thumb_wrap .media_thumb {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@media (max-width: 1024px) {
    #wrap {
        min-width: inherit
    }

    .visual_wrap {
        height: 36.666rem;
        padding-top: 4.166rem
    }

    .visual_wrap .txt_main_visual {
        bottom: calc(50% - 2.083rem)
    }

    .visual_wrap .txt_main_visual img {
        max-width: 80%;
        margin: 0 auto
    }

    .visual_wrap .txt_main_visual .title_wrap img {
        width: 24rem
    }

    .visual_wrap .txt_main_visual .txt_inner {
        width: 100%;
        padding: 0 1rem
    }

    .visual_wrap .txt_main_visual .main_title {
        font-size: 3.6667rem
    }

    .visual_wrap .txt_main_visual .main_sub_text {
        margin: 1.2rem 0 0;
        font-size: 1.0833rem
    }

    .visual_wrap .txt_main_visual .platform_wrap {
        margin-top: 0.833rem
    }

    .visual_wrap .txt_main_visual .platform_wrap .ps,
    .visual_wrap .txt_main_visual .platform_wrap .xbox {
        max-width: none;
        height: 1.44rem
    }

    .visual_wrap .txt_main_visual .platform_wrap .xbox {
        margin-left: 1.34rem
    }

    .visual_wrap .txt_main_visual .btn_wrap {
        display: flex;
        width: 100%;
        margin: 1.7rem 0 0
    }

    .visual_wrap .txt_main_visual .btn_wrap .floatingBanner {
        width: 50%;
        max-width: 16.25rem;
        margin: 0 0.2083rem
    }

    .visual_wrap .txt_main_visual .btn_wrap .floatingBanner+.floatingBanner {
        margin: 0 0 0 0.8333rem
    }

    .visual_wrap .txt_main_visual .main_btn {
        width: 100%;
        height: 3.25rem;
        padding: 0 5px;
        font-size: 1rem
    }

    .visual_wrap .video_wrap {
        display: none;
        background-color: transparent
    }

    .visual_wrap .video_wrap video {
        display: none;
        right: auto;
        bottom: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto
    }

    .visual_wrap .btn_play {
        width: 2.416rem;
        height: 2.916rem;
        background-size: 33.33rem 33.33rem;
        background-position: -30.833rem -7.5rem
    }

    .news_wrap.section_wrap .section_inner {
        padding: 0
    }

    .news_list {
        padding: 2rem 0;
        -ms-overflow-style: none;
        scrollbar-width: none
    }

    .news_list::-webkit-scrollbar {
        display: none
    }

    .news_list .owl-stage {
        padding: 1.66rem 0 2.5rem
    }

    .news_list .owl-dots {
        position: absolute;
        left: 50%;
        bottom: .995rem;
        display: flex;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0)
    }

    .news_list .owl-dots .owl-dot {
        width: 0.666rem;
        height: 0.666em;
        border-radius: 50%;
        opacity: .15;
        background: #000;
        -webkit-transition: opacity .2s;
        transition: opacity .2s
    }

    .news_list .owl-dots .owl-dot.active {
        opacity: .3
    }

    .news_list .owl-dots .owl-dot+.owl-dot {
        margin-left: 0.583rem
    }

    .news_list .news_box {
        padding: .916rem
    }

    .news_list .news_box .desc_area {
        margin-left: 3.5%
    }

    .news_list .news_box .desc_area .news_category {
        font-size: .85rem
    }

    .news_list .news_box .desc_area .title {
        height: 2.8rem;
        margin-top: .5rem;
        opacity: 1
    }

    .news_list .news_box .img_area {
        width: 37.877%;
        min-width: 7.14rem;
        max-width: 15.714rem
    }

    .news_list .news_item {
        flex: 0 0 auto;
        width: 29.7rem;
        max-width: 85vw;
        padding-left: 1.25rem
    }

    .news_list .news_item+.news_item {
        margin-left: 0
    }

    .news_list .news_item:last-child {
        padding-right: 1.5rem
    }

    .news_wrap .news_container {
        background-size: auto 100%
    }

    .news_wrap .news_container .news_box_wrap {
        padding: 30px 26px 20px
    }

    .news_wrap .news_container .news_box {
        margin-right: 10px
    }

    .news_wrap .news_container .news_img img {
        width: 328px
    }

    .news_wrap .news_container .news_title {
        max-width: 328px;
        margin-top: 8px;
        font-size: 16px
    }

    .feature_wrap::before {
        background-size: 200% auto;
        background-position: 66% top
    }

    .feature_wrap .feature_subject .section_title {
        font-size: 3.1rem
    }

    .feature_wrap .feature_subject .section_desc {
        margin-top: 3.5rem;
        font-size: 1.2rem
    }

    .feature_wrap .feature_subject {
        padding-bottom: 20rem
    }

    .feature_wrap .feature_contents_title {
        font-size: 2.55rem
    }

    .feature_wrap .feature_contents_desc {
        font-size: 1rem
    }

    .feature_wrap .feature_contents.battle .feature_contents_subject {
        margin-top: -3.2rem
    }

    .feature_wrap .feature_contents.life {
        align-items: center
    }

    .feature_wrap .feature_contents.life .feature_contents_subject {
        padding-top: 0
    }

    .feature_wrap .feature_contents_more {
        min-width: 11.5rem;
        font-size: 1rem
    }

    .world_wrap .world_parallax_wrap {
        height: 40rem
    }

    .world_wrap .world_parallax {
        background-size: cover
    }

    .world_wrap .section_title {
        font-size: 3.1rem
    }

    .world_wrap .section_desc {
        font-size: 1rem
    }

    .character_wrap {
        height: 48rem
    }

    .character_wrap .classes .class_name {
        padding-top: 7rem;
        font-size: 3rem
    }

    .character_wrap .classes .class_desc {
        font-size: 1rem
    }

    .character_wrap .character_item .class_character {
        left: 56%;
        bottom: 23%
    }

    .character_wrap .character_item .class_character img {
        width: 81rem
    }

    .character_wrap .character_item .class_symbol {
        top: 28%;
        left: 44%;
        width: 15rem
    }

    .character_wrap .thumb_nail_area {
        width: 100%;
        padding: 0 2rem;
        bottom: 7rem
    }

    .character_wrap .thumb_nail_area .class_play {
        margin-bottom: 3rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn::after {
        width: calc(100% + 0.25rem);
        height: calc(100% + 0.25rem)
    }

    .character_wrap .thumb_nail_area ul li {
        width: 3.416rem;
        height: 3.416rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn::before {
        background-size: 30.25rem 30.25rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_0:before {
        background-position: 0 0
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_4:before {
        background-position: -3.833rem 0
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_12:before {
        background-position: -7.663rem 0
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_31:before {
        background-position: -11.5rem 0
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_24:before {
        background-position: -15.333rem 0
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_16:before {
        background-position: -19.18rem 0
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_27:before {
        background-position: -23rem 0
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_19:before {
        background-position: -26.875rem 0
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_8:before {
        background-position: 0 -3.833rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_20:before {
        background-position: -3.833rem -3.833rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_28:before {
        background-position: -7.663rem -3.833rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_25:before {
        background-position: -11.5rem -3.833rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_26:before {
        background-position: -15.333rem -3.833rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_23:before {
        background-position: -19.18rem -3.833rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_11:before {
        background-position: -23rem -3.833rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_29:before {
        background-position: -26.875rem -3.833rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_21:before {
        background-position: 0 -7.666rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_17:before {
        background-position: -3.833rem -7.666rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_5:before {
        background-position: -7.663rem -7.666rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_1:before {
        background-position: -11.5rem -7.6667rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_9:before {
        background-position: -15.333rem -7.6667rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_2:before {
        background-position: -19.18rem -7.6667rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_10:before {
        background-position: -23rem -7.6667rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_7:before {
        background-position: -26.875rem -7.6667rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_30:before {
        background-position: 0 -23rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_15:before {
        background-position: -3.833rem -23rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_6:before {
        background-position: -7.663rem -23rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_0:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_0::before {
        background-position: 0 -11.5rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_4:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_4::before {
        background-position: -3.833rem -11.5rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_12:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_12::before {
        background-position: -7.663rem -11.5rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_31:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_31::before {
        background-position: -11.5rem -11.5rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_24:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_24::before {
        background-position: -15.333rem -11.5rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_16:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_16::before {
        background-position: -19.18rem -11.5rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_27:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_27::before {
        background-position: -23rem -11.5rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_19:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_19::before {
        background-position: -26.875rem -11.5rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_8:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_8::before {
        background-position: 0 -15.333rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_20:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_20::before {
        background-position: -3.833rem -15.333rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_28:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_28::before {
        background-position: -7.663rem -15.333rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_25:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_25::before {
        background-position: -11.5rem -15.333rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_26:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_26::before {
        background-position: -15.333rem -15.333rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_23:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_23::before {
        background-position: -19.18rem -15.333rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_11:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_11::before {
        background-position: -23rem -15.333rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_29:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_29::before {
        background-position: -26.875rem -15.333rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_21:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_21::before {
        background-position: 0 -19.166rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_17:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_17::before {
        background-position: -3.833rem -19.166rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_5:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_5::before {
        background-position: -7.663rem -19.166rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_1:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_1::before {
        background-position: -11.5rem -19.1667rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_9:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_9::before {
        background-position: -15.333rem -19.1667rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_2:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_2::before {
        background-position: -19.18rem -19.1667rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_10:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_10::before {
        background-position: -23rem -19.1667rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_7:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_7::before {
        background-position: -26.875rem -19.1667rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_30:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_30::before {
        background-position: 0 -26.875rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_15:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_15::before {
        background-position: -3.833rem -26.875rem
    }

    .character_wrap .thumb_nail_area ul li .thumb_character_btn.character_6:focus::before,
    .character_wrap .thumb_nail_area ul li.active .thumb_character_btn.character_6::before {
        background-position: -7.663rem -26.875rem
    }

    .character_wrap .owl-nav button[role="presentation"] {
        width: 3.541rem;
        height: 3.541rem;
        background-color: #40373c
    }

    .character_wrap .owl-nav button[role="presentation"].owl-prev {
        left: 0
    }

    .character_wrap .owl-nav button[role="presentation"].owl-prev:before {
        left: 55%;
        width: 0.916rem;
        height: 0.916rem;
        border-left: 2px solid #fff;
        border-top: 2px solid #fff
    }

    .character_wrap .owl-nav button[role="presentation"].owl-next {
        right: 0
    }

    .character_wrap .owl-nav button[role="presentation"].owl-next:before {
        left: 45%;
        width: 0.916rem;
        height: 0.916rem;
        border-left: 2px solid #fff;
        border-top: 2px solid #fff
    }

    .video_area video {
        right: auto;
        bottom: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%)
    }

    .multi_wrap .section_title {
        font-size: 3rem
    }

    .multi_wrap .section_desc {
        font-size: 1rem
    }

    .download_wrap .downalod_btn_wrap .story_play {
        width: 16.16rem;
        height: 3.25rem;
        margin-top: 2.33rem
    }

    .download_wrap .downalod_btn_wrap .story_play.package {
        width: 13.6rem
    }
}

@media (max-width:767px) {
    .main-pc {
        display: none !important
    }

    .main-m {
        display: block !important
    }

    .section_wrap .section_inner {
        max-width: 100%;
        padding: 0 1.66rem
    }

    .news_wrap {
        overflow: hidden
    }

    #main_band_banner .main-m {
        display: block;
        width: 100%;
        height: 100%
    }

    #main_band_banner .main-m img {
        width: 100%;
        height: auto
    }

    .news_wrap .news_container .news_box_wrap {
        padding: 1.4286rem 1.4286rem 0.7rem
    }

    .news_wrap .news_container .news_box {
        margin-right: 0.5714rem
    }

    .news_wrap .news_container .news_img img {
        width: 15.4286rem
    }

    .news_wrap .news_container .news_title {
        font-size: 0.8571rem;
        margin-top: 0.4123rem;
        max-width: 15.4286rem
    }

    .feature_wrap {
        padding: 5.33rem 0 6.41rem
    }

    .feature_wrap .section_inner {
        padding: 0
    }

    .feature_wrap::before {
        background-image: url(/static/image/main_feature_bg.jpg?ver=2);
        background-size: 100% auto
    }

    .feature_wrap .feature_subject {
        padding: 0 1.66rem 4.83rem
    }

    .feature_wrap .feature_subject .section_title {
        font-size: 2.416rem
    }

    .feature_wrap .feature_subject .section_desc {
        margin-top: 1.6rem;
        font-size: .83rem;
        line-height: 1.675
    }

    .feature_wrap .feature_contents .feature_thumb .feature_thumb_img {
        width: 100%
    }

    .feature_wrap .feature_contents {
        display: block;
        padding: 0 1.66rem
    }

    .feature_wrap .feature_contents_title {
        font-size: 2rem
    }

    .feature_wrap .feature_contents_title+.feature_contents_desc {
        margin-top: 1.05rem
    }

    .feature_wrap .feature_contents_subject {
        padding: 0 0.83rem
    }

    .feature_wrap .feature_contents_desc {
        font-size: .83rem
    }

    .feature_wrap .feature_contents.adventure .feature_thumb {
        width: 100%;
        margin-top: 0
    }

    .feature_wrap .feature_contents.adventure .feature_contents_subject {
        width: 100%;
        margin-top: 2.6rem;
        padding: 0 0.83rem
    }

    .feature_wrap .feature_contents.adventure .feature_contents_title {
        -webkit-animation-delay: 0s;
        animation-delay: 0s
    }

    .feature_wrap .feature_contents.adventure .feature_contents_desc {
        max-width: 100%;
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s
    }

    .feature_wrap .feature_contents.adventure .feature_contents_desc+.feature_contents_desc {
        margin-top: 1rem;
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s
    }

    .feature_wrap .feature_contents.adventure .feature_contents_more {
        margin-top: 2.1rem;
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s
    }

    .feature_wrap .feature_contents_more {
        min-width: 8.166rem;
        height: 2.25rem;
        font-size: 0.791rem
    }

    .feature_wrap .feature_contents_more::after {
        width: 2.77rem;
        height: 0.45rem;
        margin-left: 7px
    }

    .feature_wrap .feature_contents.battle {
        padding: 0
    }

    .feature_wrap .feature_contents.battle .thumb_img_wrap {
        height: auto
    }

    .feature_wrap .feature_contents.battle .thumb_img_wrap .feature_parallax {
        position: relative
    }

    .feature_wrap .feature_contents.battle .feature_contents_subject {
        margin-top: 2.3rem;
        padding: 0 2.49rem
    }

    .feature_wrap .feature_contents.battle .feature_contents_title+.feature_contents_desc {
        margin-top: 1.2rem
    }

    .feature_wrap .feature_contents.battle .feature_contents_more {
        margin-top: 2.1rem
    }

    .feature_wrap .feature_contents.life {
        margin-top: 5.916rem
    }

    .feature_wrap .feature_contents.life .feature_thumb {
        width: 100%;
        margin-right: 0
    }

    .feature_wrap .feature_contents.life .feature_thumb .char {
        width: 69%;
        left: -4%;
        max-width: 421.6px
    }

    .feature_wrap .feature_contents.life .feature_thumb .bg {
        width: 60%;
        border-radius: 3px;
        max-width: 367px
    }

    .feature_wrap .feature_contents.life .feature_thumb .pet {
        top: 6%;
        left: 52.5%;
        width: 21%;
        max-width: 128px
    }

    .feature_wrap .feature_contents.life .feature_contents_subject {
        margin-top: 2.75rem;
        padding-top: 0;
        -webkit-transform: none;
        transform: none
    }

    .feature_wrap .feature_contents.life .feature_contents_title {
        -webkit-animation-delay: 0s;
        animation-delay: 0s
    }

    .feature_wrap .feature_contents.life .feature_contents_desc {
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s
    }

    .feature_wrap .feature_contents.life .feature_contents_desc+.feature_contents_desc {
        margin-top: 1rem;
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s
    }

    .feature_wrap .feature_contents.life .feature_contents_more {
        margin-top: 2.1rem;
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s
    }

    .feature_wrap .feature_contents.life .thumb_back.back1 {
        top: -2.083rem;
        right: 1.66rem;
        width: 32%;
        max-width: 204px
    }

    .feature_wrap .feature_contents.life .thumb_back.back1 .feature_thumb_img {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s
    }

    .feature_wrap .feature_contents.life .thumb_back.back2 {
        top: 57%;
        bottom: auto;
        right: 1.66rem;
        width: 45.6%;
        max-width: 297px
    }

    .feature_wrap .feature_contents.life .thumb_back.back1.on~.thumb_back.back2 .fadeLeft {
        -webkit-animation-delay: 0.45s;
        animation-delay: 0.45s
    }

    .world_wrap .section_title {
        font-size: 2.25rem
    }

    .world_wrap .section_desc {
        font-size: .83rem
    }

    .world_wrap .section_title+.section_desc {
        margin-top: 1.66rem
    }

    .world_wrap .section_desc+.section_desc {
        margin-top: 1.16rem
    }

    .world_wrap .world_parallax_wrap {
        height: 0;
        padding-bottom: 80%
    }

    .character_wrap {
        height: 64.16rem
    }

    .character_wrap .classes {
        top: 4rem
    }

    .character_wrap .classes .class_desc_wrap {
        text-align: center
    }

    .character_wrap .classes .class_name {
        padding-top: 0;
        font-size: 2.5rem
    }

    .character_wrap .classes .class_desc {
        min-height: auto;
        margin-top: 1.5rem;
        font-size: .83rem;
        max-width: none
    }

    .character_wrap .classes .btn_more {
        font-size: .83rem
    }

    .character_wrap .character_item .class_symbol {
        width: 6rem;
        left: 50%;
        top: 5.416rem
    }

    .character_wrap .owl-item.active .character_item .class_symbol {
        opacity: 0.15
    }

    .character_wrap .character_item .class_character {
        top: 50%;
        left: 50%;
        bottom: auto;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0)
    }

    .character_wrap.on .owl-item.active .character_item .class_character.on {
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0)
    }

    .character_wrap .character_item .class_character img {
        width: 41.666rem
    }

    .character_wrap .thumb_nail_area {
        bottom: 4.16rem;
        padding: 0 1.666rem
    }

    .character_wrap .thumb_nail_area ul {
        width: calc(100% + 0.666rem);
        margin-left: -0.333rem
    }

    .character_wrap .thumb_nail_area ul li {
        width: 3.333rem;
        height: 3.333rem;
        margin: 0.333rem
    }

    .character_wrap .thumb_nail_area .class_play {
        position: relative;
        left: 50%;
        margin-bottom: 2.916rem;
        -webkit-transform: translate3d(-50%, 1.5rem, 0);
        transform: translate3d(-50%, 1.5rem, 0)
    }

    .character_wrap.on .thumb_nail_area .class_play {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0)
    }

    .multi_wrap {
        padding: 4rem 0 8.75rem;
        background-image: url(/static/images/m_main_media_bg.jpg?ver=1)
    }

    .multi_wrap .section_title {
        font-size: 2.333rem
    }

    .multi_wrap .section_desc {
        font-size: 0.83rem
    }

    .multi_wrap .section_title+.section_desc {
        margin-top: 1.16rem
    }

    .multi_wrap .media_subject {
        padding: 0 1.66rem
    }

    .media_wrap .media_list_area .owl-stage {
        padding: 16% 0 14%
    }

    .media_wrap .media_list_area .media_thumb {
        border-radius: 2px;
        box-shadow: 0 0.5rem 0.7rem rgba(0, 0, 0, .22)
    }

    .media_wrap .media_list_area .media_thumb img {
        border-radius: 2px
    }

    .media_wrap .media_list_area .owl-item.center .media_thumb {
        -webkit-transform: translate3d(0, 0, 0) scale(1.65);
        transform: translate3d(0, 0, 0) scale(1.65)
    }

    .media_wrap .media_list_area .nextThumb .media_thumb {
        -webkit-transform: translate3d(51.5%, 0, 0) scale(1.25);
        transform: translate3d(51.5%, 0, 0) scale(1.25)
    }

    .media_wrap .media_list_area .prevThumb .media_thumb {
        -webkit-transform: translate3d(-51.5%, 0, 0) scale(1.25);
        transform: translate3d(-51.5%, 0, 0) scale(1.25)
    }

    .media_wrap+.download_wrap {
        margin-top: 3rem
    }

    .download_wrap .section_title {
        font-size: 2rem
    }

    .download_wrap .download_subject {
        padding: 0 1.16rem
    }

    .js-scrollAni.on .m_fadeUp {
        -webkit-animation: fadeUp .8s ease both;
        animation: fadeUp .7s ease both
    }

    .js-scrollAni.on .m_fadeLeft {
        -webkit-animation: fadeLeft .8s ease both;
        animation: fadeLeft .7s ease both
    }

    @-webkit-keyframes classAni {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(2rem, 0, 0);
            transform: translate3d(2rem, 0, 0)
        }

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

    @keyframes classAni {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, 1rem, 0) scale3d(1.05, 1.05, 1);
            transform: translate3d(0, 1rem, 0) scale3d(1.05, 1.05, 1)
        }

        100% {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
            transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
        }
    }
}

@media (max-width:480px) {
    .visual_wrap .txt_main_visual .main_title {
        font-size: 34px
    }

    .visual_wrap .txt_main_visual .main_sub_text {
        font-size: 13px
    }

    .visual_wrap .txt_main_visual .main_btn {
        font-size: 11px
    }

    .news_wrap .news_container .news_box {
        margin-right: 0.4286rem
    }

    .news_wrap .news_container .news_img img {
        width: 13.4286rem
    }

    .character_wrap .classes .class_name {
        font-size: 32.5px
    }

    .character_wrap .classes .class_desc {
        font-size: 12px
    }

    .character_wrap .classes .class_desc br {
        display: none
    }
}

:lang(ru-RU) .visual_wrap .txt_main_visual .btn_wrap .btn_grd_yellow {
    display: flex;
    line-height: 1.2;
    align-items: center;
    justify-content: center
}

@media (min-width: 1025px) {
    html {
        font-size: 16px
    }
}

@media (max-width: 1024px) {
    html {
        font-size: 14px
    }
}

@media (max-width: 430px) {
    html {
        font-size: 13.71px
    }
}

@media (max-width: 420px) {
    html {
        font-size: 13.38px
    }
}

@media (max-width: 410px) {
    html {
        font-size: 13.07px
    }
}

@media (max-width: 400px) {
    html {
        font-size: 12.75px
    }
}

@media (max-width: 390px) {
    html {
        font-size: 12.43px
    }
}

@media (max-width: 380px) {
    html {
        font-size: 12.11px
    }
}

@media (max-width: 370px) {
    html {
        font-size: 11.79px
    }
}

@media (max-width: 360px) {
    html {
        font-size: 11.47px
    }
}

@media (max-width: 350px) {
    html {
        font-size: 11.16px
    }
}

@media (max-width: 340px) {
    html {
        font-size: 10.83px
    }
}

@media (max-width: 330px) {
    html {
        font-size: 10.52px
    }
}

@media (max-width: 320px) {
    html {
        font-size: 10.2px
    }
}