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

.showcase_banner {
    left:15px;
    transform: scale(0.7);
    transform-origin: left bottom;
}
@media (max-width: 1368px) { 
    header {
        display: none !important;
    }
    header#tablet {
        display: block !important;
    }
    header#tablet {
        width:100%;
        height:70px;
        position:fixed;
        top:0;
        left:0;
        background: #070707;
        /* background: rgba(0, 0, 0, 0.7); */
        z-index: 151;
    }
    header#tablet .header_wrap {
        overflow: hidden;
        overflow: static;
        position: relative;
        display: flex;
        justify-content: flex-start;
        width:100%;
        min-width:100%;
        height:70px;
        transition: height 0.25s ease-in-out;
    }
    header#tablet h1 {
        position: absolute;
        top:50%;
        left:50%;
        width:102px;
        height:43px;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 100
    }
    header#tablet h1 a{
        display: block;
        width:101px;
        margin:0 auto;
    }

    #btn_gnb {
        position: fixed;
        top:0;
        width:70px;
        height:70px;
        z-index:100;
    }
    #btn_gnb  img{
        width:100%;
    }

    

    header#tablet #gnbTablet{
        overflow: hidden;
        position: fixed;
        top: 0;
        left: -100vw;
        width:100%;
        background: url(../.././../../kr/static/mo/images/bg_gnb.jpg) no-repeat 0 0;
        background-size:360px 100%;
        z-index: 99;
        transition: all 0.2s;
    }
    header#tablet #gnbTablet.open {
        left: 0;
        transition: all 0.2s;
        z-index: 99;
        transition: height 0.25s ease-in-out;
    }
    header#tablet #gnbTablet.open::after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100vh;
        background:rgba(0, 0, 0, 0.6);
        z-index: 10;
    }
    header#tablet .gnb_wrap {
        /* overflow: auto; */
        overflow: hidden;
        position: relative;
        width: 100%;
        width:360px;
        height:calc(100% - 71px);
        padding:70px 0 74px 0;
        background:url(/../../kr/static/mo/images/bg_gnb_line.png) no-repeat 0 71px;
        background-size:360px 1px;
        z-index: 105;
    }
    header#tablet .menu_box {
        overflow: auto;
        position: relative;
        width:360px;
        height:calc(100% - 71px);
        height:100%;
    }
    header#tablet .gnb_wrap ul {
        overflow: auto;
        display: block;
        width:294px;
        padding:12px 0 13px 60px;
    }
    header#tablet .gnb_wrap ul li {
        width:290px;
        padding:0;
    }
    header#tablet .gnb_wrap ul li a{
        display: block;
        width:266px;
        height: 24px;
        line-height: 24px;;
        padding:12px 0 12px 25px !important;
        text-align: left;
        background:url(/../../kr/static/mo/images/bg_gnb_li_blt.png) no-repeat 0 14px;
        background-size:18px 15px;
        text-shadow: none;
    }
    header#tablet .gnb_wrap ul li > a img{
        width:auto;
        height:24px;
    }
    header#tablet .gnb_wrap ul li a::after{
        display: none;
    }
    header#tablet .gnb_wrap ul ul {
        overflow: hidden;
        display: block;
        width:100%;
        padding:0px 0 5px;
        position: relative;
        top:auto;
        left:auto;
        transform: none;
    }
    header#tablet .gnb_wrap ul ul li {
        padding:0 0 0 24px;
        text-align: center;
        box-sizing: border-box;
    }
    header#tablet .gnb_wrap ul ul li a{
        position: relative;
        display: block;
        height:24px;
        line-height: 24px;
        padding:3px 0 3px 24px!important;
        font-size: 16px;
        text-align: left;
        color:#c4bba9;
        letter-spacing: -0.040em;
        background:none;
    }
    header#tablet .gnb_wrap ul ul li a::after{
        content: "";
        display: block;
        position: absolute;
        top: 13px;
        left: 5px;
        width: 6px;
        height: 6px;
        transform: rotate(-45deg);
        background: #92856c;
    }
    header#tablet .gnb_wrap ul ul li a:hover,
    header#tablet .gnb_wrap ul ul li.active a{
        color:#e3dcd0;
    }

    header#tablet .gnb_share_box {
        width:100%;
        height:60px;
        background:url(/../../kr/static/mo/images/bg_gnb_line.png) no-repeat 0 0;
        background-size:360px 1px;
        display: flex;
        justify-content: center;
    }
    header#tablet .gnb_share_box button{
        display: block;
        width:64px;
        height:61px;
        background-size:147px 18px;
    }
    header#tablet .gnb_share_box button.btn_share {
        background:url(/../../kr/static/mo/images/bg_share.png) no-repeat 21px 21px;
        background-size:147px 18px;
    }

    header#tablet .gnb_share_box button.btn_share_yt {
        background:url(/../../kr/static/mo/images/bg_share.png) no-repeat -48px 21px;
        background-size:147px 18px;
    }

    header#tablet .gnb_share_box button.btn_share_kakao {
        background:url(/../../kr/static/mo/images/bg_share.png) no-repeat -114px 21px;
        background-size:147px 18px;
    }
    header#tablet .header_wrap .language {
        position: fixed;
        top:0px;
        right:40px;
        z-index: 101;
    }


    /* main */
    #main {
        position: relative;
        width:100%;
        height:100%;
    }
    #main .bg{
        position: relative;
        width:100%;
        height:100%;
    }
    #main .bg video{
        position: relative;
        left:50%;
        transform: translateX(-50%);
        /* transform: translate(-50%, -50%);
        wid   top:50%;th:100%;
        height:100%; */
        min-width:100%;
        min-height:100vh;
        object-fit:cover;
        z-index: 10;
    }
    #main .bg img{
        display: none;
        width:100%;
        height:100%;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }
    #main .bg video::after{
        content:"";
        display: block;
        width:100%;
        height:100%;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        background:rgba(0, 0, 0, 0.2)
    }
    #main .content {
        position: absolute;
        top:50%;
        left:50%;
        width:100%;
        height:auto;
        transform: translate(-50%, -50%);
        /* display: flex;
        justify-content: center; */
        z-index: 51;
    }
    .main_box {
        width:100%;
        text-align: center;
        transform: scale(0.9);
    }
    .main_box .tit img{
        width:44.444444444vw;
    }
    .main_box .btn_play_box {
        position: relative;
        margin:-2.083333333vw auto 0.000000000vw;
        width:18vw;
        height:18vw;
        background:url(/../../kr/static/pc/images/btn_main_play_bg.png) no-repeat center center;
        background-size:cover;
        z-index: 1;
    }

    .main_box .btn_play_box button{
        display: block;
        position: relative;
        width:100%;
        height:100%;
        background:url(/../../kr/static/pc/images/btn_main_play.png) no-repeat center center;
        transition:transform 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
        background-size:7.291666667vw 7.291666667vw;
        border:none;
        outline:none;
    }

    .main_box .btn_play_box button:hover {
        transform: rotate(360deg);
    }
    .main_box .btn_play_box span{
        display: block;
        position: absolute;
        width:18vw;
        height:18vw;
        top:0;
        left:0;
        background:url(/../../kr/static/pc/images/btn_main_play_inner.png) no-repeat center center;
        background-size:7.291666667vw 7.291666667vw;
        pointer-events: none;
    }

    #main .main_box .btn_box {
        position: relative;
        width:100%;
        text-align: center;
        display: flex;
        justify-content: center;
        z-index: 50;
    }
    #main .btn_box a {
        display: block;
        width:21.666666667vw;
    }
    #main .btn_box a.btn_main_global_beta {
        width:22.291666667vw;
        display: none;
    }
    #main .btn_box a img{
        width:100%;
    }

    .intro_download_box {
        width:100%;
        margin:0 auto;
        padding:1.388888889vw 0 0 0;
        display: flex;
        justify-content: center;
    }
    .intro_download_box a{
        display: block;
    }
    .intro_download_box a img{
        height:4.097222222vw
    }
    #main p.rom_txt_01 {
        line-height:1.6;
        margin:1.388888889vw 0 1.736111111vw 0;
        font-size: 1.250000000vw;
        color:#e3dcd0;
        text-align: center;
        text-shadow:#000000 0.069444444vw 0 0.277777778vw;
    }
    #main .float_banner {
        position: fixed;
        right:0;
        top:50%;
        width:23.611111111vw;
        transform: translateY(-50%);
    }
    #main .float_banner a{
        display: block;
        text-align: right;
        width:27.083333333vw;
        height:11.805555556vw;
        transform: translate(23.611111111vw, 0.000000000vw);
    }
    #main .float_banner a img{
        width: 100%;
    }
    /* 메인 동영상 */
    #main_video_pop .video_box {
        position: relative;
        display: inline-block;
        width:83.333333333vw;
        height:46.875000000vw;
        padding:0 4.166666667vw;
    }

    #main_video_pop .video_box .video_inner {
        width:83.333333333vw;
        height:46.875000000vw;
        overflow: hidden;
    }
    #main_video_pop .video_box .video_inner iframe {
        width:100%;
        height:100%;
    }
    #main_video_pop .btn_pop_close {
        position: absolute;
        top:0;
        right:0;
    }


    #download {
        min-width:auto;
    }
    #download .top_banner .title {
        position: absolute;
        top: 50%;
        left: 4%;
        width: 94%;
        transform: translateY(-50%);
        z-index: 2;
        margin: 0 auto;
    }
    .download_infor_box {
        width:94%;
        margin:70px auto;
    }

    .download_conts .rom_client {
        position: relative;
        display: flex;
        align-items: center;
        width:100%;
        height:16.666666667vw;
        background:url(/../../kr/static/pc/images/bg_download_area.png) no-repeat 0 0;
        background-size:cover;
    }
    .download_conts .rom_client p {
        top:2.342606149vw;
        left:2.928257687vw;
        font-size: 1.805555556vw;
        line-height: 2.638888889vw;
        color:#d0c8b7;
        text-shadow: #000 0.069444444vw 0 0.486111111vw;
    }
    .download_conts .rom_client .btn_box{
        bottom:2.562225476vw;
        left:2.928257687vw;
    }
    .download_conts .rom_client .btn_box button {
        margin:0 1.464128843vw 0 0;
    }
    .download_conts .rom_client .btn_box button.pc_ver{
        width:12.430555556vw;
    }
    .download_conts .rom_client .btn_box button.appstore{
        width:12.638888889vw;
    }
    .download_conts .rom_client .btn_box button.googleplay{
        width:12.430555556vw;
    }
    .download_conts .rom_client .btn_box button img{
        width:100%;
    }
    .download_conts {
        width:100%;
        overflow: hidden;
    }
    .download_conts_inner {
        width:100%;
        overflow: auto;
        
    }
    .download_conts .systerm {
        width:100%;
        display: flex;
        justify-content: space-between;
    }
    .download_conts .systerm ul {
        width:32.265625000vw;
        border-left:0.078125000vw solid #e1dcd1;
    }
    .download_conts .systerm ul.category {
        width:32.187500000vw;
        border-left:none;
    }

    .download_conts .systerm ul li {
        font-size: 1.562500000vw;
        line-height: 2.343750000vw;
        letter-spacing: -0.030em;
        padding:1.953125000vw 0;
        text-align: center;
        color:#504431;
        font-weight: 500;
        border-bottom:0.078125000vw solid #e1dcd1;
        background:#f7f3e8;
    }
    .download_conts .systerm ul li.head {
        background:#92856c;
        color:#f7f3e8;
        border-bottom:none;
    }

    .download_conts .driver ul {
        display: flex;
    }
    .download_conts .driver ul li {
        display: block;
        width:24.140625000vw;
        border-left:0.078125000vw solid #e1dcd1;
    }
    .download_conts .driver li.first{
        border-left:none;
    }

    .download_conts .driver ul div{
        width:100%;
        background:#fffdf9;
    }
    .download_conts .driver ul div a{
        display: block;
        width:100%;
    }
    .download_conts .driver ul div img{
        width:100%;
    }
    .download_conts .driver ul div p.driver_name{
        background:#92856c;
        color:#f7f3e8;
        text-align: center;
        font-size: 1.562500000vw;
        line-height: 2.343750000vw;
        letter-spacing: -0.030em;
        padding:1.328125000vw;
    }
    .download_conts .driver ul div p.driver_name a.btn_driver_download{
        display: inline-block;
        width:1.718750000vw;
    }
    .download_conts .driver ul div p.driver_name a.btn_driver_download img{
        vertical-align: top;
        margin:0.390625000vw 0 0 0.781250000vw;
    }

    .download_conts .systerm ul.category.depth4{
        width:25.000000000vw;
    }

    .download_conts .systerm ul.category.depth4:first-child {
        width:21.875000000vw;
    }



    #preregistration .content{
        transform: translate(-50%, -50%) scale(0.8);
    }
    #event {
        min-width:100%;
        overflow: hidden;
    }
    #event .content {
        width:1270px;
        margin:70px auto 0;
        padding:0 0 30px 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    .event_present {
        margin:30px 0 0 0;
    }
    .event_notice {
        margin-top:-30px;
    }
   
    /* 캐릭터 선점 이벤트 메인 */
    #eventChar {
        width:100%;
        min-height:100%;
        /* background:url(/../../kr/static/pc/images/bg_event_char.jpg) no-repeat center 0; */
        background-size:cover;
    }
    #eventChar .bg{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }
    #eventChar .bg img{
        height:auto;
        min-height:100%;
    }
    #eventChar .content{
        position: relative;
        z-index: 10;
    }
    .event_charactor {
        margin:0 auto;
        width:100%;
        padding:11.805555556vw 0 6.944444444vw 0;
    }
    .event_charactor .tit {
        width:66.666666667vw;
        margin:0 auto;
        text-align: center;
    }
    .event_charactor .tit  img{
        width:100%;
    }
    .event_charactor .form_box .inner_form_box {
        overflow: hidden;
        width:100%;
    }
    .event_charactor .form_box .cert_tit img{
        width:100%;
    }
    .charactor_cert_box .inner_form_box .input_box input {
        font-size:20px;
        background:transparent;
        border:none;
        outline:none;
    }
    .charactor_cert_box .inner_form_box .input_box input::placeholder {
        font-size:20px;
        letter-spacing: -0.040em;
        color:#c6b59b;
    }
    .charactor_cert_box .inner_form_box .input_box input::-moz-placeholder {
        font-size:20px;
        letter-spacing: -0.040em;
        color:#c6b59b;
    }
    .charactor_cert_box .inner_form_box .input_box input::-webkit-input-placeholder{
        font-size:20px;
        letter-spacing: -0.040em;
        color:#c6b59b;
    }
    .charactor_cert_box .inner_form_box .agree_wrap .agree_box.input_checkBox label{
        position: relative;
        display: flex;
        justify-content: flex-start;
    }
    .charactor_cert_box .inner_form_box .agree_wrap .agree_box.input_checkBox label .tit {
        display: inline-block;
        width:auto;
    }
    .charactor_cert_box .inner_form_box .agree_wrap .agree_box .btn_more{
        display: block;
    }

    #event_agr01.pop .text_box {
        width:700px;
        height: 480px;
        padding:20px 30px 30px 30px;
        overflow: hidden;
    }
    #event_agr01.pop .text_box .text_inner {
        overflow: auto;
        height: 100%;
    }
    /* #event_agr01.pop .text_box {
        width:46.527777778vw;
        padding:1vw 2.083333333vw 1vw 2.083333333vw;;
    }
    #event_agr01.pop .text_box .text_inner {
        padding:0;
    }
    #event_agr01.pop .text_box .text_inner .tit{
        font-size: 1.111111111vw;
        line-height: 1.944444444vw;
        color:#efebe4;
        padding:1.388888889vw 0 0 0;
    }
    #event_agr01.pop .text_box .text_inner p{
        display: block;
        font-size: 0.972222222vw;
        line-height: 1.527777778vw;
        color:#a1998d;
        text-align: left;
    }
    #event_agr01.pop .text_box .text_inner p a{
        display: inline-block;
        font-size: 0.972222222vw;
        line-height: 1.527777778vw;
        color:#a1998d;
        font-weight: 500;
    }
    #event_agr01.pop .text_box .text_inner ul li{
        display: block;
        font-size: 0.972222222vw;
        line-height: 1.527777778vw;
        color:#a1998d;
        text-align: left;
    } */
    /* 서버 선택 */
    #eventCharChoice .content{
        position: relative;
        z-index: 10;
        padding:17.361111111vw 0 0 0;
        background-size:cover;
    }
    #eventCharChoice .bg{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }
    #eventCharChoice .bg img{
        height:auto;
        min-height:100%;
    }
    .event_charactor_choice {
        width:100%;
        position: relative;
    }
    .middle_wrap {
        padding:0 0 20.833333333vw 0;
        /* background:url(/../../kr/static/pc/images/bg_char_choice_paper04.png) no-repeat center 100% ; */
    }
    .event_charactor_choice .tit {
        position: relative;
        display: inline-block;
        padding:0 3.125000000vw;
        text-align: center;
    }
    .event_charactor_choice .tit span.left{
        display:block;
        position: absolute;
        top:0.277777778vw;
        left:0;
        width:3.055555556vw;
        height:2.777777778vw;
        background:url(/../../kr/static/pc/images/icon_event_choice_arrow.png) no-repeat 0 center;
        background-size:cover;
    }
    .event_charactor_choice .tit span.right{
        display:block;
        position: absolute;
        top:0.277777778vw;
        right:0;
        width:3.055555556vw;
        height:2.777777778vw;
        background:url(/../../kr/static/pc/images/icon_event_choice_arrow_right.png) no-repeat 0 center;
        background-size:cover;
    }
    .server_wrap {
        width:100%;
        text-align: center;
        overflow: hidden;
    }
    .server_wrap .txt01 {
        padding:1.388888889vw 0 1.736111111vw 0;
        font-size:16px;
        line-height: 1.388888889vw;
        letter-spacing:0;
        color:#433021;
        text-align: center;
        font-weight: 600;
    }
    .server_wrap .txt01 span.point{
        display: inline-block;
        font-size:16px;
        line-height: 1.388888889vw;
        letter-spacing:0;
        color:#700303;
        text-align: center;
        font-weight: 600;
    }
    .server_date_wrap {
        overflow: hidden;
        width:70.833333333vw;
        margin:3vw auto 0;
    }
    .server_date_wrap .server_list {
        width:100%;
        display: flex;
        /* justify-content: space-between; */
        flex-wrap: wrap;
    }
    .sv_conts {
        width:13.472222222vw;
        height:5.416666667vw;
        margin:0.347222222vw;
        border-radius: 0.138888889vw;
        cursor: pointer;
    }
    .sv_conts .list_inner {
        position: relative;
        width:13.333333333vw;
        height:5.416666667vw;
        background:url(/../../kr/static/pc/images/bg_server_list_base.png) repeat-x center center;
    }
    .sv_conts .server_tit {
        overflow: hidden;
        width:100%;
        height:3.125000000vw;
        line-height: 3.125000000vw;
        text-align: center;
        font-size: 1.319444444vw;
        color:#efebe4;
        text-shadow: #000 0.000000000vw 0.069444444vw 0.555555556vw;
    }
    .sv_conts .contry {
        padding:0 0.422535211vw;
        line-height: 1.760563380vw;
        font-size: 1.126760563vw;
    }
    .sv_conts .state{
        width:100%;
        height:2.291666667vw;
        padding:0 0 0 2.430555556vw;
        box-sizing: border-box;
        text-align: left;
        background:url(/../../kr/static/pc/images/icon_server_state_ok.png) no-repeat 0.694444444vw center;
        background-size:1.250000000vw 1.250000000vw;
    }
    .sv_conts.almost_full .state{
        background:url(/../../kr/static/pc/images/icon_server_state_almost.png) no-repeat 0.694444444vw center;
        background-size:1.250000000vw 1.250000000vw;
    }
    .sv_conts.disabled .state{
        background:url(/../../kr/static/pc/images/icon_server_state_disabled.png) no-repeat 0.694444444vw center;
        background-size:1.250000000vw 1.250000000vw;
    }
    .sv_conts .state span{
        font-size: 0.972222222vw;
        text-align: left;
        color:#5cff46;
        line-height: 2.291666667vw;
    }
    .sv_conts .list_inner span.recom {
        font-size: 0.9859vw;
        line-height: 1.5493vw;
        padding:0 0.7042vw;
        bottom:0.3521vw;
        right:0.4930vw;
    }
    .sv_conts.almost_full .state span{
        font-size: 0.972222222vw;
        text-align: left;
        color:#fdff46;
        line-height: 2.291666667vw;
    }
    .sv_conts.sv_conts.disabled .state span{
        font-size: 0.972222222vw;
        text-align: left;
        color:#d0d0d0;
        line-height: 2.291666667vw;
    }
    
    .sv_conts:hover .list_inner,
    .sv_conts.choice .list_inner{
        transition: background 0.3s;
        background:url(/../../kr/static/pc/images/bg_server_state_ok.png) no-repeat center center;
        background-size:13.888888889vw 5.555555556vw;
    }
    /* 서버 선택 불가*/
    .sv_conts.disabled {
        pointer-events: none;
    }
    .sv_conts.disabled .list_inner,
    .sv_conts.disabled:hover .list_inner{
        background:url(/../../kr/static/pc/images/bg_server_list_disabed.png) repeat-x center center;
    }
    .server_infor_wrap{
        float: right;
        overflow: hidden;
        display: inline-block;
        margin:1.041666667vw 0.277777778vw 1.736111111vw 0;
        padding:0.625000000vw 1.041666667vw 0.625000000vw 1.388888889vw;
        border-radius: 0.138888889vw;
        background:#5d5850;
    }
    .server_infor {
        float: auto;
        display: flex;
        justify-content:flex-start;
    }
    .server_infor div {
        line-height: 1.388888889vw;
        padding:0 0.347222222vw 0 1.736111111vw;
        font-size: 0.972222222vw;
        color:#f5f0e8;
    }
    .server_infor .normal {
        background:url(/../../kr/static/pc/images/icon_server_state_ok.png) no-repeat 0.277777778vw 0.277777778vw;
        background-size:0.972222222vw 0.972222222vw;
    }
    .server_infor .almost {
        background:url(/../../kr/static/pc/images/icon_server_state_almost.png) no-repeat 0.277777778vw 0.277777778vw;
        background-size:0.972222222vw 0.972222222vw;
    }
    .server_infor .disabled {
        background:url(/../../kr/static/pc/images/icon_server_state_disabled.png) no-repeat 0.277777778vw 0.277777778vw;
        background-size:0.972222222vw 0.972222222vw;
    }
    
    .class_choice_wrap {
        width:100%;
        text-align: center;
    }
    .class-data-inner .class_list {
        width:60.972222222vw;
        margin:1.388888889vw auto 2.083333333vw;
        display: flex;
        justify-content: space-between;
    }
    .class-data-inner .cl_conts{
        width:19.305555556vw;
        height:20.972222222vw;
        margin:0 0.486111111vw;
        border-radius: 0.416666667vw;
        overflow: hidden;''
    }
    .class-data-inner .cl_conts label  {
        display: block;
        width:19.305555556vw;
        height:20.972222222vw;
    }
    .class-data-inner .cl_conts:hover {
        box-shadow: 0.277777778vw 0.208333333vw 0.555555556vw #666;
    }
    .class-data-inner .cl_conts.choice_knight label .img {
        display: block;
        width:19.305555556vw;
        height:20.972222222vw;
        background:url(/../../kr/static/pc/images/img_char_choice_knight.png) no-repeat 100% 0;
        background-size:cover;
    }
    .class-data-inner .cl_conts.choice_knight label .img:hover ,
    .class-data-inner .cl_conts.choice_knight  input:checked + label .img {
        transition: background 0.3s;
        background:url(/../../kr/static/pc/images/img_char_choice_knight_on.png) no-repeat 100% 0;
        background-size:cover;
    }
    .class-data-inner .cl_conts.choice_ranger label .img {
        display: block;
        width:19.305555556vw;
        height:20.972222222vw;
        background:url(/../../kr/static/pc/images/img_char_choice_ranger.png) no-repeat 100% 0;
        background-size:cover;
    }
    .class-data-inner .cl_conts.choice_ranger label .img:hover ,
    .class-data-inner .cl_conts.choice_ranger  input:checked + label .img {
        transition: background 0.3s;
        background:url(/../../kr/static/pc/images/img_char_choice_ranger_on.png) no-repeat 100% 0;
        background-size:cover;
    }
    .class-data-inner .cl_conts.choice_magician label .img {
        display: block;
        width:19.305555556vw;
        height:20.972222222vw;
        background:url(/../../kr/static/pc/images/img_char_choice_magician.png) no-repeat 100% 0;
        background-size:cover;
    }
    .class-data-inner .cl_conts.choice_magician label .img:hover ,
    .class-data-inner .cl_conts.choice_magician  input:checked + label .img {
        transition: background 0.3s;
        background:url(/../../kr/static/pc/images/img_char_choice_magician_on.png) no-repeat 100% 0;
        background-size:cover;
    }
    
    .event_charactor_choice .class_choice_wrap .btn_box {
        width:26.388888889vw;
        margin:0 auto;
    }
    .event_charactor_choice .class_choice_wrap .btn_box a.btn_cls_infor_detail {
        display: block;
        width:26.388888889vw;
        font-size:1.250000000vw;
        height:2.638888889vw;
        line-height:2.638888889vw;
        color:#484338;
        border:0.069444444vw solid #968f7f;
        font-weight: 500;
        border-radius: 0.138888889vw;
    }
    .event_charactor_choice .class_choice_wrap .btn_box a.btn_cls_infor_detail:hover {
        display: block;
        width:100%;
        font-size:1.250000000vw;
        color:#fff5e7;
        border:0.069444444vw solid #968f7f;
        background:#968f7f;
        transition: all 0.3s;   
    }
    .event_charactor_choice .form_box {
        width:44.718309859vw;
        height:3.521126761vw;
        margin:2.112676056vw auto 1.056338028vw;
    }
    .event_charactor_choice .form_box .input_box{
        width:31.478873239vw;
        height:3.591549296vw;
        line-height: 3.591549296vw;
    }
    .event_charactor_choice .form_box .input_box input{
        width:30.070422535vw;
        padding:0 0.704225352vw;
        height:3.591549296vw;
        line-height: 3.591549296vw;
        font-size: 1.267605634vw;
    }
    .event_charactor_choice .form_box .input_box input::placeholder {
        font-size: 1.267605634vw;
    }
    .event_charactor_choice .form_box .input_box input::-webkit-input-placeholder{
        font-size: 1.267605634vw;
    }
    .event_charactor_choice .form_box .input_box input::-moz-placeholder {
        font-size: 1.267605634vw;
    }
    .event_charactor_choice .form_box button.btn_char_name_check {
        width:12.112676056vw;
        font-size: 1.690140845vw;
        line-height: 3.591549296vw;
        height:3.591549296vw;
    }
    .event_charactor_choice .notice_wrap {
        width:44.718309859vw;
        margin:0 auto 1.408450704vw;
    }
    .event_charactor_choice .notice_wrap li{
        font-size: 0.972222222vw;
        text-align: left;
        line-height: 1.388888889vw;
        letter-spacing: -0.040em;
        color:#575041;
        font-weight: 400;
        padding:0 0 0 0.694444444vw;
        text-indent:-0.694444444vw;
    }
    .event_charactor_choice .btn_get_char_tit {
        width:100%;
        padding:0.694444444vw 0 0 0;
        text-align: center;
    }
    .event_charactor_choice .btn_box button{
        display: block;
        width:27.291666667vw;
        margin:0 auto;
    }
    #eventCharChoice .icon_particle {
        position: absolute;
        top:0;
        left:50%;
        transform: translateX(-50%);
        pointer-events: none;
        width:100vw;
    }
    #eventCharChoice .img_feather {
        position: absolute;
        bottom:22.222222222vw;
        right:50%;
        margin-right:-57.986111111vw;
        pointer-events: none;
        width:37.152777778vw;
    }
    #eventCharChoice .icon_particle img,
    #eventCharChoice .img_feather img {
        width:100%;
    }
    .chr_choice.pop .pop_box {
        position: relative;
        display: inline-block;
        width:35.555555556vw;
        padding:2.5vw 0 0 0;
        background-size:36.180555556vw 62.222222222vw;
    }
    .chr_choice.pop .pop_box .choice_inner {
        width:30.000000000vw;
        padding:0 2.777777778vw 2vw 2.777777778vw;
        background-size:36.180555556vw 62.222222222vw;
    }
    .chr_choice .choice_inner .tit {
        width:100%;
        margin:0 0 1.388888889vw 0;
    }

    .chr_choice .choice_inner .tit img{
        width:100%;
    }
    .chr_choice .choice_inner .tit p{
        line-height: 1.4;
        font-size: 1.875000000vw;
        text-align: center;
        letter-spacing:-0.030em;
        font-weight: 600;
        background: linear-gradient(to bottom, #efe8db 38%, #d4ba89 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .chr_choice .choice_inner .tit p span{
        line-height: 1.4;
        font-size: 1.875000000vw;
        text-align: center;
        letter-spacing:-0.030em;
        font-weight: 600;
        background: linear-gradient(to bottom, #efe8db 38%, #d4ba89 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .chr_choice .choice_inner dl {
        height:3.333333333vw;
        display: flex;
        margin:0 0 0.902777778vw 0;
    }
    .chr_choice .choice_inner dt,
    .chr_choice .choice_inner dd {
        height:3.333333333vw;
        line-height: 3.333333333vw;
        font-size: 1.111111111vw;
        letter-spacing:-0.030em;
        text-align: center;
        font-weight: 500;
    }
    .chr_choice .choice_inner dt {
        width:9.027777778vw;
        color:#cec6b7;
        background:#6b6250;
    }
    .chr_choice .choice_inner dd {
        width:20.972222222vw;
        color:#e9e6e1;
        background:#3e392d;
    }
    .chr_choice .choice_inner dl.code_check dd {
        overflow: hidden;
        position: relative;
        width:15.277777778vw;
        text-align: right;
        padding:0 5.694444444vw 0 0;
    }
    .chr_choice .choice_inner dl.code_check dd span{
        height:3.333333333vw;
        line-height: 3.333333333vw;
        font-size: 1.111111111vw;
        letter-spacing:-0.030em;
        text-align: center;
        font-weight: 500;
        color:#e9e6e1;
        display: block;
        box-sizing: content-box;
        padding: 0 0.347222222vw;
        text-align: center;
    }
    .chr_choice .choice_inner dl.code_check dd button{
        position: absolute;
        top:0;
        right:1.041666667vw;
        width:auto;
        min-width:3.263888889vw;
        height:3.333333333vw;
        line-height: 3.541666667vw;
        margin:0;
        padding:0 0 0 0.694444444vw;
        font-size: 0.972222222vw;
        color:#dbc6a5;
        letter-spacing:-0.030em;
        font-weight: 500;
        background:none;
        border:none;
        outline:none;
    }
    .chr_choice .choice_inner .img_char_choice_infor {
        width:30vw;
        margin:0.25vw 0 0.75vw
    }
    .chr_choice .choice_inner .img_char_choice_infor2 {
        width:30vw;
        margin:0.694444444vw 0 2.083333333vw 0;
    }
    .chr_choice .choice_inner .ad_infor_box {
        padding:0 0 1vw 0;
        text-align: center;
    }
    .chr_choice .choice_inner .ad_infor_box p {
        font-size: 0.972222222vw;
        color:#dacab2;
        text-align: center;
        line-height: 1.527777778vw;
    }
    .chr_choice .choice_inner .ad_infor_box p.today{
        padding:0.694444444vw 0 0 0;
    }
    .chr_choice .choice_inner .ad_infor_box p.ad_infr_desc{
        color:#8a8378;
        line-height: 1.666666667vw;
        padding:0.694444444vw 0 0 0;
    }
    .chr_choice .choice_inner .btn_box {
        width:100%;
        display: flex;
        justify-content: center;
    }
    .chr_choice .choice_inner button{
        width:12.500000000vw;
        line-height: 2.500000000vw;
        height:2.500000000vw;
        font-size: 1.250000000vw;
        margin:0 0.555555556vw;
        letter-spacing:-0.030em;
        color:#e3dcd0;
        text-align: center;
        font-weight: 500;
        text-shadow: #000 0 0.069444444vw 0.625000000vw;
        background:url(/../../kr/static/pc/images/bg_btn_cha_choice_pop.png) no-repeat center center;
        background-size:cover;
    }
    .chr_choice .choice_inner button:hover {
        transition: background 0.1s;
        background:url(/../../kr/static/pc/images/bg_btn_cha_choice_pop_on.png) no-repeat center center;
    }
    





    

    #information .inner_container {
        min-width:71.111111111vw;
        min-height:53.333333333vw;
    }
    .gagme_information .bg img#class_bg {
        min-width:100%;
        min-height:100%;
    }
    .gagme_information .inner_box {
        min-width:100%;
        min-height:100%;
    }
    .gagme_information .inner_box .btn {
        width:20%;
    }
    .gagme_information .inner_box .btn:hover + img{
        opacity: 0;
        display: none;
    }
    .gagme_information .bg_piece {
        display: none;
    }
    .gagme_information .btn_world {
        margin-left: -7%
    }
    .gagme_information .btn_class {
        margin-left:-44%;
    }
    .gagme_information .inner_box .btn.btn_story {
        margin-right:-44%;
    }


    .world_box .map {
        min-width:auto;
        min-height:100%;
    }
    .world_box .map .bg {
        min-width:auto;
        min-height:100%;
    }
    .world_box .map .bg img {
        min-width:auto;
        min-height:100%;
    }
    .world_box .map .bg_piece {
        min-width:auto;
        min-height:100%;
    }
    .world_box .map .bg_piece img {
        min-width:auto;
        min-height:100%;
    }
    #world_pop .pop_inner {
        min-width:100%;
        min-height:100%;
    }
    .worldSwiper .swiper-slide .world_slide_bg {
        min-width:100%;
        min-height:100%;
    }
    .worldSwiper .swiper-slide .inner_slider_content {
        position: absolute;
        top: 50%;
        left: 10%;
        margin: -13vw 0 0 0;
        opacity: 0;
        transition: opacity 3s;
        transform: scale(0.8);
    }
    .worldSwiper .world_button_next {
        margin-right:0;
        right:5%;
    }
    .worldSwiper .world_button_prev {
        margin-left:0;
        left:5%;
    }





    #story {
        min-width:100%;
        min-height:100%;
    }
    .storySwiper {
        min-width:100%;
        min-height:100%;
    }
    .world_story {
        min-width:100%;
        min-height:100%;
    }

    .storySwiper .swiper-slide .txt_area .tit {
        margin:0 auto 15px;
        text-align: center;
    }
    .storySwiper .swiper-slide .txt_area .tit img{
        width:31.666666667vw
    }
    .storySwiper .swiper-slide .txt_area {
        margin:-100px 0 0 -480px;
    }
    .storySwiper .story_button_next ,
    .storySwiper .story_button_prev {
        top:50%;
        margin:-30px;
    }
    .storySwiper .story_button_next {
        margin-right:0;
        right:5%;
    }
    .storySwiper .story_button_prev {
        margin-left:0;
        left:5%;
    }

    #story .storySwiper .story_paging {
        transform: scale(0.8);
        margin: 0 0 0 -708px;
        top: 85%;
    }




    .classSwiper .swiper-slide {
        width:100% !important;
    }
    .classSwiper .swiper-slide .img {
        min-width: 1024px;;
    }
    .classSwiper .swiper-slide .img .flag {
        min-width: 1024px;
    }
    .classSwiper .swiper-slide .img .flag img {
        width: 100%;
    }
    .classSwiper .swiper-slide .img .char {
        min-width: 1024px;
    }
    .classSwiper .swiper-slide .img .char img {
        width: 100%;
    }
    .change_container .tab_change_class {
        zoom:0.75;
    }
    .classSwiper .swiper-slide .inner_slider_content {
        position: absolute;
        top:50%;
        left:50%;
        margin:-21vw 0 0 0;
        padding:0 0 0 4.464285714vw;   
    }
    
    .classSwiper .cha_story {
        min-width:21.428571429vw;
        padding:0 0 0 1.666666667vw;
    }
    .classSwiper .cha_story .tit {
        padding:0.595238095vw 0 0.297619048vw 0;
    }
    .classSwiper .cha_story p.desc {
        min-height:5.654761905vw;
        font-size: 12px;
        line-height: 1.4;
        color:#e3dcd0;
        text-shadow:#000000 0.059523810vw 0 0.178571429vw;
    }
    .classSwiper .skill {
        position: relative;
        padding:1vw 0 0 1.666666667vw;
        height:auto;;
        overflow: hidden;
    }
    .classSwiper .skill ul{
        width:18.333333333vw;
        height:5.238095238vw;
    }
    .skill_warp {
        padding: 0 0 0 0;
        margin: 1.190476190vw 0 0 0;
        width: 17.857142857vw;
        height: 9.642857143vw;
    }
    
    .skill_warp .skill_v_box {
        width:17.738095238vw;
        height: 9.642857143vw;
        display: none;
    }
    .skill_warp .skill_v_box.active {
        display: block;
    }
    .skill_warp .video_box {
        position: relative;
        overflow: hidden;
        padding:0 0 0 0;
        margin:1.190476190vw 0 0 0;
        width:17.857142857vw;
        height:9.523809524vw;
        border:0.059523810vw solid #aa874f;
    }
    .skill_warp .video_box video{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        width:19.642857143vw;
        height:10.119047619vw;
        box-shadow: #000000 0.059523810vw 0 0.357142857vw;
    }
    .skill_warp .video_box .charactor_video_button {
        position: absolute;
        top:50%;
        left:50%;
        width: 17.857142857vw;
        height: 9.523809524vw;
        background:url(/../../kr/static/pc/images/btn_world_pop_org_track.png) no-repeat center center;
        background-size:2.857142857vw 2.857142857vw;
        transform: translate(-50%, -50%);
    }
    .skill_warp .video_box.play .charactor_video_button {
        background:url(/../../kr/static/pc/images/btn_world_pop_org_track_stop.png) no-repeat center center;
        background-size:2.857142857vw 2.857142857vw;
        transition: background 0.5s;
    }
    .classSwiper .knight_infor .skill li {
        float:left;
        width:5.238095238vw;
        height:5.238095238vw;
        margin:0 1.309523810vw 0 0;
        background:url(/../../kr/static/pc/images/bg_class_skill_01_off.png) no-repeat 0 0;
    }
    .classSwiper .knight_infor .skill li.skill01 {
        background-position:0 0;
        background-size:18.273809524vw 5.238095238vw;
    }
    .classSwiper .knight_infor .skill li.skill02 {
        background-position:-6.488095238vw 0;
        background-size:18.273809524vw 5.238095238vw;
        /* background-size:18.273809524vw 5.238095238vw; */
    }
    .classSwiper .knight_infor .skill li.skill03 {
        margin:0;
        background-position:-13.035714286vw 0;
        background-size:18.273809524vw 5.238095238vw;
        /* background-size:18.273809524vw 5.238095238vw; */
    }
    
    .classSwiper .knight_infor .skill li:hover,
    .classSwiper .knight_infor .skill li.active {
        background:url(/../../kr/static/pc/images/bg_class_skill_01_on.png) no-repeat 0 0;
        background-size:18.273809524vw 5.238095238vw;
    }
    .classSwiper .knight_infor .skill li.skill02:hover,
    .classSwiper .knight_infor .skill li.skill02.active {
        background-position:-6.488095238vw 0;
        /* background-size:18.273809524vw 5.238095238vw; */
    }
    
    .classSwiper .knight_infor .skill li.skill03:hover,
    .classSwiper .knight_infor .skill li.skill03.active {
        margin:0;
        background-position:-13.035714286vw 0;
        /* background-size:18.273809524vw 5.238095238vw; */
    }
    
    /* 매지션 */
    .classSwiper .magician_infor .skill li {
        float:left;
        width:5.238095238vw;
        height:5.238095238vw;
        margin:0 1.309523810vw 0 0;
        background:url(/../../kr/static/pc/images/bg_class_skill_02_off.png) no-repeat 0 0;
    }
    .classSwiper .magician_infor .skill li.skill01 {
        background-position:0 0;
        background-size:18.273809524vw 5.238095238vw;
    }
    .classSwiper .magician_infor .skill li.skill02 {
        background-position:-6.488095238vw 0;
        background-size:18.273809524vw 5.238095238vw;
        /* background-size:18.273809524vw 5.238095238vw; */
    }
    .classSwiper .magician_infor .skill li.skill03 {
        margin:0;
        background-position:-13.035714286vw 0;
        background-size:18.273809524vw 5.238095238vw;
        /* background-size:18.273809524vw 5.238095238vw; */
    }

    .classSwiper .magician_infor .skill li:hover,
    .classSwiper .magician_infor .skill li.active {
        background:url(/../../kr/static/pc/images/bg_class_skill_02_on.png) no-repeat 0 0;
        background-size:18.273809524vw 5.238095238vw;
    }
    .classSwiper .magician_infor .skill li.skill02:hover,
    .classSwiper .magician_infor .skill li.skill02.active {
        background-position:-6.488095238vw 0;
        background-size:18.273809524vw 5.238095238vw;
        /* background-size:18.273809524vw 5.238095238vw; */
    }

    .classSwiper .magician_infor .skill li.skill03:hover,
    .classSwiper .magician_infor .skill li.skill03.active {
        margin:0;
        background-position:-13.035714286vw 0;
        background-size:18.273809524vw 5.238095238vw;
        /* background-size:18.273809524vw 5.238095238vw; */
    }

    /* ranger*/

    .classSwiper .ranger_infor .skill li {
        float:left;
        width:5.238095238vw;
        height:5.238095238vw;
        margin:0 1.309523810vw 0 0;
        background:url(/../../kr/static/pc/images/bg_class_skill_03_off.png) no-repeat 0 0;
    }
    .classSwiper .ranger_infor .skill li.skill01 {
        background-position:0 0;
        background-size:18.273809524vw 5.238095238vw;
    }
    .classSwiper .ranger_infor .skill li.skill02 {
        background-position:-6.488095238vw 0;
        background-size:18.273809524vw 5.238095238vw;
        /* background-size:18.273809524vw 5.238095238vw; */
    }
    .classSwiper .ranger_infor .skill li.skill03 {
        margin:0;
        background-position:-13.035714286vw 0;
        background-size:18.273809524vw 5.238095238vw;
        /* background-size:18.273809524vw 5.238095238vw; */
    }

    .classSwiper .ranger_infor .skill li:hover,
    .classSwiper .ranger_infor .skill li.active {
        background:url(/../../kr/static/pc/images/bg_class_skill_03_on.png) no-repeat 0 0;
        background-size:18.273809524vw 5.238095238vw;
    }
    .classSwiper .ranger_infor .skill li.skill02:hover,
    .classSwiper .ranger_infor .skill li.skill02.active {
        background-position:-6.488095238vw 0;
        background-size:18.273809524vw 5.238095238vw;
        /* background-size:18.273809524vw 5.238095238vw; */
    }

    .classSwiper .ranger_infor .skill li.skill03:hover,
    .classSwiper .ranger_infor .skill li.skill03.active {
        margin:0;
        background-position:-13.035714286vw 0;
        background-size:18.273809524vw 5.238095238vw;
        /* background-size:18.273809524vw 5.238095238vw; */
    }
    .classSwiper .class_button_prev {
        margin-left:0;
        left:2%;
    }

    .classSwiper .class_button_next {
        margin-right:0;
        right:2%;
    }



    .media {
        min-width: 100%;
        min-height: 100%;
        transform: translate(-50%, -50%) scale(0.8);
    }


    /* 미디어 동영상 팝업 */
    #media_pop .video_box {
        position: relative;
        display: inline-block;
        width:62.500000000vw;
        height:34.895833333vw;
        padding:0 3.125000000vw;
    }

    #media_pop .video_box .video_inner {
        width:62.500000000vw;
        height:35.156250000vw;
        overflow: hidden;
    }
    #media_pop .video_box .video_inner iframe {
        width:100%;
        height:100%;
    }
    #media_pop .btn_pop_close {
        position: absolute;
        top:0;
        right:-0.75vw;
        width:3.333333333vw;
        height:3.333333333vw;
    }
    #media_pop .btn_pop_close img {
        width:100%;
    }





    .pop {
        min-width: 100%;
    }
    .pop_inner {
        min-width:1024px;
    }


    /* 레이어 팝업 (알럿팝업)*/
    .pop .pop_container .pop_wrap .popup_inner {
        padding:5px;
    }
    .pop .text_box{
        position: relative;
        display: inline-block;
        width:29.166666667vw;
        padding:2.083333333vw;
        margin-top:0;
        border:0.069444444vw solid #575041;
        background:#1d1a15;
    }
    .pop .text_box .text_inner {
        position: relative;
        padding:2.083333333vw 0 0 0;
        min-height:7.916666667vw;
    }
    .pop .text_box .text_inner p{
        width:100%;
        line-height: 1.666666667vw;
        font-size:1.250000000vw;
        text-align: center;
        color:#dbc6a5;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }

    .pop .text_box .text_inner .btn_box {
        width:100%;
        margin:2.083333333vw auto 0;
        padding:2.083333333vw 0 0.694444444vw 0;
    }
    .pop .text_box .text_inner .btn_box  button{
        display: inline-block;
        height:3.125000000vw;
        line-height: 3.125000000vw;
        padding:0 2.083333333vw;
        font-size: 1.250000000vw;
        text-align: center;
        color:#1d1a15;
        background:#92856c;
    }
    .pop .btn_pop_close {
        position: absolute;
        top:0;
        right:0;
        width:4.166666667vw;
        height:4.166666667vw;
    }
    .pop .btn_pop_close img{
        width:4.166666667vw;
    }
}


@media (max-width: 1280px) {  

}

@media (max-width: 1181px) {  
    #story .storySwiper .story_paging {
        transform: scale(0.8);
    }
}


@media (max-width: 1138px) { 
}


@media (max-width: 1024px) {  
    #preregistration .content{
        transform: translate(-50%, -50%) scale(0.7);
    }
    #event .content {
        width:1270px;
        margin:30px auto 0;
        padding:0 0 30px 0;
        transform: translate(-50%, -50%) scale(0.7);
    }

    #story .storySwiper .story_paging {
        transform: scale(0.7);
    }
}