@charset "UTF-8";

/* vue */
[v-cloak] {display: none; }
.fade-enter-active, .fade-leave-active {
    transition: opacity .2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}

.twitterIcon {
    display: inline-block;
    width: 30px;
    height: 25px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQ4IDIwNCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjQ4IDIwNCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJtMjIxLjk1IDUxLjI5YzAuMTUgMi4xNyAwLjE1IDQuMzQgMC4xNSA2LjUzIDAgNjYuNzMtNTAuOCAxNDMuNjktMTQzLjY5IDE0My42OXYtMC4wNGMtMjcuNDQgMC4wNC01NC4zMS03LjgyLTc3LjQxLTIyLjY0IDMuOTkgMC40OCA4IDAuNzIgMTIuMDIgMC43MyAyMi43NCAwLjAyIDQ0LjgzLTcuNjEgNjIuNzItMjEuNjYtMjEuNjEtMC40MS00MC41Ni0xNC41LTQ3LjE4LTM1LjA3IDcuNTcgMS40NiAxNS4zNyAxLjE2IDIyLjgtMC44Ny0yMy41Ni00Ljc2LTQwLjUxLTI1LjQ2LTQwLjUxLTQ5LjV2LTAuNjRjNy4wMiAzLjkxIDE0Ljg4IDYuMDggMjIuOTIgNi4zMi0yMi4xOS0xNC44My0yOS4wMy00NC4zNS0xNS42My02Ny40MyAyNS42NCAzMS41NSA2My40NyA1MC43MyAxMDQuMDggNTIuNzYtNC4wNy0xNy41NCAxLjQ5LTM1LjkyIDE0LjYxLTQ4LjI1IDIwLjM0LTE5LjEyIDUyLjMzLTE4LjE0IDcxLjQ1IDIuMTkgMTEuMzEtMi4yMyAyMi4xNS02LjM4IDMyLjA3LTEyLjI2LTMuNzcgMTEuNjktMTEuNjYgMjEuNjItMjIuMiAyNy45MyAxMC4wMS0xLjE4IDE5Ljc5LTMuODYgMjktNy45NS02Ljc4IDEwLjE2LTE1LjMyIDE5LjAxLTI1LjIgMjYuMTZ6Ii8+DQo8L3N2Zz4NCg==);
}

/* bootstrap override etc... */
a {text-decoration: underline;}
a.btn {text-decoration: none; }

.d-ib {display: inline-block !important; }
.font-big {font-size: 120%;}
.letter-spacing-1px {letter-spacing: 1px;}

.bg-spDark {background: rgba(255,255,255,.05); }
.bg-black-20 {background-color: rgba(0,0,0,.2);}
.bg-black-30 {background-color: rgba(0,0,0,.3);}
.text-white-60 {color: rgba(255,255,255,.6)!important;}
.border-white-60 {border-top: 1px solid rgba(255,255,255,.3)}
.btn-spOrange {background: linear-gradient(to right, #BB6C21, #D7A537, #BB6C21); color: white; font-weight: bold; border-radius: 0; text-align: center; }
.btn-spBlack {background: #232323; color: white; font-weight: bold; border-radius: 0; text-align: center; }
.btn-spTwitter {position: relative; padding-left: 70px; padding-right: 50px; color: #fff; border-radius: 100px; background: #77834D; }
.btn-spTwitter::before {content: ""; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 100%; background: url(https://static.ncsoft.jp/lineageM/event/202305_special_gift_4th/twitterIcon.png) center no-repeat #77834D; }

.form-sp,
.form-sp[readonly] {background: rgba(0,0,0,.3); border-radius: 0; border: 0; color: #fff; }
.form-sp[disabled] {background: rgba(0,0,0,.3); color: rgba(255,255,255,.7)}

input[type="text"]::placeholder {color: rgba(255,255,255,.2); }

.w-260px {width: 260px; max-width: 100%; }
.w-150px {width: 150px; max-width: 100%; }
.w-130px {width: 130px; max-width: 100%; }
.z-index1 {z-index: 1 !important; }
.mt-6 {margin-top: 4.5rem; }
.pt-6 {padding-top: 4.5rem; }
.mt-7 {margin-top: 6rem; }
.pt-7 {padding-top: 6rem; }
.mt-8 {margin-top: 7.5rem; }
.pt-8 {padding-top: 7.5rem; }

/* common */

/*html, body, .allContainer {height: 100%;}*/
body.showLayer {overflow: hidden;}

.allContainer {background: url(https://static.ncsoft.jp/lineageM/event/202305_special_gift_4th/bg.jpg) center top no-repeat #000;}
@media screen and (min-width: 1920px) {
    .allContainer {
        background-size: 100%;
    }
}
@media screen and (max-width: 575.98px) {
    .allContainer {background: url(https://static.ncsoft.jp/lineageM/event/202305_special_gift_4th/bg_m.jpg) center top no-repeat #000; background-size: 100%; }
}

/* headArea */
.headArea {background: #0004; color: #fff; }
/*@media screen and (max-width: 575.98px) {*/
/*    .headArea {height: auto; background-image: url(https://static.ncsoft.jp/lineageM/event/202305_special_gift_4th/bg1_m.jpg); background-size: cover; }*/
/*}*/
.headArea__container {max-width: 1200px; height: 100%; display: flex; flex-direction: column; align-items: center; }

.headArea__date {padding: .3rem 2rem; border-radius: 100px; color: #F4E2BE; background: rgba(0,0,0,.4); box-shadow: 1px 1px 10px rgba(0,0,0,0.1); }
.headArea__copy {font-size: 130%; }
.headArea__logo {transition: width .5s ease-in-out;}
@media screen and (max-width: 575.98px) {
    .headArea__logo {width: 112px; }
    .headArea__title {font-size: 2rem;}
}


/* bodyArea */
.bodyArea {background: #614225e6; overflow: hidden;}
/*@media screen and (min-width: 1920px) {*/
/*    .bodyArea {background-size: 100%; }*/
/*}*/
/*@media screen and (max-width: 575.98px) {*/
/*    .bodyArea {background-image: url(https://static.ncsoft.jp/lineageM/event/202305_special_gift_4th/bg2_m.jpg); background-size: 100% }*/
/*}*/
.bodyArea__container {max-width: 1090px; }


/* footerArea */
.footerArea {background: #000; color: #fff; }
.footerArea__container {max-width: 1200px; padding: 1.5rem; }
.footerArea__head {font-size: 120%;}


/* parts */
.bannerArea {padding: 30px 15px; margin-bottom: 40px; max-width: 100%; background: rgba(0,0,0,.2);}
.bannerArea__inner {/*width: 860px;*/ /* max-width: 610px;*/ margin-left: auto; margin-right: auto; text-align: center; image-rendering: -webkit-optimize-contrast; }

.cardSp1 {background: rgba(0,0,0,.2)}
.cardSp1::before {content: ""; display: block; height: 1px; width: 100%; background: linear-gradient(to right, rgba(241,183,123,.05) 0%, rgba(241,183,123,.5) 30%, rgba(241,183,123,.5) 70%, rgba(241,183,123,.05) 100%); }
.cardSp1__head {padding: .5rem; background: linear-gradient(to right, rgba(0,0,0,.05) 0%, rgba(0,0,0,.2) 20%, rgba(0,0,0,.2) 80%, rgba(0,0,0,.05) 100%); color: #EFDCB7; }

.idIcon {flex-shrink: 1; padding: 3px; border-radius: 100%; background: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.4)); box-shadow: 0 0 10px rgba(0,0,0,.5) inset, 0 0 5px rgba(255,206,109, .3);}
/*.idIcon__inner {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }*/
.idIcon img {max-width: 100%;}

.twitterHolder {position: relative; text-align: center; }
.twitterHead {position: relative; font-size: 120%; color: #EFDCB7; }

.twitterCharaPC {display: none; position: relative; flex-grow: 0; flex-shrink: 1; max-width: 30%; width: 268px; top: auto; right: -1.5rem; pointer-events: none;  }
.twitterCharaPC:before {content: ""; position: absolute; display: block; right: -29px; bottom: -.5rem; width: 170%; max-width: 359px; height: 100%; min-height: 270px; background: url(https://static.ncsoft.jp/lineageM/event/202305_special_gift_4th/twitterCha.png) no-repeat right bottom; background-size: contain;}

.twitterCharaMB {position: absolute; right: -15px; top: -10vw; background: url(https://static.ncsoft.jp/lineageM/event/202305_special_gift_4th/twitterCha_mb.png) no-repeat right top; background-size: contain; width: 54vw; height: calc(54vw * 1.14); max-width: 390px; max-height: 440px; pointer-events: none;}

@media screen and (max-width: 575.98px) {
    .twitterCharaMB {margin-top: 10px;}
}



@media screen and (min-width: 768px) {
    .twitterCharaPC {display: block; }
    .twitterCharaMB {display: none; }
}

/* MyLayer */
.myLayer {position: fixed; left: 0; top: 0; right: 0; bottom: 0; padding: 46px 8px; background: rgba(0,0,0,0.5); z-index: 1000; text-align: center; overflow: auto; }
.myLayer::before {content: ""; display: inline-block; font-size: 0; height: 100%; width: 0; vertical-align: middle; }
.myLayer__panel {display: inline-block; vertical-align: middle; text-align: left; }
.myLayer__panelInner {position: relative; }
.myLayer__close {position: absolute; right: 0; top: -42px; width: 35px; height: 35px; cursor: pointer; background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%20%3Csvg%20data-name%3D%22layer%22%20viewBox%3D%220%200%2036%2036%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M1.1%2C1.9l33%2C33%2C.7-.7-33-33Z%22%2F%3E%20%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M34.9%2C1.9l-33%2C33-.7-.7%2C33-33Z%22%2F%3E%20%3C%2Fsvg%3E'); }

.myLayer__panel--mine {width: 520px; max-width: 94%; background: #674B3F; }


/* myLoading */
.myLoading {position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,.5); }
.myLoading::after {content: ""; width: 32px; height: 32px; background: #fff; animation: rotate 1s infinite linear;}

@keyframes rotate {
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg); }
}

/* utils */
.utils {position: fixed; left: 0; top: 0; right: 0; z-index: 99;}
.utils__inner {position: absolute; top: 20px; left: 0; right: 0; padding-right: 20px; padding-left: 20px; display: flex; justify-content: flex-end; height: 0; }
.utils__apps {display: flex; flex-direction: row-reverse; }
.utils__sns {display: flex; }
.utils__icon {display: block; width: 45px; height: 45px; margin-left: 2px; margin-right: 2px; border: 0; background-color: transparent; flex-shrink: 0;}
.utils__icon--appstore,
.utils__icon--googleplay,
.utils__icon--purple {background: url(https://static.ncsoft.jp/lineageM/event/202305_special_gift_4th/ic_market_pc.png);}
.utils__icon--googleplay {background-position-x: -48px; }
.utils__icon--purple {background-position-x: -96px; }
.utils__icon--sns,
.utils__icon--home {background: url(https://static.ncsoft.jp/lineageM/event/202305_special_gift_4th/util_top_pc.png)}
.utils__icon--home {background-position-x: -48px;}
.deviceIOS .utils__icon--googleplay {display: none;}
.deviceAndroid .utils__icon--appstore {display: none;}
@media screen and (max-width: 767.98px) {
    .utils__inner {justify-content: space-between; flex-direction: row-reverse; top: 10px; padding-left: 10px; padding-right: 10px;  }
    .utils__apps {flex-direction: column;}
    .utils__apps .utils__icon {margin: 2px 0;}
    .utils__apps .utils__icon:first-child {margin-top: 0; }
}
.utilsSnsLayer {position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,.5); z-index: 99; visibility: hidden; opacity: 0; transition: all .5s ease-in-out;}
.utilsSnsLayer.show {visibility: visible; opacity: 1;}
.utilsSnsLayer__cage {position: relative; padding: 40px; background: #000; border: 1px solid rgba(255,255,255,.3)}
.utilsSnsLayer__close {position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%20%3Csvg%20data-name%3D%22layer%22%20viewBox%3D%220%200%2036%2036%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M1.1%2C1.9l33%2C33%2C.7-.7-33-33Z%22%2F%3E%20%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M34.9%2C1.9l-33%2C33-.7-.7%2C33-33Z%22%2F%3E%20%3C%2Fsvg%3E'); cursor: pointer; }
.utilsSnsLayer__iconSet {display: flex; justify-content: center;}
.utilsSnsLayer__icon {display: block; width: 51px; height: 51px; margin-left: 2px; margin-right: 2px; background-size: contain; border: none; background-color: transparent; }
.utilsSnsLayer__icon--facebook {background-image: url(https://static.ncsoft.jp/lineageM/event/202305_special_gift_4th/share-facebook.png)}
.utilsSnsLayer__icon--twitter {background-image: url(https://static.ncsoft.jp/lineageM/event/202305_special_gift_4th/share-twitter.png)}
.utilsSnsLayer__icon--urlCopy {background-image: url(https://static.ncsoft.jp/lineageM/event/202305_special_gift_4th/share-copy.png)}
body.utilsSnsLayerOpen {overflow: hidden;}