@charset "utf-8";

html {font-size: 62.5%;}

#contentArea {
    font-feature-settings: "palt" 1;
    background: url(https://static.ncsoft.jp/images/event/bns/2005gift/bodyBg.jpg) repeat-y center 1072px;
}

#headArea {height: 1249px; background: url(https://static.ncsoft.jp/images/event/bns/2005gift/main.jpg) no-repeat center top;}
#headArea .inner > *:not(.bnsLogo) {
    display: none;
}
#bodyArea {margin-top: -388px; color: #e0e0e0; font-size: 2.4rem; font-family: "Folk Light"; line-height: 1.3;}

.lede {text-shadow: 0 0 2px rgba(255, 255, 255, 0.6);}
.list li {
    list-style-type: disc;
}
:root .btn {
    all: initial;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-repeat: no-repeat;
    cursor: default !important;
    font-size: 2.4rem;
}
:root .btn_state-active {
    cursor: pointer !important;
    color: #fff;
}
:root .btn_state-done {
    filter: brightness(70%);
    color: #fff;
}
:root .btn_state-dis {
    filter: grayscale(100%);
    color: #fff;
}

.hdg {
    margin-bottom: 23px;
    text-align: center;
}

.hdg_s {display: inline-block; height: 46px; padding: 0 1px; background: linear-gradient(to bottom, #6380bf 0%,#ffffff 33%,#717f99 100%); border-radius: 46px;}
.hdg_s .hdg_s_inner {position: relative; top: 1px; display: flex; justify-content: center; align-items: center; height: 44px; border-radius: 44px; background: #000;}
.hdg_s i {padding: 0 40px; font-style: normal; font-family: "Ryumin Medium KL"; font-size: 2.1rem;}

.period {font-family: "Ryumin Medium KL"; font-size: 2.2rem;}

.text-secondary {color: #8491b8 !important;}

.kome {font-size: 1.6rem; color: #f3a26c;}
:not(ul).kome::before {content: "※";}

#contentArea .sct_frame {
    position: relative;
    width: 1100px;
    padding: 50px 50px 80px;
}

#contentArea #sct-2 {
    margin-top: 144px;
}

#contentArea #sct-1 .sct_frame {
    background-image:
        url(https://static.ncsoft.jp/images/event/bns/2005gift/frameBg-up.jpg),
        url(https://static.ncsoft.jp/images/event/bns/2005gift/frameBg-low.jpg),
        url(https://static.ncsoft.jp/images/event/bns/2005gift/frameBg-y.jpg);
    background-repeat:
        no-repeat, no-repeat, repeat-y;
    background-position-y:
        0, bottom, 0;
}
#contentArea .sct_frame::before,
#contentArea .sct_frame::after {
    content: "";
    display: block;
    position: absolute;
    left: -1px;
    width: 1102px;
    height: 41px;
    background: url(https://static.ncsoft.jp/images/event/bns/2005gift/frameBg-border.png) no-repeat;
}
#contentArea .sct_frame::before {
    top: -26px;
}
#contentArea .sct_frame::after {
    bottom: -21px;
}

#contentArea #sct-2 .sct_frame-1 {
    background-image:
        url(https://static.ncsoft.jp/images/event/bns/2005gift/frameBg-up.jpg),
        url(https://static.ncsoft.jp/images/event/bns/2005gift/frameBg-y.jpg);
    background-repeat:
        no-repeat, repeat-y;
    background-position-y:
        0, 0;
}
#contentArea #sct-2 .sct_frame-2 {
    height: 343px;
    background: url(https://static.ncsoft.jp/images/event/bns/2005gift/frameBg-low_sct-2.jpg) no-repeat;
}

.userStatusContainer {width: 1000px; height: 653px; margin: 0 auto; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); font-family: "Folk Light"; background: url(https://static.ncsoft.jp/images/event/bns/2005gift/userStatusBg.png);}
.userStatusContainer .userStatus {display: none;}

.userStatusContainer-afterLogin .userStatus-afterLogin {
    display: block;
    background: url(https://static.ncsoft.jp/images/event/bns/2005gift/userStatus_loginBg.png);
}
.userStatusContainer-beforeLogin .userStatus-beforeLogin {
    display: block;
    padding-top: 320px;
}
.userStatusContainer-finish .userStatus-finish {
    display: block;
    padding-top: 360px;
}
.userStatusContainer .userStatus-afterLogin .className {
    position: absolute;
    top: 225px;
    left: 50%;
    transform: translateX(-50%);
    color: #000;
}
.userStatusContainer .userStatus-afterLogin .charName {
    position: absolute;
    top: 384px;
    left: 50%;
    transform: translateX(-50%);
    color: #f00;
}
.userStatusContainer-beforeLogin .userStatus-beforeLogin .userStatus_txt {
     font-family: "Ryumin Medium KL";
     font-size: 3rem;
     text-align: center;
}
.userStatusContainer-beforeLogin .userStatus-beforeLogin .btn {
    margin: 20px auto 0;
}
.userStatusContainer-finish .userStatus-finish .userStatus_txt {
     font-family: "Ryumin Medium KL";
     font-size: 3rem;
     text-align: center;
}
.userStatus_selectContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 110px;
}
.userStatus_selectContainer .selectWrapper {
    position: relative;
    width: 530px;
}
.userStatus_selectContainer .selectWrapper::before {
    content: "▼";
    display: block;
    position: absolute;
    text-align: center;
    top: 0;
    right: 0;
    width: 64px;
    height: 100%;
    padding-top: 14px;
    color: #fff;
    background: #234c7f;
    pointer-events: none;
}
.userStatus_selectContainer .selectWrapper select {

    width: 100%; padding: 10px 0 10px 10px; margin: 0 auto; border: none;
}
.userStatus_classContainer,
.userStatus_valueContainer {position: relative; width: 50%; height: 543px;}
.userStatus_classContainer {background: url(https://static.ncsoft.jp/images/event/bns/2005gift/classBg.png) no-repeat 81px 69px;}
.userStatus_valueContainer {}


.ico_class {
    position: absolute;
    top: 148px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    background-image: url(https://static.ncsoft.jp/images/event/bns/2005gift/ico_class.png);
    background-repeat: no-repeat;
    display: block;
}
.ico_class-1 {background-position: -8px -8px;}
.ico_class-2 {background-position: -8px -88px;}
.ico_class-3 {background-position: -8px -168px;}
.ico_class-4 {background-position: -8px -248px;}
.ico_class-5 {background-position: -8px -328px;}
.ico_class-6 {background-position: -8px -408px;}
.ico_class-7 {background-position: -8px -488px;}
.ico_class-8 {background-position: -8px -568px;}
.ico_class-9 {background-position: -8px -648px;}
.ico_class-10 {background-position: -8px -728px;}
.ico_class-11 {background-position: -8px -808px;}
.ico_class-12 {background-position: -8px -888px;}

.userStatus_valueContainer dt {position: absolute; left: 65px; font-weight: normal; font-size: 2rem;}
.userStatus_valueContainer dt:nth-of-type(1) {top: 56px;}
.userStatus_valueContainer dt:nth-of-type(2) {top: 152px;}
.userStatus_valueContainer dt:nth-of-type(3) {top: 247px;}
.userStatus_valueContainer dt:nth-of-type(4) {top: 342px;}
.userStatus_valueContainer dd i {display: block; position: absolute; left: 67px; text-align: center; width: 158px; color: #f00;}
.userStatus_valueContainer dd:nth-of-type(1) > * {top: 95px;}
.userStatus_valueContainer dd:nth-of-type(2) > * {top: 192px;}
.userStatus_valueContainer dd:nth-of-type(3) > * {top: 287px;}
.userStatus_valueContainer dd:nth-of-type(4) > * {top: 382px;}
.userStatus_valueContainer dd em {position: absolute; left: 240px; font-size: 1.9rem;}
.userStatus_valueContainer dd:nth-of-type(1) em {top: 97px;}
.userStatus_valueContainer dd:nth-of-type(2) em {top: 194px;}
.userStatus_valueContainer dd:nth-of-type(3) em {top: 289px;}
.userStatus_valueContainer dd:nth-of-type(4) em {top: 384px;}

.careerWrapper {display: flex; justify-content: space-between; flex-wrap: wrap; margin: 45px auto 0;}
.careerWrapper .careerContainer {width: 495px; min-height: 300px; padding-bottom: 20px; border: solid 1px #6182b5; border-radius: 10px; background: url(https://static.ncsoft.jp/images/event/bns/2005gift/careerBg.png) no-repeat; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5));}
.careerWrapper .careerContainer:nth-of-type(n+3) {margin-top: 15px;}
.careerWrapper .careerContainer .career_years {
    height: 43px;
    margin: 0 auto;
    padding-top: 7px;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center top;
    font-size: 1.6rem;
    font-weight: normal;
    font-family: "Folk medium";
}
.careerWrapper .careerContainer .career_years-6 {
    background-image: url(https://static.ncsoft.jp/images/event/bns/2005gift/career_years-6.png);
}
.careerWrapper .careerContainer .career_years-4 {
    background-image: url(https://static.ncsoft.jp/images/event/bns/2005gift/career_years-4.png);
}
.careerWrapper .careerContainer .career_years-2 {
    background-image: url(https://static.ncsoft.jp/images/event/bns/2005gift/career_years-2.png);
}
.careerWrapper .careerContainer .career_years-1 {
    background-image: url(https://static.ncsoft.jp/images/event/bns/2005gift/career_years-1.png);
}
.careerWrapper .careerContainer .career_years i {
    font-size: 2.1rem;
    font-style: normal;
    color: #fbff00;
    margin: 0 2px;
}
.careerWrapper .careerContainer .itemList {
    width: 330px;
    margin: 20px auto 0;
}
:root .btn_career {
    width: 303px;
    height: 62px;
    margin: 20px auto 0;
    background-image: url(https://static.ncsoft.jp/images/event/bns/2005gift/btn_career.png);
}


.questTable {
    position: relative;
    z-index: 1;
    border: solid 1px #496592;
    border-radius: 10px;
    overflow: hidden;
}
.questTable table {
    width: 100%;
}
.questTable table tr > * {
    border-left: solid 1px #496592;
}
.questTable table tr > *:first-child {
    border-left: none;
}
.questTable thead th {
    height: 60px;
    color: #fff;
    font-family: "Folk Light";
    font-weight: normal;
    font-size: 2.2rem !important;
    vertical-align: middle;
    text-align: center;
    background: #2e4a79;
}
.questTable thead th span {
    position: relative;
    top: 2px;
}
.questTable td {
    text-align: center;
    vertical-align: middle;
    padding: 20px 10px;
}
.questTable tr {
    background: rgba(46, 58, 80, 0.5);
}
.questTable .questTable_tr-even {
    background: rgba(26, 36, 56, 0.5);
}
.table_quest {}
.table_quest .quest_itemName {margin-bottom: 0; font-size: 1.8rem; font-family: "Folk Light" !important;}
.table_quest .quest_itemName big {font-size: 2.2rem; font-family: "Ryumin Medium KL";}
.table_quest .quest_dis {color: #7a8ecb; margin-top: 7px;}
.table_condition .condition_txt {font-size: 2.2rem; font-family: "Folk Light" !important;}
.table_condition .btn_condition {
    margin: 20px auto 0;
}
:root .btn_condition {
    width: 201px;
    height: 62px;
    color: #fff;
    font-size: 1.8rem;
    background-image: url(https://static.ncsoft.jp/images/event/bns/2005gift/btn_condition.png);
}
.itemList {margin-bottom: 0; padding: 0;}
.itemList > * {display: flex; align-items: center; font-size: 2.2rem; font-family: "Folk Light" !important; text-align: left;}
.itemList > * + * {
    margin-top: 10px;
}
.itemList > * .ico {
    margin-right: 10px;
}

#sct-2 .itemList {width: 270px; display: inline-block;}


#contentArea .sct_frame-2 {
    padding-top: 85px;
}
#contentArea .sct_frame-2 p {
    font-size: 1.6rem;
}

#contentArea #att {
    padding-top: 90px;
    padding-bottom: 170px;
    margin-top: 120px;
    font-size: 1.8rem;
    background: rgba(30,33,50.6);
}
#contentArea #att .inner {
    width: 1050px;
}
#contentArea #att .list {
    margin-top: 15px; color: #8491b8;
}
#contentArea #att dl {
    margin-top: 25px;
}
#contentArea #att dt {
    font-weight: normal; font-family: "Folk medium" !important;
}
#contentArea #att dd {
    margin-top: 5px; color: #8491b8;
}

#sct-2 .char {
    position: absolute; top: -160px; left: -410px;
    pointer-events: none;
}

.animated-modal {
    background: #4d4b96;
    border-radius: 5px;
    color: white;
}

.animated-modal p {
    font-size: 1.6rem;
}

.btn.btn-primary {
    cursor: pointer !important;
    background: #abaaef;
    border: solid 1px #3f3d85;
    color: #232165;
    border-radius: 8px;
    font-size: 1.8rem;
    padding-top: 7px !important;
    line-height: 1;
    margin: 10px auto 0;
    padding: 5px 10px;
    text-shadow: 0 -1px 3px rgba(0,0,0,.2);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
}