html { scroll-behavior: smooth; }
body { position: relative; background: #0e1d34; }
.hide { display: none; position: fixed; z-index: -999; font-size: 0; width: 0; height: 0; opacity: 0; top: -100%; left: -100% }
.block { display: block }
#wrap { position: relative; height: 100%; margin: 0 auto; background: #fff; }
.container { min-height: 1000px; box-sizing: border-box }

.spr_nova, .spr_nova_after:after { background: url(../img/update_nova/spr_nova.png) no-repeat; }
.spr_nova.spr_popup_frame { width: 39px; height: 36px; background-position: -62px -202px; }
.spr_nova.spr_popup_frame.right.top { transform: rotateY(180deg); }
.spr_nova.spr_popup_frame.left.bottom { transform: rotateX(180deg); }
.spr_nova.spr_popup_frame.right.bottom { transform: rotateX(180deg) rotateY(180deg); }

.spr_sns { display: inline-block; background: url('../img/common/spr_sns.png') no-repeat; height: 22px; }
.spr_sns.spr_facebook { width: 14px; background-position: 0px 0px; }
.spr_sns.spr_instagram { width: 22px; background-position: -40px 0px; }
.spr_sns.spr_twitter { width: 24px; background-position: -80px 0px; }
.spr_sns.spr_youtube { width: 24px; background-position: -120px 0px; }
.spr_sns.spr_twitch { width: 21px; background-position: -160px 0px; }
.spr_sns.spr_discord { width: 26px; background-position: -200px 0px; }

header { max-width: 300px; left: 0; top: 0; }
header { display: block; width: 100%; position: absolute; left: 2%; top: 30px; z-index: 55; }
header h1 { display: block; transition: all .3s; }
.introLogo .logo_box { display: block; width: 282px; height: 73px; background: url('../img/adventure_transfer/logo_global.png') no-repeat center center; background-size: contain; }
.introLogo { display: block; }
.introLogo a { display: block; }
.introLogo img { display: block; width: 100%; height: 100%; margin: 30px; }

.intro { display: block; position: relative; background: url('../img/adventure_transfer/intro_visual.jpg') no-repeat; background-size: cover; min-height: 100vh; overflow: hidden; background-color: #000d32 }
.introBg { background: url('../img/adventure_transfer/intro_visual_effect.jpg') no-repeat; -webkit-transition: 2s; transition: 2s; opacity: 0; width: 100%; min-height: 100vh; left: 0; top: 0; position: fixed; background-size: cover }
.introBg.on { opacity: 1 }
.introContainer { position: relative; height: 100vh; z-index: 0 }
.introTitle { position: absolute; bottom: 85px; left: 5%; -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; transition: all 1s }
.introTitle.on { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) }
.introTitle .subtitle { font-size: 30px; color: #FFF; opacity: 0.8; }
.introTitle .title { margin-top: 20px; font-size: 56px; line-height: 1.25; color: #f5f5f5; }
.introButtons { margin-left: 0; margin-top: 40px; display: flex }
.introButtons .logo_kakao { width: 87px; }
.introButtons .logo_pearlabyss { width: 106px; }
.introButtons li .official { font-size: 26px; margin-top: 0.4em; color: #FFF; }
.introButtons li .date { font-size: 13px; margin-top: 0.5em; opacity: 0.9; color: #FFF; }
.introButtons li ~ li { margin-left: 10px }
.introButtons li a { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 466px; height: 130px; padding: 34px 28px; box-sizing: border-box; background: url('../img/adventure_transfer/ico_arr.png') no-repeat; background-position: 95% center; background-color: #2b5da8; }
.introButtons li a.on { background-color: #db502a; }
.introButtons li ~ li a { background-color: #445b7e }
.introButtons a.disabled { cursor: not-allowed; }
.introButtons li a em { display: block; font-size: 22px; color: #d0deff; font-weight: 400; font-style: normal }
.introButtons li a span { display: block; margin-top: 0.3em; font-size: 26px; color: #fcd13b; letter-spacing: -.5px }
.introButtons li ~ li a span { color: #fff }

.link_wrap { margin-top: 40px; }
.link_wrap .partner { display: inline-block; padding: 5px 15px; font-size: 13px; line-height: 16px; color: #FFF; border: 1px solid #FFF; box-sizing: border-box; opacity: 0.6; }
.link_wrap,
.link_wrap .sns_wrap { display: flex; justify-content: flex-start; align-items: center; }
.link_wrap .sns_wrap { box-sizing: border-box; overflow: hidden; }
.link_wrap .sns_wrap .item { float: left; display: block; }
.link_wrap .sns_wrap .item a { font-size: 0; line-height: 0; color: #FFF; opacity: 0.6; }
.link_wrap .sns_wrap .item { margin-left: 28px; }
.link_wrap .sns_wrap .btn_sns { display: inline-block; }

#popup_wrap { position: fixed; left: 0; top: 0; display: none; width: 100%; height: 100%; z-index: 101; }
#popup_wrap a { font-size: 17px; color: #1d1d1d; }
#popup_wrap a.btn_blue:hover { background: #cee2ef; }
#popup_wrap.active,
#popup_wrap .popup_box.active { display: block; }
#popup_wrap .popup_box { position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); display: none; width: 624px; padding: 40px 0; background: #FFF; border: 2px solid #5582a6; z-index: 11; box-sizing: border-box; }
#popup_wrap .popup_box .frame { position: absolute; }
#popup_wrap .popup_box .frame.left { left: -2px; }
#popup_wrap .popup_box .frame.right { right: -2px; }
#popup_wrap .popup_box .frame.bottom { bottom: -2px; }
#popup_wrap .popup_box .frame.top { top: -2px; }
#popup_wrap .popup_box .inner { width: 100%; padding: 0 14px; overflow: hidden; box-sizing: border-box; }
#popup_wrap .popup_box .inner.agree { padding: 0 24px 0 34px; }
#popup_wrap .popup_box .title { padding: 0 30px; font-size: 28px; line-height: 1.4; text-align: center; color: #15212f; box-sizing: border-box; }
#popup_wrap .popup_box .desc { font-size: 20px; text-align: center; margin-top: 14px; }
#popup_wrap .popup_box .desc em { color: #c08345; }
#popup_wrap .popup_box .line { position: relative; height: 12px; margin: 10px 0; overflow: hidden; }
#popup_wrap .popup_box .line .spr_popup_line { position: absolute; display: block; overflow: hidden; }
#popup_wrap .popup_box .line .left { right: 50%; top: 0; }
#popup_wrap .popup_box .line .right { left: 50%; top: 0; transform: rotateY(180deg); }
#popup_wrap .dim { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 10; }
#popup_wrap .btn_popup_close { position: absolute; right: 24px; top: 20px; display: block; width: 30px; height: 30px; border: none; background: none; cursor: pointer; }
#popup_wrap .btn_popup_close:before,
#popup_wrap .btn_popup_close:after { content: ''; position: absolute; left: 0; display: block; width: 42.42px; height: 1px; background: #a0bace; transform-origin: left center; transition: opacity 0.2s; }
#popup_wrap .btn_popup_close:before { top: 0; transform: rotate(45deg); }
#popup_wrap .btn_popup_close:after { bottom: 0; transform: rotate(-45deg); }
#popup_wrap .box_wrap { display: block; margin-top: 40px; overflow: hidden; }
#popup_wrap .box_wrap.center { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
#popup_wrap .btn_blue { display: flex; justify-content: center; align-items: center; height: 102px; background: #e4ecf1; box-sizing: border-box; }
#popup_wrap .one { width: 100%; }
#popup_wrap .box_wrap .half { float: left; flex-wrap: wrap; flex-direction: column; width: 49.5%; height: 162px; }
#popup_wrap .box_wrap .half:nth-of-type(n+3) { margin-top: 1%; }
#popup_wrap .box_wrap .half:nth-of-type(2n) { margin-left: 1%; }
#popup_wrap .box_wrap .nation { display: block; height: 24px; font-size: 18px; }
#popup_wrap .box_wrap .platform { display: flex; justify-content: center; align-items: flex-start; margin-top: 10px; }
#popup_wrap .box_wrap .platform .item { display: inline-flex; justify-content: center; align-items: center; width: 54px; height: 54px; border: 2px solid #395266; border-radius: 50%; background: linear-gradient(to bottom, #3f5c71, #32495b); }
#popup_wrap .box_wrap .platform .item i { display: inline-block; }
#popup_wrap .box_wrap .platform .item + .item { margin-left: 8px; }
#popup_wrap .box_wrap .third { float: left; width: 32.6%; text-align: center; }
#popup_wrap .box_wrap .third:nth-of-type(n+4) { margin-top: 1%; }
#popup_wrap .box_wrap .third:nth-of-type(3n+2),
#popup_wrap .box_wrap .third:nth-of-type(3n+3) { margin-left: 1%; }
#popup_wrap .agree_box { margin-top: 40px; max-height: 50vh; padding-right: 1em; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; }
#popup_wrap .agree_box .title,
#popup_wrap .agree_box .desc { line-height: 1.8; text-align: left; word-break: break-word; }
#popup_wrap .agree_box .title { padding: 0; font-weight: bold; font-size: 15px; }
#popup_wrap .agree_box .desc { margin-top: 4px; font-size: 14px; }
#popup_wrap .agree_box .desc + .title { margin-top: 30px; }
#popup_wrap .agree_box::-webkit-scrollbar-track { background-color: #ffffff; }
#popup_wrap .agree_box::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; }
#popup_wrap .agree_box::-webkit-scrollbar-thumb { background-color: #dce9f1; border: none; }
#popup_wrap .agree_box::-webkit-scrollbar-thumb:hover { background-color: #b0c6d6; }


#cookieAlert { position: fixed; left: 50%; bottom: 0; z-index: 20; width: 100%; max-width: 1250px; -moz-transition: transform .7s ease-in-out; -o-transition: transform .7s ease-in-out; -webkit-transition: transform .7s ease-in-out; transition: transform .7s ease-in-out; -moz-transform: translate(-50%,100%); -ms-transform: translate(-50%,100%); -o-transform: translate(-50%,100%); -webkit-transform: translate(-50%,100%); transform: translate(-50%,100%); overflow: hidden; z-index: 40; }
#cookieAlert .alertInner { position: relative; display: flex; justify-content: flex-start; align-items: center; width: 100%; margin: 0 auto; padding: 15px 30px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #222; border-radius: 4px; overflow: hidden; }
#cookieAlert.active { -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -o-transform: translate(-50%,0); -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
#cookieAlert .message { flex: 1 1 auto; padding-right: 1rem; font-size: 0.92rem; line-height: 1.4; color: #fff; text-align: left; box-sizing: border-box; }
#cookieAlert .message a { display: inline-block; color: #31a8f0; text-decoration: underline; -moz-transition: color .3s ease-in-out; -o-transition: color .3s ease-in-out; -webkit-transition: color .3s ease-in-out; transition: color .3s ease-in-out; }
#cookieAlert .message a:hover { color: #b2f7ff; }
#cookieAlert .cookieAllow { float: right; display: inline-flex; justify-content: center; align-items: center; padding: 0.5rem 1rem; font-size: 0.92rem; line-height: 20px; color: #000; text-align: center; vertical-align: top; border-radius: 6px; text-shadow: 1px 1px rgba(255,255,255,.3); background-color: #f1d600; -moz-transition: background .2s ease-in-out; -o-transition: background .2s ease-in-out; -webkit-transition: background .2s ease-in-out; transition: background .2s ease-in-out; }
#cookieAlert .cookieAllow:hover { background-color: #fff; }


@media screen and (min-width:1025px) {
    .only-m { display: none !important }

    .introButtons li a { transition: all .3s }
    .introButtons li a:hover { opacity: .8 }
    .introButtons li a.disabled:hover { opacity: 1 }

    .link_wrap .sns_wrap a,
    .link_wrap .sns_wrap .item a,
    .link_wrap .partner { opacity: 0.5; transition: opacity 0.2s; }
    .link_wrap .sns_wrap a:hover,
    .link_wrap .sns_wrap .item a:hover,
    .link_wrap .partner:hover { opacity: 0.9; }

    #popup_wrap .btn_popup_close:hover:before, #popup_wrap .btn_popup_close:hover:after { opacity: 0.4; }
}

@media screen and (max-width:1024px) {
    .only-pc { display: none !important }
    .spr_nova,
    .spr_nova_after:after { background-size: 66.66rem 66.66rem; }
    .spr_nova.spr_popup_frame { width: 1.63rem; height: 1.5rem; background-position: -2.59rem -8.42rem; }

    .spr_sns { height: 1.283rem; padding-left: 0; background-size: 16.3324rem auto; }
    .spr_sns.spr_facebook { width: 0.8162rem; background-position: 0rem 0px; }
    .spr_sns.spr_instagram { width: 1.362rem; background-position: -2.324rem 0px; }
    .spr_sns.spr_twitter { width: 1.4824rem; background-position: -4.662rem 0px; }
    .spr_sns.spr_youtube { width: 1.4824rem; background-position: -7rem 0px; }
    .spr_sns.spr_twitch { width: 1.2324rem; background-position: -9.324rem 0px; }
    .spr_sns.spr_discord { width: 1.7rem; background-position: -11.662rem 0px; }

    #wrap { overflow-x: hidden }
    #mainContent { width: 100%; height: 100% }
    .intro { background-image: url('../img/adventure_transfer/intro_visual_mo.jpg'); background-size: 100% }
    header { position: fixed; left: auto; top: auto; width: 100%; max-width: 100%; transition: all 1s; }
    header h1 { max-width: 100% }
    header .introLogo { position: absolute; top: 1.333rem; left: 1.375rem; }
    header .introLogo img { margin: 0; }
    header .introLogo .logo_box { background-image: url('../img/adventure_transfer/logo_global_mo.png'); width: 200px; height: 58px; }
    header.on { height: 60px; background: rgba(0,0,0,.7); }
    header.on .introLogo .logo_box { background-image: url('../img/adventure_transfer/logo_global.png'); width: 152px; height: 40px; }


    #wrap { height: auto; }
    header.on .introLogo { top: 10px; left: 3%; width: 150px; }
    .introContainer { padding-bottom: 2.4rem; height: auto; }
    .introTitle { position: static; margin-top: 23.458rem; padding: 0 1.416rem; box-sizing: border-box }
    .introTitle img { display: block; max-width: 100%; margin: 0 auto; }
    .introButtons .logo_kakao,
    .introButtons .logo_pearlabyss { margin-bottom: 0.2rem; }
    .introButtons .logo_kakao { width: 7.416rem; }
    .introButtons .logo_pearlabyss { width: 8.34rem; }
    .introButtons li a span { font-size: 1.7rem; margin-top: 0.5em; }
    .introButtons li .date { font-size: 0.958rem; margin-top: 0.6em; }
    .introTitle .subtitle { font-size: 1.16rem; }
    .introTitle .title { margin-top: 0.6em; font-size: 1.83rem; }
    .introTitle .title strong { display: block; margin-top: 0.2em; font-size: 2.85rem; }
    .introButtons { flex-direction: column; margin-top: 1.8rem; }
    .introButtons li { display: flex; width: 100%; margin: 0; }
    .introButtons li .official { font-size: 1.7rem; margin-top: 0.5em; }
    .introButtons li a { display: block; width: 100%; height: auto; text-align: center; padding: 2.25rem 1rem 3.78rem 1rem; background: url(../img/adventure_transfer/icn_arrow.png) bottom 1.46rem center #2b5da8 no-repeat; background-size: auto 1rem; box-sizing: border-box; }
    .introButtons li ~ li { margin-top: 0.916rem; margin-left: 0; }

    .link_wrap { flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-top: 2.33rem; text-align: center; }
    .link_wrap .sns_wrap { margin-top: 1.6rem; }
    .link_wrap .sns_wrap .item:first-child { margin-left: 0; }
    .link_wrap .sns_wrap .item + .item { margin-left: 2.3rem; }
    .link_wrap .partner { font-size: 0.8rem; line-height: 1.283rem; }

    #popup_wrap a { font-size: 0.757rem; }
    #popup_wrap .popup_box .inner { padding: 0 0.583rem; }
    #popup_wrap .popup_box .inner.agree { padding: 0 0.6em 0 1.4em; }
    #popup_wrap .popup_box .title { font-size: 1.16rem; }
    #popup_wrap .popup_box .desc { font-size: 0.833rem; margin-top: 0.5833rem; }
    #popup_wrap .btn_popup_close { right: 1.25rem; top: 1.25rem; width: 1.25rem; height: 1.25rem; }
    #popup_wrap .btn_popup_close:before,
    #popup_wrap .btn_popup_close:after { width: 1.76rem; }
    #popup_wrap .popup_box,
    #popup_wrap #popup_agreement { width: 28.75rem; padding: 1.666rem 0; }
    #popup_wrap .box_wrap { margin-top: 1.67rem; }
    #popup_wrap .btn_blue { height: 4.25rem; }
    #popup_wrap .box_wrap .half { height: 6.75rem; }
    #popup_wrap .box_wrap .nation { height: 1rem; font-size: 0.75rem; }
    #popup_wrap .box_wrap .platform { margin-top: 0.42rem; }
    #popup_wrap .box_wrap .platform .item { width: 2.25rem; height: 2.25rem; }
    #popup_wrap .box_wrap .platform .item + .item { margin-left: 0.34rem; }
    #popup_wrap .agree_box { margin-top: 1.8rem; }
    #popup_wrap .agree_box .title { margin-top: 0.4em; font-size: 0.866rem; }
    #popup_wrap .agree_box .desc { font-size: 0.72rem; }
    #popup_wrap .agree_box .desc { margin-top: 0.2em; }

    #cookieAlert .alertInner { padding: 0.625rem; }
    #cookieAlert .message { padding-right: 0.4rem; text-align: left; font-size: 0.68rem; }
    #cookieAlert .cookieAllow { flex: 1 0 auto; font-size: 0.68rem; }
}