html {
    overflow-x: hidden;
    height: auto;
}

html.intro {
    overflow-y: scroll;
}

html.intro,
html.intro body {
    height: 100%;
}

html.intro body {
    overflow-x: hidden;
    overflow-y: hidden;
}

html.intro .para,
html.intro #footer,
html.intro #headArea .bnsLogo {
    display: none;
}

body {
    position: relative;
    padding: 0;
    margin: 0;
}

#ncjSnsHolder {
    z-index: 9999;
}

.img-fluid {
    width: 100%;
}

#content {
    position: relative;
}

.introContainer .load {
    height: 100%;
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
}

.introContainer .load_parts-slash {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    height: 2px;
    transform: translateX(-50%) rotate(-10deg);
}

.introContainer .load_parts-slash span {
    position: absolute;
    top: 50%;
    left: 0;
    height: 2px;
    transform: translateY(-50%);
    background: #fff;
}

.introContainer .load_parts-curtain {
    position: absolute;
    left: 50%;
    height: 75%;
    width: 150%;
    transform: translateX(-50%) rotate(-10deg);
    background: #000;
    filter: blur(0);
}

.introContainer .load_parts-up {
    top: 50%;
}

.introContainer .load_parts-low {
    bottom: 50%;
}

#headArea .header_char {
    position: absolute;
    z-index: 100;
    opacity: 0;
}

#headArea .header_char.show {
    opacity: 1;
}

#headArea .bnsLogo {
    position: absolute;
    top: 2vw;
    left: 2vw;
    width: 28vw;
    height: 13vw;
    z-index: 99999;
}

#headArea .bnsLogo a {
    display: block;
    height: inherit;
}

#bodyArea {
    padding-bottom: 14vw;
    background: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/m/body_bg.jpg) no-repeat center top;
    background-size: 100%;
}


.bnrContainer {
    width: 82.6vw;
    margin: 0 auto;
}

.bnrContainer .bnr {
    position: relative;
    background: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/m/bnr_frame.jpg) no-repeat;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .3));
}

.bnrContainer .bnr a[href^="jav"] {
    cursor: default;
}

.txt_continue {
    text-align: center;
    margin-top: 7vw;
    margin-bottom: 0 !important;
    margin-left: auto;
    margin-right: auto;
}


/***
loading
***/
#loadingBg {
    position: fixed;
    left: 0;
    top: 0;
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%;
    background: #000;
    z-index: 99998;
}

#loading,
#loading #gauge,
#loading #gauge:before {
    width: 276px;
    height: 126px;
}

#loading {
    position: fixed;
    top: 50%;
    left: 50%;
    background: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/loader_bns_off.png) no-repeat center;
    background-size: contain;
    transform: translate(-50%, -50%);
    z-index: 99999;
}

#loading #gauge {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0;
    overflow: hidden;
    transition: all .3s ease;
}

#loading #gauge:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/loader_bns_on.png) no-repeat center;
    background-size: contain;
    transition: all .3s ease;
}

@media (max-width: 575px) {
    .d-none {
        display: none !important;
    }

    :root body {
        min-width: auto;
    }

    .introContainer {
        position: absolute;
        top: 0;
        z-index: 1;
    }

    .introContainer .eventLogo {
        position: absolute;
        top: 73.3vw;
        left: 50%;
        transform: translateX(-50%);
        z-index: 99;
        opacity: .33;
    }

    .introContainer .eventLogo .filter {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        mix-blend-mode: multiply;
    }

    .introContainer .eventLogo img {
        width: 76vw;
    }

    .introContainer .char_header-m {
        display: block;
    }

    #headArea .bnsLogo {
        margin-left: 0;
    }

    #headArea .header_char {
        left: 0;
        top: 0;
        width: 100%;
        height: 246.533vw;
        background: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/m/main.jpg) no-repeat;
        background-size: 100%;
    }

    #headArea .header_txtContainer {
        position: relative;
        top: 164vw;
        width: 90vw;
        margin: 0 auto;
    }

    .bnrContainer .bnr {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 44.67vw;
    }

    .bnrContainer .bnr+.bnr {
        margin-top: 3.7vw;
    }

    .bnrContainer .bnr a {
        width: 80vw;
    }

    .txt_continue {
        width: 45vw;
    }

    .body_char,
    .flower_anm,
    .para {
        display: none;
    }
}

@media (min-width: 576px) {
    .d-sm-block {
        display: block;
    }

    .d-sm-none {
        display: none;
    }

    .innerFrame {
        position: relative;
        width: 1250px;
        margin: 0 auto;
    }

    .introContainer .char_header {
        position: absolute;
    }

    .introContainer .char_header-1 {
        top: -151px;
        left: 150px;
        z-index: 1;
    }

    .introContainer .char_header-2 {
        top: 53px;
        left: 7px;
        z-index: 2;
    }

    .introContainer .char_header-3 {
        top: 250px;
        left: -399px;
        z-index: 3;
    }

    .introContainer .char_header-4 {
        top: 55px;
        left: 136px;
        z-index: 4;
    }

    .introContainer .char_header-5 {
        top: 155px;
        left: 209px;
        z-index: 5;
    }

    .introContainer .char_header-6 {
        top: 18px;
        left: 298px;
        z-index: 6;
    }

    .introContainer .char_header-7 {
        top: 362px;
        left: 487px;
        z-index: 7;
    }

    .introContainer .char_header-8 {
        top: 433px;
        left: 487px;
        z-index: 8;
    }

    .introContainer .eventLogoContainer {
        position: relative;
        z-index: 10;
    }

    .introContainer .eventLogo {
        position: absolute;
        top: 447px;
        left: 49px;
        z-index: 99;
        opacity: .33;
    }

    .introContainer .eventLogo .filter {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        mix-blend-mode: multiply;
    }

    #headArea {
        height: 1166px;
        background: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/header_bg.jpg) center top no-repeat;
    }

    #headArea .header_char {
        left: -656px;
        top: 0;
        width: 2560px;
        height: 1166px;
        background: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/main.jpg) no-repeat;
    }

    #headArea .header_txtContainer {
        position: absolute;
        top: 56px;
        left: 916px;
        z-index: 101;
        display: flex;
        justify-content: center;
        width: 331px;
        height: 961px;
        padding-top: 64px;
        background: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/header_text_bg.png) no-repeat;
    }

    #headArea .header_txtWrap {
        display: flex;
        justify-content: space-between;
        width: 207px;
        margin: 0 auto;
        flex-flow: row-reverse;
    }

    #headArea .header_txt_line {
        width: 27px;
        background-repeat: no-repeat;
    }

    #headArea .header_txt_line-1 {
        height: 824px;
    }

    #headArea .header_txt_line-2 {
        height: 631px;
    }

    #headArea .header_txt_line-3 {
        height: 401px;
    }

    #headArea .header_txt_line-4 {
        height: 466px;
    }

    #headArea .header_txt_line-5 {
        height: 568px;
    }

    #headArea .header_txt_line-6 {
        height: 625px;
    }

    #headArea .header_txt_line span {
        display: block;
        height: 100%;
        text-indent: -9999em;
    }

    #headArea .header_txt_line-1 span {
        background-image: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/header_txt_line-1.png);
    }

    #headArea .header_txt_line-2 span {
        background-image: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/header_txt_line-2.png);
    }

    #headArea .header_txt_line-3 span {
        background-image: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/header_txt_line-3.png);
    }

    #headArea .header_txt_line-4 span {
        background-image: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/header_txt_line-4.png);
    }

    #headArea .header_txt_line-5 span {
        background-image: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/header_txt_line-5.png);
    }

    #headArea .header_txt_line-6 span {
        background-image: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/header_txt_line-6.png);
    }

    #headArea .bnsLogo {
        position: absolute;
        top: 25px;
        left: 50%;
        width: 210px;
        height: 102px;
        margin-left: -571px;
    }

    #headArea .bnsLogo a {
        width: 206px;
        height: 94px;
    }

    #bodyArea {
        position: relative;
        z-index: 100;
        padding-top: 20px;
        padding-bottom: 500px;
        background: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/body_bg_v200520.jpg) no-repeat center top;
    }

    .bnrContainer {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 1110px;
        margin: 0 auto;
    }

    .bnrContainer .bnr {
        width: 540px;
        height: 291px;
        background: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/bnr_frame.jpg) no-repeat;
        filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .3));
    }

    .bnrContainer .bnr:nth-of-type(n+3) {
        margin-top: 30px;
    }

    .bnrContainer .bnr_mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 523px;
        height: 274px;
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        transition: all .3s ease-in-out;
    }

    .bnrContainer .bnr_txtContainer {
        width: 100%;
    }

    .bnrContainer .bnr_txt_1,
    .bnrContainer .bnr_txt_2 {
        display: block;
        text-align: center;
        width: 100%;
        opacity: 0;
        transform: translateY(20px);
        font-family: "Folk Bold";
        text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 3px rgba(0, 0, 0, 1), 0 0 3px rgba(0, 0, 0, 1), 0 0 3px rgba(0, 0, 0, 1);
    }

    .bnrContainer .bnr_txt_1 {
        font-size: 24px;
        color: #ffdb5f;
    }

    .bnrContainer .bnr_txt_2 {
        font-size: 20px;
        color: #d5cbb8;
    }

    .bnrContainer .bnr a {
        position: absolute;
        top: 9px;
        left: 9px;
    }

    .bnrContainer .bnr a:hover .bnr_mask {
        background: rgba(0, 0, 0, 0.7);
    }

    .bnrContainer .bnr a:hover .bnr_txt_1,
    .bnrContainer .bnr a:hover .bnr_txt_2 {
        transform: translateY(0);
        opacity: 1;
    }

    .bnrContainer .bnr a:hover .bnr_txt_1 {
        transition: all .7s ease-in-out;
    }

    .bnrContainer .bnr a:hover .bnr_txt_2 {
        transition: all .7s ease-in-out .2s;
    }

    .bnrContainer .bnr img {
        width: 522px;
    }

    .body_char {
        position: absolute;
        z-index: 10;
    }

    .body_char_1 {
        top: -60px;
        left: -220px;
        width: 247px;
        height: 293px;
        background-image: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/body_char_1.png);
    }

    .body_char_2 {
        top: 190px;
        right: -170px;
        width: 188px;
        height: 419px;
        background-image: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/body_char_2.png);
    }

    .body_char_3 {
        bottom: -400px;
        left: 400px;
        width: 325px;
        height: 387px;
        background-image: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/body_char_3.png);
    }

    .txt_continue {
        width: 302px;
        margin-top: 50px;
    }

    .flower_anm {
        position: absolute;
        pointer-events: none;
    }

    #flower_1 {
        top: -200px;
        left: -90px;
    }

    #flower_2 {
        top: 120px;
        right: -170px;
    }

    #flower_3 {
        bottom: -200px;
        right: 340px;
    }

    .para {
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 101;
        width: 2560px;
        height: 1200px;
        margin-left: -1280px;
        background-repeat: no-repeat;
        pointer-events: none;
    }

    .para_1 {
        background-image: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/para_1.png);
    }

    .para_2 {
        background-image: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/para_2.png);
    }

    .para_3 {
        background-image: url(https://static.ncsoft.jp/images/event/bns/anniversary/6th/para_3.png);
    }
}